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>
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 />
339
340// ============================================================
341// TELEGRAM API INTERACTION
342// ============================================================
343
354 const botToken = process.env.TELEGRAM_BOT_TOKEN;
355
356 const response = await fetch(`https://api.telegram.org/bot${botToken}/setWebhook`, {
357 method: "POST",
358 headers: { "Content-Type": "application/json" },
1/**
2 * Sends a message to a Telegram chat via the Telegram Bot API
3 * Requires a Telegram Bot token as an environment variable
4 */
10 }
11
12 const telegramApiUrl = `https://api.telegram.org/bot${botToken}/sendMessage`;
13
14 const response = await fetch(telegramApiUrl, {
15 method: 'POST',
16 headers: {
25 if (!response.ok) {
26 const errorBody = await response.text();
27 throw new Error(`Telegram API error: ${response.status} ${errorBody}`);
28 }
29
20 }
21
22 const { messages, project, branchId, anthropicApiKey, selectedFiles, images } = await c.req.json();
23 // console.log("Original messages:", JSON.stringify(messages, null, 2));
24 // console.log("Images received:", JSON.stringify(images, null, 2));
25
26 const apiKey = anthropicApiKey || Deno.env.get("ANTHROPIC_API_KEY");
27 const our_api_token = apiKey === Deno.env.get("ANTHROPIC_API_KEY");
28
29 if (our_api_token) {
30 if (await overLimit(bearerToken)) {
31 return Response.json("You have reached the limit of Townie in a 24 hour period.", { status: 403 });
34
35 const anthropic = createAnthropic({
36 apiKey,
37 });
38
159 onFinish: async (result: any) => {
160 await trackUsage({
161 our_api_token,
162 bearerToken, // will look up the userId from this
163 branch_id: branchId,
76 SUM(num_images) as total_images
77 FROM ${USAGE_TABLE}
78 WHERE our_api_token = 1
79 GROUP BY user_id, username
80 ORDER BY total_price DESC
256 <th>Finish</th>
257 <th>Images</th>
258 <th>Our API</th>
259 </tr>
260 </thead>
276 <td>${row.finish_reason}</td>
277 <td>${formatNumber(row.num_images)}</td>
278 <td>${formatBoolean(row.our_api_token)}</td>
279 </tr>
280 `).join("")
17 finish_reason: string;
18 num_images: number;
19 our_api_token: boolean;
20}
21
37 finish_reason TEXT,
38 num_images INTEGER,
39 our_api_token INTEGER NOT NULL
40 )
41 `);
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 );
6 const botToken = process.env.TELEGRAM_BOT_TOKEN;
7
8 const response = await fetch(`https://api.telegram.org/bot${botToken}/getWebhookInfo`);
9 const result = await response.json();
10 return result;
14
15// Public route without authentication
16app.get("/api/public/:id", async (c) => {
17 const key = `__public/${c.req.param("id")}`;
18 const { blob } = await import("https://esm.town/v/std/blob");
132};
133
134app.get("/api/blobs", checkAuth, async (c) => {
135 const prefix = c.req.query("prefix") || "";
136 const limit = parseInt(c.req.query("limit") || "20", 10);
141});
142
143app.get("/api/blob", checkAuth, async (c) => {
144 const key = c.req.query("key");
145 if (!key) return c.text("Missing key parameter", 400);
149});
150
151app.put("/api/blob", checkAuth, async (c) => {
152 const key = c.req.query("key");
153 if (!key) return c.text("Missing key parameter", 400);
158});
159
160app.delete("/api/blob", checkAuth, async (c) => {
161 const key = c.req.query("key");
162 if (!key) return c.text("Missing key parameter", 400);
166});
167
168app.post("/api/blob", checkAuth, async (c) => {
169 const { file, key } = await c.req.parseBody();
170 if (!file || !key) return c.text("Missing file or key", 400);
