98- For AI-generated images, use: `https://maxm-imggenurl.web.val.run/the-description-of-your-image`
99- **Storage:** DO NOT use the Deno KV module for storage
100- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods
101- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified
102- **View Source:** Add a view source link with `import.meta.url.replace("esm.town", "val.town")` and include `target="_top"` attribute
103- **Error Debugging:** Add `<script src="https://esm.town/v/std/catch"></script>` to HTML to capture client-side errors
104- **Error Handling:** Only use try...catch when there's a clear local resolution; avoid catches that merely log or return 500s - let errors bubble up with full context
105- **Environment Variables:** Use `Deno.env.get('keyname')` and minimize their use - prefer APIs without keys
106- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser
107- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
188
189### Backend (Hono) Best Practices
190- Hono is the recommended API framework (similar to Express, Flask, or Sinatra)
191- Main entry point should be `backend/index.ts`
192- **Static asset serving:** Use the utility functions to read and serve project files:
209 });
210 ```
211- Create RESTful API routes for CRUD operations
212- Be careful with error handling as Hono tends to swallow errors
213- Consider re-throwing errors to see full stack traces:
226- Use React 18.2.0 consistently in all imports and the `@jsxImportSource` pragma
227- Follow the React component pattern from the example project
228- Handle API calls properly with proper error catching
229
230### Database Patterns
257 - For files in the project, use `readFile` helpers
258
2595. **API Design:**
260 - `fetch` handler is the entry point for HTTP vals
261 - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`
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;
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"
4const app = new Hono();
5
6app.route("/api", backend);
7app.get("/", async (c) => {
8 return c.html(
39 }
40
41 const { messages, project, branchId, anthropicApiKey, images } = await c.req.json();
42
43 console.log("Original messages:", JSON.stringify(messages, null, 2));
110 }
111
112 let apiKey;
113 if (!anthropicApiKey) {
114 return Response.json({
115 error: "Anthropic API key is required. Please log out and add your Anthropic API key to use this app.",
116 }, { status: 400 });
117 } else if (anthropicApiKey === Deno.env.get("PASSWORD")) {
118 apiKey = Deno.env.get("PROVIDED_ANTHROPIC_API_KEY");
119 } else {
120 apiKey = anthropicApiKey;
121 }
122
123 const anthropic = createAnthropic({
124 apiKey,
125 });
126
43
44 try {
45 const response = await fetch("/api/create-branch", {
46 method: "POST",
47 headers: {
112 project,
113 bearerToken,
114 anthropicApiKey,
115 setProject,
116}: {
117 project: any;
118 bearerToken: string;
119 anthropicApiKey: string;
120 setProject: (project: any) => void;
121}) {
158 status,
159 } = useChat({
160 api: "/api/send-message",
161 body: {
162 project,
163 branchId,
164 anthropicApiKey,
165 images: images
166 .filter((img): img is string => {
247 }, [handleStop]);
248
249 // Show a warning message if no anthropicApiKey is provided
250 const showAnthropicKeyWarning = !anthropicApiKey;
251
252 return (
281 {showAnthropicKeyWarning && (
282 <div className="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-4 rounded">
283 <p className="font-bold">Anthropic API Key Missing</p>
284 <p>Please log out and add your Anthropic API key to use this app.</p>
285 </div>
286 )}
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}`,
16export function App() {
17 const [bearerToken, setBearerToken] = useLocalStorage("bearer", "");
18 const [anthropicApiKey, setAnthropicApiKey] = useLocalStorage("anthropic_api_key", "");
19 const [projectJSON, setProjectJSON] = useLocalStorage("project", "");
20 const [project, setProject_] = useState(safeParse(projectJSON));
27 function handleLogout() {
28 setBearerToken("");
29 // Keep the anthropic API key in case the user wants to reuse it
30 }
31
46 <Chat
47 bearerToken={bearerToken}
48 anthropicApiKey={anthropicApiKey}
49 project={project}
50 setProject={setProject}
