86 value={customPath}
87 onChange={handlePathChange}
88 placeholder="Path (e.g., /api/data)"
89 />
90 </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
32 <div>
33 <label htmlFor="valtown-token" className="label">
34 Val Town API Token
35 </label>
36 <div style={{ fontSize: "0.8em", color: "#666" }}>
37 <p>
38 <a
39 href="https://www.val.town/settings/api/new"
40 target="_blank"
41 rel="noreferrer"
60 </div>
61 <div>
62 <label htmlFor="anthropic-api-key" className="label">
63 Anthropic API Key (optional)
64 </label>
65 <input
66 type="password"
67 id="anthropic-api-key"
68 name="anthropic-key"
69 value={apiKey}
70 onChange={(e) => {
71 setApiKey(e.target.value);
72 }}
73 />
38 <ol>
39 <li>
40 Login with your Val Town API token (with projects:read,
41 projects:write, user:read permissions)
42 </li>
77 </div>
78 <h3>Cost Tracking</h3>
79 <p>See estimated API usage costs for each interaction</p>
80 </div>
81 </section>
86 <ul>
87 <li>React frontend with TypeScript</li>
88 <li>Hono API server backend</li>
89 <li>Web Audio API for sound notifications</li>
90 <li>AI SDK for Claude integration</li>
91 </ul>
92 <p>
93 The application proxies requests to the Anthropic API and Val Town
94 API, allowing Claude to view and edit your project files directly.
95 </p>
96 <div>
41);
42
43// token middleware for API requests
44app.all("/api/*", async (c, next) => {
45 const sessionCookie = getCookie(c, "_session");
46 if (!sessionCookie) {
52});
53
54app.route("/api", backend);
55
56app.get("/frontend/*", (c) => {
5## Files
6
7- `types.ts` - TypeScript interfaces for API requests and responses
8
9## Purpose
18## Implementation Details
19
20The frontend is built with React and uses the Twind library for styling (Tailwind CSS in JS). It communicates with the backend API to authenticate users and fetch their liked posts from Bluesky.
21
22The application processes post text to make mentions and links clickable, and displays images when available.
1import { useState, useEffect } from "react";
2
3const USER_ENDPOINT = "/api/user";
4
5export function useUser() {
20 SUM(num_images) as total_images
21 FROM ${USAGE_TABLE}
22 WHERE our_api_token = 1
23 GROUP BY user_id, username
24 ORDER BY total_price DESC
1import { useState, useEffect } from "react";
2
3const PROJECT_ENDPOINT = "/api/project";
4const FILES_ENDPOINT = "/api/project-files";
5
6export function useProject(projectId: string, branchId?: string) {
1import { useState, useEffect } from "react";
2
3const ENDPOINT = "/api/projects-loader";
4
5export function useProjects() {
