Val Town Code SearchReturn to Val Town

77async function generateFunFacts(previousFacts) {
78  try {
79    // Get API key from environment
80    const apiKey = Deno.env.get("ANTHROPIC_API_KEY");
81    if (!apiKey) {
82      console.error("Anthropic API key is not configured.");
83      return null;
84    }
85
86    // Initialize Anthropic client
87    const anthropic = new Anthropic({ apiKey });
88
89    // Format previous facts for the prompt

20### 2. HTTP Vals
21
22- Create web APIs and endpoints
23- Handle HTTP requests and responses
24- Example structure:
66- Generate code in TypeScript
67- Add appropriate TypeScript types and interfaces for all data structures
68- Prefer official SDKs or libraries than writing API calls directly
69- Ask the user to supply API or library documentation if you are at all unsure about it
70- **Never bake in secrets into the code** - always use environment variables
71- Include comments explaining complex logic (avoid commenting obvious operations)
190- For AI-generated images, use: `https://maxm-imggenurl.web.val.run/the-description-of-your-image`
191- **Storage:** DO NOT use the Deno KV module for storage
192- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods
193- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified
194- **View Source:** Add a view source link with `import.meta.url.replace("esm.town", "val.town")` and include `target="_top"` attribute
195- **Error Debugging:** Add `<script src="https://esm.town/v/std/catch"></script>` to HTML to capture client-side errors
196- **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
197- **Environment Variables:** Use `Deno.env.get('keyname')` and minimize their use - prefer APIs without keys
198- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser
199- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
230
231### Backend (Hono) Best Practices
232- Hono is the recommended API framework (similar to Express, Flask, or Sinatra)
233- Main entry point should be `backend/index.ts`
234- **Static asset serving:** Use the utility functions to read and serve project files:
251  });
252  ```
253- Create RESTful API routes for CRUD operations
254- Be careful with error handling as Hono tends to swallow errors
255- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:
268- Use React 18.2.0 consistently in all imports and the `@jsxImportSource` pragma
269- Follow the React component pattern from the example project
270- Handle API calls properly with proper error catching
271
272### Database Patterns
299   - For files in the project, use `readFile` helpers
300
3015. **API Design:**
302   - `fetch` handler is the entry point for HTTP vals
303   - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`

