Open maybebansky opened 1 month ago
This is not the Anthropic SDK. You can use the Anthropic AI SDK provider in the browser.
Sorry I'm not sure I understand your reply. Yes I know this is the ai
repo and not Anthropics. Im trying to use ai
with Anthropic:
import { createAnthropic } from "@ai-sdk/anthropic";
import { generateText } from "ai";
const anthropic = createAnthropic({
apiKey
});
const { text } = await generateText({
model: anthropic(model),
prompt: 'What is the meaning of life?',
});
@maybebansky your question was referring to unrelated comments from the anthropic ai sdk.
@lgrammel sorry if I'm dragging this out but I'm still confused. Hopefully this is a clearer code example:
async function test({ provider }: { provider: "openai" | "anthropic" }) {
const openai = createOpenAI({
apiKey: apiKeyOpenAi
});
const anthropic = createAnthropic({
apiKey: aiKeyAnthropic
});
const result = await generateText({
model:
provider === "openai"
? openai("gpt-4o")
: anthropic("claude-3-5-sonnet-20240620"),
prompt: "What is the meaning of life?"
});
console.log({ provider, result });
}
The above code works with OpenAI but not for Anthropic. The error I get with Anthropic is:
Access to fetch at 'https://api.anthropic.com/v1/messages' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
I do need to make the request from the browser. My understanding is that if I were using the Anthropic SDK I could fix this by setting dangerouslyAllowBrowser: true
. Id like to use the ai
package instead, but is there a way to set dangerouslyAllowBrowser: true
for Anthropic with ai
?
Thanks that clarifies it.
@maybebansky the anthropic-dangerous-direct-browser-access
is actually a HTTP header. See https://simonwillison.net/2024/Aug/23/anthropic-dangerous-direct-browser-access/ for a cool example. This can also be seen in the Anthropic SDK code.
With that in mind, you should be able to add the headers in generateText
or streamText
. See https://sdk.vercel.ai/docs/ai-sdk-core/settings#headers
import { generateText } from 'ai';
import { createAnthropic } from '@ai-sdk/anthropic';
const anthropic = createAnthropic({
// you can either set the headers when init-ing,
headers: { 'anthropic-dangerous-direct-browser-access': 'true' }
});
const result = await generateText({
model: anthropic('claude-3-haiku-20240307'),
prompt: 'You are a helpful assistant.',
// or when calling the API
headers: { 'anthropic-dangerous-direct-browser-access': 'true' }
});
This is purely speculative though. I don't have a Claude API to really test this out 😅
@altbdoor I tried this, it works. Thank you.
Feature Description
I need to set
dangerouslyAllowBrowser
totrue
which you're able to do with the Anthropic SKD. However I don't think you can do this with theai
library?https://github.com/anthropics/anthropic-sdk-typescript/issues/248#issuecomment-2307620379
There are legitimate reasons for needing to do this: https://simonwillison.net/2024/Aug/23/anthropic-dangerous-direct-browser-access/
Use Case
For internal tools exposed to trusted users, or you can implement a “bring your own API key” pattern where users supply their own key to use with your client-side app.
Additional context
No response