/** * This val creates an interactive webpage that demonstrates the functionality of the Anthropic API. * It uses a React frontend with an input for the API key and buttons to trigger different operations. * The Anthropic API key is stored in the frontend state and sent with each API request. */ /** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [apiKey, setApiKey] = useState(""); const [outputs, setOutputs] = useState({ nonCachedCall: "", cachedCall: "", multiTurn: "", }); const [loading, setLoading] = useState({ nonCachedCall: false, cachedCall: false, multiTurn: false, }); const runOperation = async (operation: string) => { if (!apiKey) { alert("Please enter your Anthropic API key first."); return; } setLoading(prev => ({ ...prev, [operation]: true })); try { const response = await fetch(`/run?operation=${operation}`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ apiKey }), }); const result = await response.text(); setOutputs(prev => ({ ...prev, [operation]: result })); } catch (error) { setOutputs(prev => ({ ...prev, [operation]: `Error: ${error.message}` })); } setLoading(prev => ({ ...prev, [operation]: false })); }; return (

Anthropic Caching JS Demo

This val is attempting to clone{" "} this python notebook . Enter in your Anthropic API key (which is not saved) and click the buttons to see the results.

View Source on Val Town

setApiKey(e.target.value)} />

Non-cached API Call Output:

{loading.nonCachedCall ? "Loading..." : outputs.nonCachedCall}

Cached API Call Output:

{loading.cachedCall ? "Loading..." : outputs.cachedCall}

Multi-turn Conversation Output:

{loading.multiTurn ? "Loading..." : outputs.multiTurn}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { const url = new URL(request.url); if (url.pathname === "/run") { const operation = url.searchParams.get("operation"); const { apiKey } = await request.json(); if (!apiKey) { return new Response("API key is required", { status: 400 }); } let result = ""; if (operation === "nonCachedCall") { result = await runNonCachedCall(apiKey); } else if (operation === "cachedCall") { result = "Making two calls, first one to cache...\n\n"; result += await runCachedCall(apiKey); result += "\n\nNow the cached call...\n\n"; result += await runCachedCall(apiKey); } else if (operation === "multiTurn") { result = await runMultiTurnConversation(apiKey); } else { return new Response("Invalid operation", { status: 400 }); } return new Response(result); } return new Response( ` Anthropic Caching JS Demo

`, { headers: { "content-type": "text/html" }, }, ); } async function fetchContent(): Promise { const response = await fetch("https://www.gutenberg.org/cache/epub/1342/pg1342.txt"); const text = await response.text(); const bookContent = text.slice(0, 200_000); return bookContent; } async function runNonCachedCall(apiKey: string): Promise { const { default: anthropic } = await import("npm:@anthropic-ai/sdk@0.26.1"); const client = new anthropic.Anthropic({ apiKey }); const MODEL_NAME = "claude-3-5-sonnet-20240620"; const bookContent = await fetchContent(); const startTime = Date.now(); const response = await client.messages.create({ model: MODEL_NAME, max_tokens: 300, messages: [{ role: "user", content: [ { type: "text", text: "" + bookContent + "", }, { type: "text", text: "What is the title of this book? Only output the title.", }, ], }], }); const endTime = Date.now(); const elapsedTime = (endTime - startTime) / 1000; return `Non-cached API call time: ${elapsedTime.toFixed(2)} seconds Input tokens: ${response.usage.input_tokens} Output tokens: ${response.usage.output_tokens} Response: ${response.content[0].text}`; } async function runCachedCall(apiKey: string): Promise { const { default: anthropic } = await import("npm:@anthropic-ai/sdk@0.26.1"); const client = new anthropic.Anthropic({ apiKey }); const MODEL_NAME = "claude-3-5-sonnet-20240620"; const bookContent = await fetchContent(); const startTime = Date.now(); const response = await client.beta.promptCaching.messages.create({ model: MODEL_NAME, max_tokens: 300, messages: [{ role: "user", content: [ { type: "text", text: "" + bookContent + "", cache_control: { type: "ephemeral" }, }, { type: "text", text: "What is the title of this book? Only output the title.", }, ], }], }); const endTime = Date.now(); const elapsedTime = (endTime - startTime) / 1000; return `Cached API call time: ${elapsedTime.toFixed(2)} seconds Input tokens: ${response.usage.input_tokens} Output tokens: ${response.usage.output_tokens} Cache Read tokens: ${response.usage.cache_read_input_tokens} Cache Write tokens: ${response.usage.cache_creation_input_tokens} Response: ${response.content[0].text}`; } async function runMultiTurnConversation(apiKey: string): Promise { const { default: anthropic } = await import("npm:@anthropic-ai/sdk@0.26.1"); const client = new anthropic.Anthropic({ apiKey }); const MODEL_NAME = "claude-3-5-sonnet-20240620"; const bookContent = await fetchContent(); const questions = [ "What is the title of this novel?", "Who are Mr. and Mrs. Bennet?", "What is Netherfield Park?", ]; let conversation = []; let output = ""; for (let i = 0; i < questions.length; i++) { const question = questions[i]; output += `\nTurn ${i + 1}:\nUser: ${question}\n`; conversation.push({ role: "user", content: [{ type: "text", text: question, cache_control: { type: "ephemeral" } }], }); const startTime = Date.now(); const response = await client.beta.promptCaching.messages.create({ model: MODEL_NAME, max_tokens: 300, system: [{ type: "text", text: ` ${bookContent} `, cache_control: { type: "ephemeral" }, }], messages: conversation, }); const endTime = Date.now(); const elapsedTime = (endTime - startTime) / 1000; const assistantReply = response.content[0].text; output += `Assistant: ${assistantReply}\n`; output += `Input tokens: ${response.usage.input_tokens}\n`; output += `Output tokens: ${response.usage.output_tokens}\n`; output += `Input tokens (cache read): ${response.usage.cache_read_input_tokens}\n`; output += `Input tokens (cache write): ${response.usage.cache_creation_input_tokens}\n`; output += `Time taken: ${elapsedTime.toFixed(2)} seconds\n`; conversation.push({ role: "assistant", content: [{ type: "text", text: assistantReply }], }); } return output; } const css = ` body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 20px; background-color: #f4f4f4; } h1, h2 { color: #333; } button { background-color: #4CAF50; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } button:disabled { background-color: #cccccc; cursor: not-allowed; } pre { background-color: #e4e4e4; padding: 10px; border-radius: 5px; white-space: pre-wrap; word-wrap: break-word; } input[type="password"] { width: 300px; padding: 10px; margin-bottom: 10px; } `; export default server;

jake