Support dangerouslyAllowBrowser for Anthropic

[maybebansky]

Feature Description

I need to set dangerouslyAllowBrowser to true which you're able to do with the Anthropic SKD. However I don't think you can do this with the ai library?

https://github.com/anthropics/anthropic-sdk-typescript/issues/248#issuecomment-2307620379

import Anthropic from '@anthropic-ai/sdk';

const client = new Anthropic({
  apiKey: null,
  dangerouslyAllowBrowser: true
});

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

[lgrammel]

This is not the Anthropic SDK. You can use the Anthropic AI SDK provider in the browser.

[maybebansky]

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?',
});

[lgrammel]

@maybebansky your question was referring to unrelated comments from the anthropic ai sdk.

[maybebansky]

@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?

[lgrammel]

Thanks that clarifies it.

[altbdoor]

@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 😅

[xl0]

@altbdoor I tried this, it works. Thank you.

[lgrammel]

The header solution is recommended.