add anthropic 3.5

Author: sparrow-js

components/components/SettingsDialog.tsx

@@ -94,9 +94,9 @@ function SettingsDialog({ settings, setSettings, openDialog, setOpenDialog }: Pr
                 <span className="mr-2">OpenAI</span>
                 <RadioGroupItem value="openai" id="openai-llm"/>
               </Label>
-              <Label className="flex item-center" htmlFor="gemini-llm">
-                <span className="mr-2">Gemini</span>
-                <RadioGroupItem  value="gemini" id="gemini-llm"/>
+              <Label className="flex item-center" htmlFor="Anthropic-llm">
+                <span className="mr-2">Anthropic</span>
+                <RadioGroupItem  value="anthropic" id="Anthropic-llm"/>
               </Label>
             </RadioGroup>
           </div>
@@ -149,26 +149,48 @@ function SettingsDialog({ settings, setSettings, openDialog, setOpenDialog }: Pr
 
             ) : (
               <>
-                <p className="text-rose-500">The output effect is not good and it will not be maintained for the time being.</p>
-                <Label htmlFor="openai-api-key">
-                  <div>Gemini API key</div>
-                  <div className="font-light mt-2 leading-relaxed">
-                    Only stored in your browser. Never stored on servers. Overrides
-                    your .env config.
-                  </div>
-                </Label>
+              <Label htmlFor="Anthropic-api-key">
+                <div>Anthropic API key</div>
+                <div className="font-light mt-2 leading-relaxed">
+                  Only stored in your browser. Never stored on servers. Overrides
+                  your .env config.
+                  <button 
+                    className="inline-flex items-center justify-center ml-2">
+                     <OnboardingNote/>
+                  </button>
+                </div>
+              </Label>
 
-                <Input
-                  id="Gemini-api-key"
-                  placeholder="Gemini API key"
-                  value={settings?.geminiApiKey || ""}
-                  onChange={(e) =>
-                    setSettings({
-                      ...settings,
-                      geminiApiKey: e.target.value,
-                    })
-                  }
-                />
+              <Input
+                id="anthropic-api-key"
+                placeholder="Anthropic API key"
+                value={settings?.anthropicApiKey || ""}
+                onChange={(e) =>
+                  setSettings({
+                    ...settings,
+                    anthropicApiKey: e.target.value,
+                  })
+                }
+              />
+
+              <Label htmlFor="anthropic-api-key">
+                <div>Anthropic Base URL (optional)</div>
+                <div className="font-light mt-2 leading-relaxed">
+                  Replace with a proxy URL if you don't want to use the default.
+                </div>
+              </Label>
+
+              <Input
+                id="anthropic-base-url"
+                placeholder="Anthropic Base URL"
+                value={settings?.anthropicBaseURL || ""}
+                onChange={(e) =>
+                  setSettings({
+                    ...settings,
+                    anthropicBaseURL: e.target.value,
+                  })
+                }
+              />
               </>
             )
           }

components/contexts/SettingContext.tsx

@@ -26,6 +26,8 @@ const initialValue = {
         init: false,
         llm: 'openai',
         geminiApiKey: '',
+        anthropicApiKey: '',
+        anthropicBaseURL: null
     },
     initCreate: false,
     setSettings: () => {},

components/types.ts

@@ -32,6 +32,8 @@ export interface Settings {
   init: boolean;
   llm: string;
   geminiApiKey: string;
+  anthropicApiKey: string;
+  anthropicBaseURL: string | null;
 }
 
 export enum AppState {

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@alifd/next": "^1.26.37",
     "@alilc/lowcode-datasource-types": "^1.1.4",
+    "@anthropic-ai/sdk": "^0.24.0",
     "@codesandbox/sandpack-react": "^2.11.2",
     "@codesandbox/sandpack-themes": "^2.0.21",
     "@excalidraw/excalidraw": "0.17.2",

pnpm-lock.yaml

@@ -21,6 +21,8 @@ export interface IGenerateCodeParams {
   llm: string;
   geminiApiKey: string;
   slug?: string;
+  anthropicApiKey: string;
+  anthropicBaseURL: string;
 }
 
 const encoder = new TextEncoder();
@@ -118,6 +120,8 @@ export async function streamGenerateCode(
           openAiBaseURL: params.openAiBaseURL,
           llm: params.llm, // 'Gemini'
           geminiApiKey: params.geminiApiKey,
+          anthropicApiKey: params.anthropicApiKey,
+          anthropicBaseURL: params.anthropicBaseURL
         },
       );
     } catch (e) {

service/events/generateCode.ts

@@ -1,4 +1,5 @@
 import OpenAI from 'openai';
+import Anthropic from '@anthropic-ai/sdk';
 
 
 import {
@@ -133,13 +134,66 @@ export async function streamingOpenAIResponses(
     openAiBaseURL: any;
     llm: string;
     geminiApiKey: any;
+    anthropicApiKey: any;
+    anthropicBaseURL: any
   }
 ) {
-
   if (params.llm === "gemini") {
     const full_response = await useGeminiResponse([messages, callback, params]);
     return full_response;
   }
+  if (params.llm === "anthropic") {
+      const options: {
+        apiKey: string;
+        baseURL?: string;
+      } = {
+        apiKey: params.anthropicApiKey, // This is the default and can be omitted
+      }
+      if (params.anthropicBaseURL) {
+        options.baseURL = params.anthropicBaseURL
+      }
+      const anthropic = new Anthropic(options);
+      const systemMessage = messages.splice(0, 1)[0];
+      const aMessages = messages.map((message: any) => {
+        const {content} = message;
+        if (Array.isArray(content)) {
+          message.content = content.map((item) => {
+            let temp = item;
+            // console.log(item.image_url.url)
+            if (item.type === 'image_url') {
+              const imageUrl = item.image_url.url
+              temp = {
+                type: "image",
+                source: {
+                  type: "base64",
+                    media_type: imageUrl.split(";")[0].split(":")[1],
+                    data: imageUrl.split(",")[1],
+                },
+              }
+            }
+            return temp;
+          })
+
+        }
+        return message;
+      })
+
+      const stream = anthropic.messages
+      .stream({
+        model: 'claude-3-5-sonnet-20240620',
+        max_tokens: 4096,
+        system: systemMessage.content,
+        messages: aMessages
+      })
+      .on('text', (text) => {
+        callback(text);
+      });
+
+    const message = await stream.finalMessage();
+    return message;
+  }
+
+
 
   if (!params.openAiApiKey) {
     callback('No openai key, set it', 'error');