Allow Usage of OpenAI Compatible APIs #2194
Conversation
Changed front-end fields verification to allow the user to enter any openai compatible endpoint and api key. to do: make a verify connection button and edit paragraphs to reflect the change
📝 WalkthroughWalkthroughThe pull request modifies the validation schema for OpenAI settings in the client application. The changes focus on making the API key and base URL validation more flexible, allowing a broader range of input formats for different API providers while maintaining basic validation requirements. Changes
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
apps/client/src/pages/dashboard/settings/_sections/openai.tsx (1)
Line range hint
1-200: Consider essential security and UX improvements.
- The PR mentions adding a "Verify Connection" button - this would be valuable to implement now to prevent users from saving invalid configurations.
- The privacy notice only mentions OpenAI's terms and policies. Consider updating it to be inclusive of other providers.
Would you like me to:
- Generate code for implementing the "Verify Connection" functionality?
- Provide updated privacy notice text that covers multiple providers?
🧰 Tools
🪛 ESLint
[error] 30-30: /^https?://[^\s]+$/ can be optimized to /^https?://\S+$/.
(unicorn/better-regex)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/client/src/pages/dashboard/settings/_sections/openai.tsx(1 hunks)
🧰 Additional context used
🪛 ESLint
apps/client/src/pages/dashboard/settings/_sections/openai.tsx
[error] 30-30: /^https?://[^\s]+$/ can be optimized to /^https?://\S+$/.
(unicorn/better-regex)
🔇 Additional comments (1)
apps/client/src/pages/dashboard/settings/_sections/openai.tsx (1)
Line range hint
1-200: Verify secure storage of API keys.The component stores API keys in localStorage without encryption. While the code correctly mentions that keys are only sent to the respective API providers, consider:
- Adding encryption before storing in localStorage
- Implementing session-only storage option
🧰 Tools
🪛 ESLint
[error] 30-30: /^https?://[^\s]+$/ can be optimized to /^https?://\S+$/.
(unicorn/better-regex)
| .min(1, "API key cannot be empty.") //allow api keys like hf-.. and gsk_.. | ||
| .default(""), |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance API key validation for better error handling.
While removing the strict sk- prefix check allows for different API providers, the current validation is too permissive. Consider adding format validation to catch obvious errors early.
apiKey: z
.string()
- .min(1, "API key cannot be empty.") //allow api keys like hf-.. and gsk_..
+ .min(1, "API key cannot be empty.")
+ .max(256, "API key is too long")
+ .regex(
+ /^(sk-|hf-|gsk_).+$/,
+ "API key must start with 'sk-', 'hf-', or 'gsk_'"
+ )
.default(""),📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .min(1, "API key cannot be empty.") //allow api keys like hf-.. and gsk_.. | |
| .default(""), | |
| .min(1, "API key cannot be empty.") | |
| .max(256, "API key is too long") | |
| .regex( | |
| /^(sk-|hf-|gsk_).+$/, | |
| "API key must start with 'sk-', 'hf-', or 'gsk_'" | |
| ) | |
| .default(""), |
| .regex(/^https?:\/\/[^\s]+$/, "That doesn't look like a valid URL") //allow different openai compatible endpoints like https://api.groq.com/openai/v1 and https://api-inference.huggingface.co/v1/ | ||
| .or(z.literal("")) | ||
| .default(""), |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Strengthen URL validation for OpenAI-compatible endpoints.
The current URL validation can be improved in several ways:
- Optimize the regex as suggested by ESLint
- Add validation for common OpenAI-compatible paths
baseURL: z
.string()
- .regex(/^https?:\/\/[^\s]+$/, "That doesn't look like a valid URL")
+ .regex(/^https?:\/\/\S+$/, "That doesn't look like a valid URL")
+ .refine(
+ (url) => !url || url.endsWith('/v1') || url.endsWith('/openai/v1'),
+ "URL should end with '/v1' or '/openai/v1'"
+ )
.or(z.literal(""))
.default(""),📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .regex(/^https?:\/\/[^\s]+$/, "That doesn't look like a valid URL") //allow different openai compatible endpoints like https://api.groq.com/openai/v1 and https://api-inference.huggingface.co/v1/ | |
| .or(z.literal("")) | |
| .default(""), | |
| .regex(/^https?:\/\/\S+$/, "That doesn't look like a valid URL") //allow different openai compatible endpoints like https://api.groq.com/openai/v1 and https://api-inference.huggingface.co/v1/ | |
| .refine( | |
| (url) => !url || url.endsWith('/v1') || url.endsWith('/openai/v1'), | |
| "URL should end with '/v1' or '/openai/v1'" | |
| ) | |
| .or(z.literal("")) | |
| .default(""), |
🧰 Tools
🪛 ESLint
[error] 30-30: /^https?://[^\s]+$/ can be optimized to /^https?://\S+$/.
(unicorn/better-regex)
OpenAI API isn't free, so this limits users to either buying an OpenAI subscription or using a locally hosted Ollama instance.
Either of them requires resources that the average user might not have.
I found many alternatives that the average user might be able to access more easily. An example is the Groq API, which hosts open-source models with a reasonable rate limit for a single user for free (currently).
Their OpenAI-compatible endpoint (at the time of writing) looks like this:
https://api.groq.com/openai/v1And their API keys look like this:
gsk_....Reactive Resume's front end disables the save button when this data is entered.
Since it saves the OpenAI auth in browser storage, I manually edited mine to Groq API's, and it worked!
So, I changed the front-end fields verification to allow the user to enter any OpenAI-compatible endpoint and API key.
Please note that I do not have enough experience and that I haven't tested my changes (which are just two lines of code).
TO DO:
Make a "Verify Connection" button that sends a test request to the API (similar to Open WebUI).
Summary by CodeRabbit