24 user_id = ?
25 AND timestamp > ?
26 AND our_api_token = 1
27 `,
28 [userId, new Date().getTime() - 24 * 60 * 60 * 1000],
55 finish_reason,
56 num_images,
57 our_api_token,
58}: {
59 bearerToken: string;
67 finish_reason: string;
68 num_images: number;
69 our_api_token: boolean;
70}) {
71 const price = calculateCost({
91 finish_reason,
92 num_images,
93 our_api_token
94 ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
95 `,
108 finish_reason,
109 num_images,
110 our_api_token ? 1 : 0,
111 ],
112 );
90 value={customPath}
91 onChange={handlePathChange}
92 placeholder="Path (e.g., /api/data)"
93 />
94 </div>
8 const { isAuthenticated, authenticate, error } = useAuth();
9 const [tokenValue, setTokenValue] = useState("");
10 const [apiKey, setApiKey] = useState("");
11 // const [invalid, setInvalid] = useState(""); // TODO
12
13 const handleSubmit = (e) => {
14 e.preventDefault();
15 authenticate(tokenValue, apiKey);
16 };
17
36 >
37 <div>
38 <label htmlFor="valtown-token" className="label">Val Town API Token</label>
39 <div style={{ fontSize: "0.8em", color: "#666" }}>
40 <p>
41 <a href="https://www.val.town/settings/api/new" target="_blank" rel="noreferrer">
42 Create a Val Town token here
43 </a>
58 </div>
59 <div>
60 <label htmlFor="anthropic-api-key" className="label">Anthropic API Key (optional)</label>
61 <input
62 type="password"
63 id="anthropic-api-key"
64 name="anthropic-key"
65 value={apiKey}
66 onChange={e => {
67 setApiKey(e.target.value);
68 }}
69 />
11app.get("*", async (c, next) => {
12 const path = c.req.path;
13 if (path.startsWith("/api/") || c.req.header("Accept")?.includes("application/json")) {
14 return next();
15 }
21});
22
23app.route("/api", backend);
24app.get("/frontend/*", c => {
25 return serveFile(c.req.path, import.meta.url);
42 </h2>
43 <ol>
44 <li>Login with your Val Town API token (with projects:read, projects:write, user:read permissions)</li>
45 <li>Select a project to work on</li>
46 <li>Chat with Claude about your code</li>
79 </div>
80 <h3>Cost Tracking</h3>
81 <p>See estimated API usage costs for each interaction</p>
82 </div>
83 </section>
92 <ul>
93 <li>React frontend with TypeScript</li>
94 <li>Hono API server backend</li>
95 <li>Web Audio API for sound notifications</li>
96 <li>AI SDK for Claude integration</li>
97 </ul>
98 <p>
99 The application proxies requests to the Anthropic API and Val Town API, allowing Claude to view and edit your
100 project files directly.
101 </p>
63 refetch: () => void;
64}) {
65 const { token, anthropicApiKey } = useAuth();
66 const [images, setImages] = useState<(string|null)[]>([]);
67 const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
81 project,
82 branchId,
83 anthropicApiKey,
84 bearerToken: token,
85 selectedFiles,
1export async function handler(request: Request): Promise<Response> {
2 const url = "https://parts-wave-cb0.craft.me/api/share/qD37ZXGSlFesrW";
3
4 try {
1This is an example of using the API to create a file at the root.
5 <head>
6 <title>Rock Paper Scissors</title>
7 <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
8 <style>
9 body {
9- **File Browser**: Select specific files to include in the context window for more focused AI assistance
10- **Branch Management**: View, select, and create branches without leaving the app
11- **Cost Tracking**: See estimated API usage costs for each interaction
12- **Sound Notifications**: Get alerted when Claude finishes responding
13- **Mobile-Friendly**: Works on both desktop and mobile devices
15## How It Works
16
171. **Login**: Authenticate with your Val Town API token and Anthropic API key
182. **Select a Project**: Choose which Val Town project you want to work on
193. **Select Files**: Browse your project files and select which ones to include in the context window
25### Prerequisites
26
27- A Val Town account with API access
28- An Anthropic API key (Claude 3.7 Sonnet)
29
30### Setup
31
321. Visit the OpenTownie app
332. Enter your Val Town API token (with `projects:write` and `users:read` permissions)
343. Enter your Anthropic API key
354. Click "Login" to access your projects
36
48- React frontend with TypeScript
49- React Router
50- Hono API server backend
51- Web Audio API for sound notifications
52- AI SDK for Claude integration
53
54The application proxies requests to the Anthropic API and Val Town API, allowing Claude to view and edit your project files directly.
55
56## Privacy & Security
57
58- Your Val Town API token and Anthropic API key are stored locally in your browser
59- No data is stored on our servers
60- All communication with the APIs is done directly from your browser
61
