19 }
20
21 const { messages, project, branchId, anthropicApiKey, selectedFiles, images } = await c.req.json();
22 console.log("Original messages:", JSON.stringify(messages, null, 2));
23 console.log("Images received:", JSON.stringify(images, null, 2));
24
25 // Check if API key is available
26 if (!anthropicApiKey) {
27 return Response.json({
28 error: "Anthropic API key is required. Please log out and add your Anthropic API key to use this app.",
29 }, { status: 400 });
30 }
31
32 let apiKey;
33 if (!anthropicApiKey) {
34 return Response.json({
35 error: "Anthropic API key is required. Please log out and add your Anthropic API key to use this app.",
36 }, { status: 400 });
37 } else if (anthropicApiKey === Deno.env.get("PASSWORD")) {
38 apiKey = Deno.env.get("PROVIDED_ANTHROPIC_API_KEY");
39 } else {
40 apiKey = anthropicApiKey;
41 }
42
43 const anthropic = createAnthropic({
44 apiKey,
45 });
46
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,
125 onChange={handlePathChange}
126 className="px-2 py-1 text-sm w-32 md:w-40"
127 placeholder="Path (e.g., /api/data)"
128 />
129 <button
4export function Login() {
5 const [bearerToken, setBearerToken] = useLocalStorage("bearer", "");
6 const [anthropicApiKey, setAnthropicApiKey] = useLocalStorage("anthropic_api_key", "");
7
8 return (
11 <div className="text-center mb-8">
12 <h2 className="text-xl sm:text-2xl font-bold text-gray-800 mb-2 tracking-tight">Login to OpenTownie</h2>
13 <p className="text-sm sm:text-base text-gray-600 mb-4">Enter your API keys to get started</p>
14 </div>
15
20 <a
21 target="_blank"
22 href="https://www.val.town/settings/api"
23 className="text-indigo-600 hover:text-indigo-800 font-medium flex items-center transition-colors duration-200"
24 >
25 Val Town API Token
26 <svg
27 xmlns="http://www.w3.org/2000/svg"
78 <label className="block text-sm font-medium text-gray-700">
79 <div className="flex items-center mb-1">
80 <span>Anthropic API Key</span>
81 <a
82 href="https://console.anthropic.com/settings/keys"
91 <input
92 type="password"
93 value={anthropicApiKey}
94 onChange={(e: any) => setAnthropicApiKey(e.target.value)}
95 placeholder="sk-ant-xxxxx"
96 autoComplete="off"
124
125 <div className="text-center text-xs text-gray-500 mt-6 bg-gray-50 p-3 rounded-lg">
126 Your API keys are stored locally in your browser and never stored on our servers.
127 </div>
128 </div>
10app.get("*", async (c, next) => {
11 const path = c.req.path;
12 if (path.startsWith("/api/") || c.req.header("Accept")?.includes("application/json")) {
13 return next();
14 }
20});
21
22app.route("/api", backend);
23app.get("/frontend/*", c => {
24 return serveFile(c.req.path, import.meta.url);
41 </h2>
42 <ol className="list-decimal pl-5 space-y-2 text-gray-700">
43 <li>Login with your Val Town API token</li>
44 <li>Add your Anthropic API key</li>
45 <li>Select a project to work on</li>
46 <li>Chat with Claude about your code</li>
90 </div>
91 <h3 className="font-medium text-gray-800 mb-1">Cost Tracking</h3>
92 <p className="text-sm text-gray-600">See estimated API usage costs for each interaction</p>
93 </div>
94 </div>
124 <ul className="list-disc pl-5 space-y-1 text-gray-700 mb-4">
125 <li>React frontend with TypeScript</li>
126 <li>Hono API server backend</li>
127 <li>Tailwind CSS for styling</li>
128 <li>Web Audio API for sound notifications</li>
129 <li>AI SDK for Claude integration</li>
130 </ul>
131 <p className="text-gray-700">
132 The application proxies requests to the Anthropic API and Val Town API, allowing Claude to view and edit your project files directly.
133 </p>
134 </div>
236 ];
237
238 // Capitalize first letter
239 if (num >= 0 && num <= 10) {
240 const word = words[num];
32
33 try {
34 const response = await fetch("/api/create-project", {
35 method: "POST",
36 headers: {
43
44 try {
45 const response = await fetch("/api/create-branch", {
46 method: "POST",
47 headers: {
