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("You have reached the limit of Townie in a 24 hour period.", { status: 403 });
41
42 const rowid = await startTrackingUsage({
43 our_api_token,
44 bearerToken, // will look up the userId from this
45 branch_id: branchId,
50
51 const anthropic = createAnthropic({
52 apiKey,
53 });
54
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 ],
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 />
39);
40
41// token middleware for API requests
42app.all("/api/*", async (c, next) => {
43 const sessionCookie = getCookie(c, "_session");
44 if (!sessionCookie) {
50});
51
52app.route("/api", backend);
53
54app.get("/frontend/*", c => {
