Public
HTTP (deprecated)
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/**
* 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 (
<div>
<h1>Anthropic Caching JS Demo</h1>
<p>
This val is attempting to clone{" "}
<a href="https://github.com/anthropics/anthropic-cookbook/blob/7786b9f39db8ba65202792f564c59697a5222531/misc/prompt_caching.ipynb#L402">
this python notebook
</a>. Enter in your Anthropic API key (which is not saved) and click the buttons to see the results.
</p>
<p>
<a href={import.meta.url.replace("esm.town", "val.town")}>View Source on Val Town</a>
</p>
<div>
<input
type="password"
placeholder="Enter Anthropic API Key"
value={apiKey}
onChange={(e) => setApiKey(e.target.value)}
/>
</div>
<div>
<button onClick={() => runOperation("nonCachedCall")} disabled={loading.nonCachedCall}>
Non-cached API Call
</button>
<button onClick={() => runOperation("cachedCall")} disabled={loading.cachedCall}>Cached API Call</button>
<button onClick={() => runOperation("multiTurn")} disabled={loading.multiTurn}>Multi-turn Conversation</button>
</div>
<h2>Non-cached API Call Output:</h2>
<pre>{loading.nonCachedCall ? "Loading..." : outputs.nonCachedCall}</pre>
<h2>Cached API Call Output:</h2>
<pre>{loading.cachedCall ? "Loading..." : outputs.cachedCall}</pre>
<h2>Multi-turn Conversation Output:</h2>
<pre>{loading.multiTurn ? "Loading..." : outputs.multiTurn}</pre>
</div>
);
}
function client() {
createRoot(document.getElementById("root")).render(<App />);
}
if (typeof document !== "undefined") {
client();
}
async function server(request: Request): Promise<Response> {
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 });