4
5/**
6 * Plays a bell sound notification using the Web Audio API
7 * @returns A Promise that resolves when the sound has started playing
8 */
13 const AudioContext = window.AudioContext || (window as any).webkitAudioContext;
14 if (!AudioContext) {
15 console.warn("Web Audio API not supported in this browser");
16 resolve();
17 return;
65
66/**
67 * Plays a simple notification sound using the Web Audio API
68 * This is a simpler, shorter bell sound
69 * @returns A Promise that resolves when the sound has started playing
75 const AudioContext = window.AudioContext || (window as any).webkitAudioContext;
76 if (!AudioContext) {
77 console.warn("Web Audio API not supported in this browser");
78 resolve();
79 return;
26 }
27
28 const { messages, project, branchId, anthropicApiKey, selectedFiles, images } = await c.req.json();
29
30 // do we want to allow user-provided tokens still
31 const apiKey = anthropicApiKey || Deno.env.get("ANTHROPIC_API_KEY");
32 const our_api_token = apiKey === Deno.env.get("ANTHROPIC_API_KEY");
33
34 if (our_api_token) {
35 if (await overLimit(bearerToken)) {
36 return Response.json(
44
45 const rowid = await startTrackingUsage({
46 our_api_token,
47 bearerToken, // will look up the userId from this
48 branch_id: branchId,
53
54 const anthropic = createAnthropic({
55 apiKey,
56 });
57
19 finish_reason?: string;
20 num_images?: number;
21 our_api_token: boolean;
22}
23
44 finish_reason TEXT,
45 num_images INTEGER,
46 our_api_token INTEGER NOT NULL,
47 finish_timestamp INTEGER
48 )
17 finish_reason: string | null;
18 num_images: number | null;
19 our_api_token: number;
20}
21
57
58 // Fetch the inference calls data
59 fetch('/api/inference-calls?usage_id=' + usageId)
60 .then(response => response.json())
61 .then(data => {
192 <th>Finish</th>
193 <th>Images</th>
194 <th>Our API</th>
195 </tr>
196 </thead>
216 <td>${row.finish_reason || '-'}</td>
217 <td>${formatNumber(row.num_images)}</td>
218 <td>${formatBoolean(row.our_api_token)}</td>
219 </tr>
220 `).join("")}
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
14- **Usage Dashboard**: Monitor API usage and inference calls with detailed analytics
15
16## How It Works
17
181. **Login**: Authenticate with your Val Town API token and Anthropic API key
192. **Select a Project**: Choose which Val Town project you want to work on
203. **Select Files**: Browse your project files and select which ones to include in the context window
26### Prerequisites
27
28- A Val Town account with API access
29- An Anthropic API key (Claude 3.7 Sonnet)
30
31### Setup
32
331. Visit the OpenTownie app
342. Enter your Val Town API token (with `projects:write` and `users:read` permissions)
353. Enter your Anthropic API key
364. Click "Login" to access your projects
37
49- React frontend with TypeScript
50- React Router
51- Hono API server backend
52- Web Audio API for sound notifications
53- AI SDK for Claude integration
54
55The application proxies requests to the Anthropic API and Val Town API, allowing Claude to view and edit your project files directly.
56
57## Privacy & Security
58
59- Your Val Town API token and Anthropic API key are stored locally in your browser
60- No data is stored on our servers
61- All communication with the APIs is done directly from your browser
62
1# Usage Dashboard
2
3A dashboard for monitoring API usage and inference calls.
4
5## Features
20 index.ts # Main entry point and routing
21 auth.ts # Authentication logic
22 /api/
23 index.ts # API request handler
24 requests.ts # API endpoints for requests data
25 inference-calls.ts # API endpoints for inference calls
26 user-summary.ts # API endpoints for user summary data
27 /views/
28 layout.ts # Common layout template
54 - Links back to the associated request
55
56### API Endpoints
57
58- `/api/requests` - Get paginated requests
59- `/api/requests?usage_id=123` - Get a specific request
60- `/api/inference-calls` - Get paginated inference calls
61- `/api/inference-calls?usage_id=123` - Get inference calls for a specific request
62- `/api/user-summary` - Get user summary data
63
64## Debugging
24 user_id = ?
25 AND timestamp > ?
26 AND our_api_token = 1
27 `,
28 [userId, new Date().getTime() - 24 * 60 * 60 * 1000],
108 branch_id,
109 model,
110 our_api_token,
111 num_images,
112}: {
115 branch_id: string;
116 model: string;
117 our_api_token: boolean;
118 num_images: number;
119}) {
127 branch_id,
128 model,
129 our_api_token,
130 num_images
131 ) VALUES (?, ?, ?, ?, ?, ?, ?, ?)
138 branch_id,
139 model,
140 our_api_token ? 1 : 0,
141 num_images,
142 ],
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 />
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) => {
