Anthropic Caching JS Demo

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

\n View Source on Val Town\n

\n setApiKey(e.target.value)}\n />\n

\n \n \n \n

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}

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

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