How to use the Claude API when hosting/running via claude-artifact-runner?

[jlengrand]

Hey there,

Super neat, very happy with it thank you!
Just a question I'm struggling to figure out at the moment. If the artifact you're creating makes use of the Claude API, Claude artifacts can handle that themselves and allow users to use their own account.

This does not seem to work when running using claude-artifact-runner. Here is the error I get :

Access to fetch at 'https://api.anthropic.com/v1/messages' from origin 'http://localhost:8000' 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.

That seems logical from a security perspective, I'm just wondering how to go around this and still have self-hosted artifacts work as expected.

Thanks!

[claudio-silva]

Hi @jlengrand
Glad to know you're enjoying it!

Your artifact seems to be using the https://api.anthropic.com/v1/messages endpoint (as per your error message), so it seems your artifact isn't using the special internal API mechanism called window.claude.complete() rather than standard API keys.
Good, we're already half way there!

Note that your artifact must request an API key from you, as it is not possible to use the special keyless API outside of claude.ai.

Now you must ask Claude to include an anthropic-dangerous-direct-browser-access: true header on API requests.
If it argues with you that it can't be done, or if it generates code that fails on localhost, say this:
"Anthropic have enabled CORS support for their JSON APIs, which means it’s now possible to call the Claude LLMs directly from a user’s browser."
If it still fails, provide it with this code example, for a simple AI Text Summarizer artifact, which works perfectly with claude-artifact-runner:

import React, { useState } from 'react';
import { Key, FileText, Loader2, AlertCircle } from 'lucide-react';

export default function TextSummarizer() {
  const [apiKey, setApiKey] = useState('');
  const [inputText, setInputText] = useState('');
  const [summary, setSummary] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');
  const [showApiKeyInput, setShowApiKeyInput] = useState(true);

  const saveApiKey = () => {
    if (apiKey.trim()) {
      setShowApiKeyInput(false);
      setError('');
    } else {
      setError('Please enter a valid API key');
    }
  };

  const summarizeText = async () => {
    if (!inputText.trim()) {
      setError('Please enter some text to summarize');
      return;
    }

    setIsLoading(true);
    setError('');
    setSummary('');

    try {
      const response = await fetch('https://api.anthropic.com/v1/messages', {
        method: 'POST',
        headers: {
          'x-api-key': apiKey,
          'anthropic-version': '2023-06-01',
          'content-type': 'application/json',
          'anthropic-dangerous-direct-browser-access': 'true'
        },
        body: JSON.stringify({
          model: 'claude-sonnet-4-20250514',
          max_tokens: 300,
          messages: [
            {
              role: 'user',
              content: [
                {
                  type: 'text',
                  text: `Please summarize the following text into a single, concise paragraph that captures the main points and key information:

${inputText}`
                }
              ]
            }
          ]
        })
      });

      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.error?.message || `API request failed with status ${response.status}`);
      }

      const data = await response.json();
      setSummary(data.content[0].text);
    } catch (err) {
      setError(`Error: ${err.message}`);
    } finally {
      setIsLoading(false);
    }
  };

  const resetApiKey = () => {
    setApiKey('');
    setShowApiKeyInput(true);
    setSummary('');
    setError('');
  };

  if (showApiKeyInput) {
    return (
      <div className="max-w-2xl mx-auto p-6 bg-white rounded-lg shadow-lg">
        <div className="flex items-center gap-3 mb-6">
          <Key className="w-8 h-8 text-blue-600" />
          <h1 className="text-2xl font-bold text-gray-800">AI Text Summarizer</h1>
        </div>

        <div className="mb-6">
          <label htmlFor="apiKey" className="block text-sm font-medium text-gray-700 mb-2">
            Enter your Anthropic API Key
          </label>
          <input
            id="apiKey"
            type="password"
            value={apiKey}
            onChange={(e) => setApiKey(e.target.value)}
            placeholder="sk-ant-..."
            className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            onKeyPress={(e) => e.key === 'Enter' && saveApiKey()}
          />
          <p className="text-xs text-gray-500 mt-2">
            Your API key is stored in memory for this session only and is not saved permanently.
          </p>
        </div>

        {error && (
          <div className="mb-4 p-3 bg-red-100 border border-red-300 rounded-lg flex items-center gap-2 text-red-700">
            <AlertCircle className="w-5 h-5" />
            <span className="text-sm">{error}</span>
          </div>
        )}

        <button
          onClick={saveApiKey}
          className="w-full bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 transition-colors font-medium"
        >
          Continue
        </button>
      </div>
    );
  }

  return (
    <div className="max-w-4xl mx-auto p-6 bg-white rounded-lg shadow-lg">
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center gap-3">
          <FileText className="w-8 h-8 text-blue-600" />
          <h1 className="text-2xl font-bold text-gray-800">AI Text Summarizer</h1>
        </div>
        <button
          onClick={resetApiKey}
          className="text-sm text-gray-600 hover:text-gray-800 underline"
        >
          Change API Key
        </button>
      </div>

      <div className="grid md:grid-cols-2 gap-6">
        <div>
          <label htmlFor="inputText" className="block text-sm font-medium text-gray-700 mb-2">
            Text to Summarize
          </label>
          <textarea
            id="inputText"
            value={inputText}
            onChange={(e) => setInputText(e.target.value)}
            placeholder="Paste your text here..."
            rows={12}
            className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
          />
          
          <button
            onClick={summarizeText}
            disabled={isLoading}
            className="w-full mt-4 bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 disabled:bg-gray-400 transition-colors font-medium flex items-center justify-center gap-2"
          >
            {isLoading ? (
              <>
                <Loader2 className="w-5 h-5 animate-spin" />
                Summarizing...
              </>
            ) : (
              'Summarize Text'
            )}
          </button>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Summary
          </label>
          <div className="h-64 p-3 border border-gray-300 rounded-lg bg-gray-50 overflow-y-auto">
            {summary ? (
              <p className="text-gray-800 leading-relaxed">{summary}</p>
            ) : (
              <p className="text-gray-500 italic">Summary will appear here...</p>
            )}
          </div>

          {error && (
            <div className="mt-4 p-3 bg-red-100 border border-red-300 rounded-lg flex items-center gap-2 text-red-700">
              <AlertCircle className="w-5 h-5" />
              <span className="text-sm">{error}</span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

I hope this helps.
Let me know how it went.

[jlengrand]

Hey, thanks for the complete answer! Just a question to make sure : This does mean that users will have to include an API Key themselves to use the tool right? Meaning I potentially can have access to their API Key. Isn't that a massive security issue?

[claudio-silva]

No, as artifacts have no backend, an API key that is requested to the user will have to be saved locally, either in memory during the current artifact execution, or on the browser's local storage. The key will never be sent to a server or shared with other users.
The special internal API mechanism called window.claude.complete() does allow artifacts to call Claude itself when running at claude.ai, without asking the user for any key, but that API cannot be used outside of claude.ai