10import { NotebookView } from "./NotebookView.tsx";
11
12const API_BASE = "/api/memories";
13const MEMORIES_PER_PAGE = 20; // Increased from 7 to 20 memories per page
14
90
91    // Fetch avatar image
92    fetch("/api/images/stevens.jpg")
93      .then((response) => {
94        if (response.ok) return response.blob();
104
105    // Fetch wood background
106    fetch("/api/images/wood.jpg")
107      .then((response) => {
108        if (response.ok) return response.blob();
133    setError(null);
134    try {
135      const response = await fetch(API_BASE);
136      if (!response.ok) {
137        throw new Error(`HTTP error! status: ${response.status}`);
176
177    try {
178      const response = await fetch(API_BASE, {
179        method: "POST",
180        headers: { "Content-Type": "application/json" },
199
200    try {
201      const response = await fetch(`${API_BASE}/${id}`, {
202        method: "DELETE",
203      });
231
232    try {
233      const response = await fetch(`${API_BASE}/${editingMemory.id}`, {
234        method: "PUT",
235        headers: { "Content-Type": "application/json" },
606    <div className="font-pixel text-[#f8f1e0]">
607      <style jsx>{`
608        @import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap");
609
610        @tailwind base;

14
15// Public route without authentication
16app.get("/api/public/:id", async (c) => {
17  const key = `__public/${c.req.param("id")}`;
18  const { blob } = await import("https://esm.town/v/std/blob");
132};
133
134app.get("/api/blobs", checkAuth, async (c) => {
135  const prefix = c.req.query("prefix") || "";
136  const limit = parseInt(c.req.query("limit") || "20", 10);
141});
142
143app.get("/api/blob", checkAuth, async (c) => {
144  const key = c.req.query("key");
145  if (!key) return c.text("Missing key parameter", 400);
149});
150
151app.put("/api/blob", checkAuth, async (c) => {
152  const key = c.req.query("key");
153  if (!key) return c.text("Missing key parameter", 400);
158});
159
160app.delete("/api/blob", checkAuth, async (c) => {
161  const key = c.req.query("key");
162  if (!key) return c.text("Missing key parameter", 400);
166});
167
168app.post("/api/blob", checkAuth, async (c) => {
169  const { file, key } = await c.req.parseBody();
170  if (!file || !key) return c.text("Missing file or key", 400);

70  const menuRef = useRef(null);
71  const isPublic = blob.key.startsWith("__public/");
72  const publicUrl = isPublic ? `${window.location.origin}/api/public/${encodeURIComponent(blob.key.slice(9))}` : null;
73
74  useEffect(() => {
234    setLoading(true);
235    try {
236      const response = await fetch(`/api/blobs?prefix=${encodeKey(searchPrefix)}&limit=${limit}`);
237      const data = await response.json();
238      setBlobs(data);
261      setBlobContentLoading(true);
262      try {
263        const response = await fetch(`/api/blob?key=${encodeKey(clickedBlob.key)}`);
264        const content = await response.text();
265        setSelectedBlob({ ...clickedBlob, key: decodeKey(clickedBlob.key) });
275  const handleSave = async () => {
276    try {
277      await fetch(`/api/blob?key=${encodeKey(selectedBlob.key)}`, {
278        method: "PUT",
279        body: editContent,
287  const handleDelete = async (key) => {
288    try {
289      await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
290      setBlobs(blobs.filter(b => b.key !== key));
291      if (selectedBlob && selectedBlob.key === key) {
304        const key = `${searchPrefix}${file.name}`;
305        formData.append("key", encodeKey(key));
306        await fetch("/api/blob", { method: "POST", body: formData });
307        const newBlob = { key, size: file.size, lastModified: new Date().toISOString() };
308        setBlobs([newBlob, ...blobs]);
326      try {
327        const fullKey = `${searchPrefix}${key}`;
328        await fetch(`/api/blob?key=${encodeKey(fullKey)}`, {
329          method: "PUT",
330          body: "",
341  const handleDownload = async (key) => {
342    try {
343      const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
344      const blob = await response.blob();
345      const url = window.URL.createObjectURL(blob);
360    if (newKey && newKey !== oldKey) {
361      try {
362        const response = await fetch(`/api/blob?key=${encodeKey(oldKey)}`);
363        const content = await response.blob();
364        await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
365          method: "PUT",
366          body: content,
367        });
368        await fetch(`/api/blob?key=${encodeKey(oldKey)}`, { method: "DELETE" });
369        setBlobs(blobs.map(b => b.key === oldKey ? { ...b, key: newKey } : b));
370        if (selectedBlob && selectedBlob.key === oldKey) {
380    const newKey = `__public/${key}`;
381    try {
382      const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
383      const content = await response.blob();
384      await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
385        method: "PUT",
386        body: content,
387      });
388      await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
389      setBlobs(blobs.map(b => b.key === key ? { ...b, key: newKey } : b));
390      if (selectedBlob && selectedBlob.key === key) {
399    const newKey = key.slice(9); // Remove "__public/" prefix
400    try {
401      const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
402      const content = await response.blob();
403      await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
404        method: "PUT",
405        body: content,
406      });
407      await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
408      setBlobs(blobs.map(b => b.key === key ? { ...b, key: newKey } : b));
409      if (selectedBlob && selectedBlob.key === key) {
554                        onClick={() =>
555                          copyToClipboard(
556                            `${window.location.origin}/api/public/${encodeURIComponent(selectedBlob.key.slice(9))}`,
557                          )}
558                        className="text-blue-400 hover:text-blue-300 text-sm"
577                        >
578                          <img
579                            src={`/api/blob?key=${encodeKey(selectedBlob.key)}`}
580                            alt="Blob content"
581                            className="max-w-full h-auto"

197});
198
199// API documentation endpoint
200app.get("/api/docs", async (c) => {
201  const { TOOLS } = await import("./mcp/tools.ts");
202  
207      mcp: "POST /mcp - Main MCP protocol endpoint",
208      health: "GET /health - Health check",
209      docs: "GET /api/docs - This documentation"
210    },
211    examples: {

125              <div className="flex items-center gap-2">
126                <span>{getMessageIcon(message.role)}</span>
127                <span className="font-semibold capitalize">{message.role}</span>
128              </div>
129              <span className="text-xs text-gray-500">

2import React, { useState } from "https://esm.sh/react@18.2.0?deps=react@18.2.0";
3
4interface ApiKeyInputProps {
5  apiKey: string;
6  onApiKeyChange: (key: string) => void;
7}
8
9export function ApiKeyInput({ apiKey, onApiKeyChange }: ApiKeyInputProps) {
10  const [isVisible, setIsVisible] = useState(false);
11  const [tempKey, setTempKey] = useState(apiKey);
12
13  const handleSave = () => {
14    onApiKeyChange(tempKey);
15  };
16
17  const handleClear = () => {
18    setTempKey('');
19    onApiKeyChange('');
20    localStorage.removeItem('anthropic_api_key');
21  };
22
23  return (
24    <div className="bg-white rounded-lg shadow-md p-6">
25      <h2 className="text-2xl font-semibold text-gray-800 mb-4">🔑 Anthropic API Key</h2>
26      
27      <div className="space-y-4">
28        <div>
29          <label htmlFor="apiKey" className="block text-sm font-medium text-gray-700 mb-2">
30            Enter your Anthropic API Key
31          </label>
32          <div className="flex gap-2">
33            <div className="flex-1 relative">
34              <input
35                id="apiKey"
36                type={isVisible ? "text" : "password"}
37                value={tempKey}
38                onChange={(e) => setTempKey(e.target.value)}
39                placeholder="sk-ant-api03-..."
40                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
41              />
67          <p className="mb-2">
68            <strong>Status:</strong>{' '}
69            <span className={apiKey ? 'text-green-600' : 'text-red-600'}>
70              {apiKey ? '✅ API key configured' : '❌ No API key set'}
71            </span>
72          </p>
73          <p className="mb-2">
74            Your API key is stored locally in your browser and sent directly to Anthropic's API.
75          </p>
76          <p>
77            Get your API key from{' '}
78            <a 
79              href="https://console.anthropic.com/account/keys" 

2import React, { useState, useEffect, useRef } from "https://esm.sh/react@18.2.0?deps=react@18.2.0";
3import { MCPClient } from "./MCPClient.tsx";
4import { ApiKeyInput } from "./ApiKeyInput.tsx";
5import { ChatInterface } from "./ChatInterface.tsx";
6
23
24export function App() {
25  const [apiKey, setApiKey] = useState<string>('');
26  const [messages, setMessages] = useState<Message[]>([]);
27  const [isLoading, setIsLoading] = useState(false);
29  const [availableTools, setAvailableTools] = useState<any[]>([]);
30
31  // Initialize MCP client and load API key from localStorage
32  useEffect(() => {
33    const savedApiKey = localStorage.getItem('anthropic_api_key');
34    if (savedApiKey) {
35      setApiKey(savedApiKey);
36    }
37
52      id: '1',
53      role: 'system',
54      content: 'Welcome to the Val Town MCP Client Demo! This chat interface connects to Claude via the Anthropic API and uses the Val Town MCP server to execute tools. Enter your Anthropic API key to get started.',
55      timestamp: new Date()
56    }]);
57  }, []);
58
59  const handleApiKeyChange = (key: string) => {
60    setApiKey(key);
61    localStorage.setItem('anthropic_api_key', key);
62  };
63
64  const sendMessage = async (content: string) => {
65    if (!apiKey.trim()) {
66      alert('Please enter your Anthropic API key first');
67      return;
68    }
92When you need to use these tools, I will execute them for you and provide the results. Be helpful and use the tools when appropriate to assist the user.`;
93
94      // Call Anthropic API
95      const response = await fetch('https://api.anthropic.com/v1/messages', {
96        method: 'POST',
97        headers: {
98          'Content-Type': 'application/json',
99          'x-api-key': apiKey,
100          'anthropic-version': '2023-06-01'
101        },
121      if (!response.ok) {
122        const errorData = await response.json();
123        throw new Error(`Anthropic API error: ${errorData.error?.message || response.statusText}`);
124      }
125
205
206        <div className="grid gap-6">
207          <ApiKeyInput 
208            apiKey={apiKey} 
209            onApiKeyChange={handleApiKeyChange}
210          />
211          

8- **SQLite Database**: Execute queries and manage database operations
9- **Email**: Send emails through Val Town's email service
10- **OpenAI Integration**: Access OpenAI API through Val Town's service
11- **File Operations**: Read and list project files
12- **Environment Variables**: Access environment configuration
20- JSON-RPC 2.0 compliant messaging
21
22## API Endpoints
23
24- `POST /mcp` - Main MCP protocol endpoint
34- **MCP Protocol**: `POST /mcp` - JSON-RPC 2.0 endpoint for MCP requests
35- **Health Check**: `GET /health` - Server health status
36- **API Documentation**: `GET /api/docs` - Complete API documentation in JSON format
37
38### Example MCP Requests