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;
18 }
19
20 const { messages, project, branchId, anthropicApiKey, selectedFiles, images } = await c.req.json();
21 console.log("Original messages:", JSON.stringify(messages, null, 2));
22 console.log("Images received:", JSON.stringify(images, null, 2));
23
24 // Check if API key is available
25 if (!anthropicApiKey) {
26 return Response.json({
27 error: "Anthropic API key is required. Please log out and add your Anthropic API key to use this app.",
28 }, { status: 400 });
29 }
30
31 let apiKey;
32 if (!anthropicApiKey) {
33 return Response.json({
34 error: "Anthropic API key is required. Please log out and add your Anthropic API key to use this app.",
35 }, { status: 400 });
36 } else if (anthropicApiKey === Deno.env.get("PASSWORD")) {
37 apiKey = Deno.env.get("PROVIDED_ANTHROPIC_API_KEY");
38 } else {
39 apiKey = anthropicApiKey;
40 }
41
42 const anthropic = createAnthropic({
43 apiKey,
44 });
45
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
47OpenTownie is built with:
48- React frontend with TypeScript
49- Hono API server backend
50- Tailwind CSS for styling
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
10
11async function loader({ bearerToken }: { bearerToken: string }) {
12 const data = await (await fetch("/api/projects-loader", {
13 headers: {
14 "Authorization": "Bearer " + bearerToken,
4export function Login() {
5 const [bearerToken, setBearerToken] = useLocalStorage("bearer", "");
6 const [anthropicApiKey, setAnthropicApiKey] = useLocalStorage("anthropic_api_key", "");
7
8 return (
11 <div className="space-y-2">
12 <label className="block text-sm font-medium text-gray-700">
13 <a target="_blank" href="https://www.val.town/settings/api" className="underline hover:text-slate-400">
14 Val Town API Token
15 </a>
16 {""}(with <code>projects:write</code> and <code>users:read</code> permission)
26 </div>
27 <div className="space-y-2">
28 <label className="block text-sm font-medium text-gray-700">Anthropic API Key</label>
29 <input
30 type="password"
31 value={anthropicApiKey}
32 onChange={(e: any) => setAnthropicApiKey(e.target.value)}
33 placeholder="sk-ant-xxxxx"
34 autoComplete="off"
5const app = new Hono();
6
7app.route("/api", backend);
8app.get("/frontend/*", c => {
9 return serveFile(c.req.path, import.meta.url);
236 ];
237
238 // Capitalize first letter
239 if (num >= 0 && num <= 10) {
240 const word = words[num];
43
44 try {
45 const response = await fetch("/api/create-branch", {
46 method: "POST",
47 headers: {
8import { ChatMessages } from "./ChatMessages.tsx";
9import { ChatInput } from "./ChatInput.tsx";
10import { ApiKeyWarning } from "./ApiKeyWarning.tsx";
11import { processFiles } from "./ImageUpload.tsx";
12
14 project,
15 bearerToken,
16 anthropicApiKey,
17 setProject,
18}: {
19 project: any;
20 bearerToken: string;
21 anthropicApiKey: string;
22 setProject: (project: any) => void;
23}) {
56 project,
57 branchId,
58 anthropicApiKey,
59 bearerToken,
60 selectedFiles,
169
170 <div className="p-6 flex flex-col h-full w-full">
171 <ApiKeyWarning show={!anthropicApiKey} />
172
173 <ChatMessages
37 setIsLoadingBranches(true);
38 try {
39 const response = await fetch(`/api/project-branches?projectId=${projectId}`, {
40 headers: {
41 "Authorization": `Bearer ${bearerToken}`,
107 const fetchBranches = async () => {
108 try {
109 const response = await fetch(`/api/project-branches?projectId=${projectId}`, {
110 headers: {
111 "Authorization": `Bearer ${bearerToken}`,
