Auth that enables users to sign in with their own OpenAI API key, so that you can build apps powered by users. Your app, their API usage.
User OpenAI API keys will not be shared with your app. Instead, your app will receive an apiKey
and baseURL
for a proxy to the OpenAI API which uses your user's API keys.
Because we believe it should be easier for developers to experiment and build new ideas for AI apps.
For each new app they build, developers also become responsible for the cost of using the OpenAI API and apps that leverage cutting-edge models like GPT-4 can carry a large bill if usage grows. Multiply that cost burden across several app ideas and that's a lot of overhead, making it harder to justify building new app ideas.
As a result, it’s becoming increasingly common to allow users to paste their personal OpenAI API key directly into the app. Not only is this bad security, it’s also super annoying for users to manually paste their API key in every new app that they want to try.
By offering a way for users to sign in with their own OpenAI API key, Genesis provides a safer way for users to try more AI apps and empowers developers to build their app ideas more easily, without taking on all of the cost burden for compute. It’s a win-win for everyone involved.
bun add @genesis-xyz/ai
<head>
tag of your site:
<script src="https://unpkg.com/@passes/polyfill@^0.1.5"></script>
requestOpenAIAPI
returns the following type, which may be passed directly to the OpenAI
sdk constructor.
type RequestOpenAIAPIResult = {
apiKey: string;
baseURL: string;
};
import { requestOpenAIAPI } from '@genesis-xyz/ai';
import { OpenAI } from 'openai';
// Request the user to "Sign In With OpenAI"
const openai = new OpenAI(await requestOpenAIAPI());
const chat = await openai.chat.completions.create({
model: 'gpt-4',
stream: true,
messages: [{ role: 'user', content: 'Hello OpenAI!' }],
});
import { requestOpenAIAPI } from '@genesis-xyz/ai';
import { OpenAI } from 'openai';
// Request the user to "Sign In With OpenAI"
const { baseURL, apiKey } = await requestOpenAIAPI();
// Use fetch to request the OpenAI API
const result = await fetch(`${baseURL}/chat/completions`, {
method: 'POST',
headers: {
'Authorization': `Bearer ${apiKey}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({
model: 'gpt-4',
messages: [{ role: 'user', content: 'Hello OpenAI!' }],
}),
})
How does it work?
- When a user first signs up for your app, a new tab opens and requests the user to enter their OpenAI API key and secure it with a Passkey.
- The API key is encrypted and stored for easy future access.
- Your app gets an
apiKey
andbaseURL
that it can use to configure theopenai
SDK.
- Your app sends requests to the provided
baseURL
, which is a proxy to OpenAI's API. - The proxy sends requests to OpenAI with the user's OpenAI API key.
- Responses from OpenAI are streamed to your app.
How is user data secured?
- Encrypted API keys. User API keys are wrapped in (encrypted) JWTs for both storage and transmission, meaning the key is never directly exposed to the requesting site or transmitted over the network in plain text.
- Reverse proxy. Genesis hosts a secure intermediary layer for proxying OpenAI API requests, which handles decrypting the user's API key, and forwarding the request to OpenAI. The reverse proxy allows the client to use the full functionality of the OpenAI API (including streaming) without ever handling the user API key.
For now, it’s a manual process:
-
If you already have an OpenAI account, sign in on the developer platform. If not, sign up for an account here.
-
To get an API key, click the lock icon in the left-side toolbar.
-
You’ll see all of the API keys that you’ve created on this page. To create a new API key, select
Create new secret key
, give it a name, and then copy the API key that appears.- Note: any previously created API keys can’t be retrieved from this page, so be sure to save the key when you create it.
-
Paste the API key in the text field and approve the request.