Search

* This val creates an interactive webpage that demonstrates the functionality of the Anthropic API.

* The Anthropic API key is stored in the frontend state and sent with each API request.

alert("Please enter your Anthropic API key first.");

<h1>Anthropic Caching JS Demo</h1>

<a href="https://github.com/anthropics/anthropic-cookbook/blob/7786b9f39db8ba65202792f564c59697a5222531/misc/prompt_caching.ipynb#L402">

</a>. Enter in your Anthropic API key (which is not saved) and click the buttons to see the results.

placeholder="Enter Anthropic API Key"

<title>Anthropic Caching JS Demo</title>

const { default: anthropic } = await import("npm:@anthropic-ai/sdk@0.26.1");

const client = new anthropic.Anthropic({ apiKey });

https://simonwillison.net/2024/Aug/23/anthropic-dangerous-direct-browser-access/

THIS IS NO LONGER NECESSARY

This Val will proxy anthropic HTTP requests from some frontend client, like langchain, so that you can utilize anthropic apis from the browser.

Convert it to an HTTP val in order to use it (you may want to setup an ENV var / header to protect the endpoint with a secret key)

import Anthropic from "npm:@anthropic-ai/sdk@0.24.3";

export default async function(req: Request): Promise<Response> {

throw new Error("No API key provided");

const anthropic = new Anthropic({ apiKey });

if (body?.stream) {

const textEncoder = new TextEncoder();

anthropic.messages.stream(body).on("text", (data) => {

writer.write(textEncoder.encode(data));

} else {

const response = await anthropic.messages.create(body);

return Response.json(response);

} catch (e) {

if (e instanceof Anthropic.APIError) {

return Response.json(e.error, { status: e.status });

https://simonwillison.net/2024/Aug/23/anthropic-dangerous-direct-browser-access/

THIS IS NO LONGER NECESSARY

This Val will proxy anthropic HTTP requests from some frontend client, like langchain, so that you can utilize anthropic apis from the browser.

Convert it to an HTTP val in order to use it (you may want to setup an ENV var / header to protect the endpoint with a secret key)

import Anthropic from "npm:@anthropic-ai/sdk@0.22.0";

export default async (req: Request) => {

const anthropic = new Anthropic();

let { readable, writable } = new TransformStream();

const textEncoder = new TextEncoder();

anthropic.messages.stream({

model: "claude-3-haiku-20240307",

const [modelFamily, setModelFamily] = useState("Anthropic");

const [anthropicApiKey, setAnthropicApiKey] = useState("");

const storedAnthropicKey = localStorage.getItem("anthropicApiKey");

if (storedAnthropicKey) setAnthropicApiKey(storedAnthropicKey);

if (modelFamily === "Anthropic" && anthropicApiKey) {

apiKey: anthropicApiKey,

console.error("Error counting tokens for Anthropic:", error);

if (modelFamily === "Anthropic" && !anthropicApiKey) {

alert("Please provide your Anthropic API key.");

<option value="Anthropic">Anthropic</option>

import Anthropic from "https://esm.sh/@anthropic-ai/sdk@0.27.3";

const SYSTEM_PROMPT = `

return new Response("Please provide a prompt using the 'prompt' query parameter.", { status: 400 });

const anthropic = new Anthropic({

apiKey: Deno.env.get("ANTHROPIC_API_KEY"),

try {

const completion = await anthropic.messages.create({

model: "claude-3-opus-20240229",

} catch (error) {

console.error("Error calling Anthropic API:", error);

return new Response("Error generating completion. Please try again later.", { status: 500 });

import Anthropic from "npm:@anthropic-ai/sdk";

const anthropic = new Anthropic({

// apiKey: 'my_api_key', // defaults to process.env["ANTHROPIC_API_KEY"]

messages.push({ role: "user", content: text });

let res = await anthropic.messages.create({

model: modelId,

import { createAnthropic } from "npm:@ai-sdk/anthropic@0.0.48";

const anthropic = createAnthropic({

// apiKey = Deno.env.get("ANTHROPIC_API_KEY");

apiKey: Deno.env.get("ANTHROPIC_API_KEY_COVERSHEET")

case 'anthropic':

result = await this.generateAnthropicResponse({ model, prompt, maxTokens, temperature, streaming, schema, system, messages, tools, ...additionalSettings });

async generateAnthropicResponse({ model, prompt, maxTokens, temperature, streaming, schema, system, messages, tools, ...additionalSettings }) {

model: anthropic(modelId),

model: anthropic(modelId),

model: anthropic(modelId),

Claude 3.5 Sonnet

import Anthropic from "npm:@anthropic-ai/sdk";

const anthropic = new Anthropic();

const msg = await anthropic.messages.create({

model: "claude-3-5-sonnet-20240620",

* If you want to use OpenAI models you need to set the `OPENAI_API_KEY` [env var](https://www.val.town/settings/environment-variables).

* If you want to use Anthropic models you need to set the `ANTHROPIC_API_KEY` [env var](https://www.val.town/settings/environment-variables).

* Create a [Val Town API token](https://www.val.town/settings/api), open the browser preview of this val, and use the API token as the password to log in.

const savedApiKey = localStorage.getItem("anthropic_api_key");

const savedModel = localStorage.getItem("anthropic_model");

localStorage.setItem("anthropic_api_key", apiKey);

localStorage.setItem("anthropic_model", model);

const callAnthropicAPI = async (prompt) => {

const response = await fetch("https://api.anthropic.com/v1/messages", {

"anthropic-version": "2023-06-01",

const suggestion = await callAnthropicAPI(

const finalAnswer = await callAnthropicAPI(

<h1 className="text-2xl md:text-3xl font-bold">Wikipedia Search with Anthropic API</h1>

import { sleep } from "https://esm.town/v/stevekrouse/sleep?v=1";

import { anthropic } from "npm:@ai-sdk/anthropic";

import { openai } from "npm:@ai-sdk/openai";

} else {

vercelModel = anthropic(model);

// Anthropic doesn't support system messages not at the very start.

const systemRole = model.includes("gpt") ? "system" : "user";

maxTokens: 8192,

headers: { "anthropic-beta": "max-tokens-3-5-sonnet-2024-07-15" },

let messages = [

if (request.method === "POST" && new URL(request.url).pathname === "/api/chat") {

const { Anthropic } = await import("https://esm.sh/@anthropic-ai/sdk@0.17.1");

const { messages } = await request.json();

Do not escape newline characters.`

const anthropic = new Anthropic();

try {

const response = await anthropic.messages.create({

system: messages.length === 1 ? SYSTEM_NEW : SYSTEM_DIFF,

const AI_PROVIDERS = [

"OpenAI",

"Anthropic",

"Groq",

"Google AI",

import Anthropic from "https://esm.sh/@anthropic-ai/sdk";

import React, { useCallback, useEffect, useRef, useState } from "https://esm.sh/react";

<div className="container">

<h1 className="title">Anthropic Shader Generator & Editor</h1>

<form onSubmit={handleSubmit} className="prompt-form">

if (req.method === "POST") {

const anthropic = new Anthropic();

const { prompt, currentCode } = await req.json();

const startTime = Date.now();

const completion = await anthropic.messages.create({

messages,

<head>

<title>Anthropic Shader Generator & Editor</title>

<style>${css}</style>