bring your own ai key

Author: sdairs

apps/web/src/app/api/chat/route.ts

@@ -1,10 +1,11 @@
-import { anthropic } from '@ai-sdk/anthropic';
+import { createAnthropic } from '@ai-sdk/anthropic';
 import { streamText, tool } from 'ai';
 import { getInstalledDataSources } from '@/lib/tinybird';
 import { z } from 'zod';
 
 // Allow streaming responses up to 30 seconds
 export const maxDuration = 30;
+const apiKey = process.env.ANTHROPIC_API_KEY;
 
 const event_type_context = `
 tool,event_type,description
@@ -103,11 +104,16 @@ auth0,w,"A warning has happened during a login flow"
 
 export async function POST(req: Request) {
   const token = req.headers.get('token') ?? '';
+  const userAIApiKey = req.headers.get('ai_key') ?? '';
   const { messages } = await req.json();
   console.log('token: ' + token)
 
+  const anthropic = createAnthropic(
+    { apiKey: apiKey ?? userAIApiKey },
+  );
+
   const result = streamText({
-    model: anthropic('claude-3-5-sonnet-latest'),
+    model: anthropic.languageModel('claude-3-5-sonnet-20240620'),
     maxSteps: 5,
     tools: {
       getAvailableDataSources: tool({

apps/web/src/app/chat/page.tsx

@@ -7,31 +7,45 @@ import { Suspense } from 'react';
 function ChatContent() {
   const { messages, input, handleInputChange, handleSubmit } = useChat();
   const [token] = useQueryState('token');
-  
-  return (
-    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
-      {messages.map(m => (
-        <div key={m.id} className="whitespace-pre-wrap">
-          {m.role === 'user' ? 'User: ' : 'AI: '}
-          {m.toolInvocations ? (
-            <pre>{JSON.stringify(m.toolInvocations, null, 2)}</pre>
-          ) : (
-            <p>{m.content}</p>
-          )}
-        </div>
-      ))}
+  const [aiKey, setAiKey] = useQueryState('ai_key');
 
-      <form onSubmit={(e) => {
-        handleSubmit(e, { headers: { token: token ?? '' } });
-      }}>
+  return (
+    <>
+      <div className="fixed top-0 w-full max-w-md p-4 bg-white">
+        <span className="inline-block w-24">Token:</span>
         <input
-          className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
-          value={input}
-          placeholder="Say something..."
-          onChange={handleInputChange}
+          type="password"
+          className="inline-block w-full p-2 border border-gray-300 rounded"
+          value={aiKey || ''}
+          onChange={(e) => setAiKey(e.target.value)}
+          placeholder="Enter your OpenAI/Anthropic API key..."
         />
-      </form>
-    </div>
+      </div>
+    
+      <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
+        {messages.map(m => (
+          <div key={m.id} className="whitespace-pre-wrap">
+            {m.role === 'user' ? 'User: ' : 'AI: '}
+            {m.toolInvocations ? (
+              <pre>{JSON.stringify(m.toolInvocations, null, 2)}</pre>
+            ) : (
+              <p>{m.content}</p>
+            )}
+          </div>
+        ))}
+
+        <form onSubmit={(e) => {
+          handleSubmit(e, { headers: { token: token ?? '', ai_key: aiKey ?? '' } });
+        }}>
+          <input
+            className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
+            value={input}
+            placeholder="Say something..."
+            onChange={handleInputChange}
+          />
+        </form>
+      </div>
+    </>
   );
 }