Val Town Code SearchReturn to Val Town

9To use it on your own Val Town SQLite database, [fork it](https://www.val.town/v/stevekrouse/sqlite_admin/fork) to your account.
10
11It uses [basic authentication](https://www.val.town/v/pomdtr/basicAuth) with your [Val Town API Token](https://www.val.town/settings/api) as the password (leave the username field blank).
12
13Migrated from folder: utils/sqlite_admin/sqlite_admin

18app.get("/shared/**/*", (c) => serveFile(c.req.path, import.meta.url));
19
20// API endpoints
21app.get("/api/messages", async (c) => {
22  const messages = await getMessages();
23  return c.json(messages);
24});
25
26app.post("/api/messages", async (c) => {
27  const { content } = await c.req.json();
28

38```
39
40## API Endpoints
41
42- `GET /` - Serves the React application with initial data
43- `GET /api/messages` - Fetch all messages (JSON)
44- `POST /api/messages` - Create a new message
45- `GET /public/**` - Static assets (CSS, JS, etc.)
46- `/*` - All other routes handled by TanStack Router

8## Hono
9
10This app uses [Hono](https://hono.dev/) as the API framework. You can think of Hono as a replacement for [ExpressJS](https://expressjs.com/) that works in serverless environments like Val Town or Cloudflare Workers. If you come from Python or Ruby, Hono is also a lot like [Flask](https://github.com/pallets/flask) or [Sinatra](https://github.com/sinatra/sinatra), respectively.
11
12## Serving assets to the frontend
20### `index.html`
21
22The most complicated part of this backend API is serving index.html. In this app (like most apps) we serve it at the root, ie `GET /`. 
23
24We *bootstrap* `index.html` with some initial data from the server, so that it gets dynamically injected JSON data without having to make another round-trip request to the server to get that data on the frontend. This is a common pattern for client-side rendered apps.
25
26## CRUD API Routes
27
28This app has two CRUD API routes: for reading and inserting into the messages table. They both speak JSON, which is standard. They import their functions from `/backend/database/queries.ts`. These routes are called from the React app to refresh and update data.
29
30## Errors
31
32Hono and other API frameworks have a habit of swallowing up Errors. We turn off this default behavior by re-throwing errors, because we think most of the time you'll want to see the full stack trace instead of merely "Internal Server Error". You can customize how you want errors to appear.

7    queryKey: ["messages"],
8    queryFn: async () => {
9      const response = await fetch("/api/messages");
10      if (!response.ok) {
11        throw new Error("Failed to fetch messages");
25  return useMutation({
26    mutationFn: async (content: string) => {
27      const response = await fetch("/api/messages", {
28        method: "POST",
29        headers: { "Content-Type": "application/json" },

9}
10
11interface MCPContextAPI {
12  // Tool operations
13  listTools: () => Promise<any[]>;
37 * - Renders HTML in a secure iframe
38 * - Provides fullscreen enter/exit affordances
39 * - Exposes MCP context API to iframe content
40 * - Handles iframe communication via postMessage
41 */
46  const [isLoading, setIsLoading] = useState(true);
47
48  // Create MCP context API that will be exposed to iframe
49  const createMCPContext = useCallback((): MCPContextAPI => {
50    const findClientByName = (serverName: string) => {
51      console.log("[MCP/Browser Renderer] Finding client by name:", serverName, mcpClients);
210      const { type, id, method, args } = event.data;
211
212      if (type !== "mcp-api-call") {
213        return;
214      }
219
220        if (typeof methodFunc !== "function") {
221          throw new Error(`Unknown MCP API method: ${method}`);
222        }
223
225
226        iframe.contentWindow?.postMessage({
227          type: "mcp-api-response",
228          id,
229          success: true,
232      } catch (error) {
233        iframe.contentWindow?.postMessage({
234          type: "mcp-api-response",
235          id,
236          success: false,
252    </script>
253      <script>
254        // MCP Context API for iframe content
255        window.mcpContext = {
256          // Async wrapper for postMessage communication
257          async callAPI(method, ...args) {
258            return new Promise((resolve, reject) => {
259              const id = Math.random().toString(36).substr(2, 9);
260              
261              const handleResponse = (event) => {
262                if (event.data.type === 'mcp-api-response' && event.data.id === id) {
263                  window.removeEventListener('message', handleResponse);
264                  if (event.data.success) {
273              
274              window.parent.postMessage({
275                type: 'mcp-api-call',
276                id,
277                method,
282              setTimeout(() => {
283                window.removeEventListener('message', handleResponse);
284                reject(new Error('MCP API call timeout'));
285              }, 30000);
286            });
288          
289          // Convenience methods
290          async listTools() { return this.callAPI('listTools'); },
291          async callTool(serverName, toolName, args) { return this.callAPI('callTool', serverName, toolName, args); },
292          async listPrompts() { return this.callAPI('listPrompts'); },
293          async getPrompt(serverName, promptName, args) { return this.callAPI('getPrompt', serverName, promptName, args); },
294          async listResources() { return this.callAPI('listResources'); },
295          async readResource(serverName, uri) { return this.callAPI('readResource', serverName, uri); },
296          log(level, message, data) { this.callAPI('log', level, message, data); },
297          requestFullscreen() { this.callAPI('requestFullscreen'); },
298          exitFullscreen() { this.callAPI('exitFullscreen'); },
299          async isFullscreen() { return this.callAPI('isFullscreen'); }
300        };
301        

73<script>
74(function() {
75  const API_URL = '${sourceUrl}';
76  const STORE_KEYS = { projects: 'aura_projects_v1', tasks: 'aura_tasks_v1' };
77  const ACTIVE_TASK_WARNING_THRESHOLD = 50;
253    addMessageToChat('ai', 'Aura is thinking...');
254    try {
255      const res = await fetch(\`\${API_URL}?action=chat\`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message: userMessage, tasks, projects, history: conversationHistory.slice(-4) }) });
256      if (!res.ok) {
257        const err = await res.json();
284    toggleLoading(btn, true);
285    try {
286      const res = await fetch(\`\${API_URL}?action=synthesizeProject\`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ goal }) });
287      if (!res.ok) {
288        const err = await res.json();
317    toggleLoading(btn, true);
318    try {
319      const res = await fetch(\`\${API_URL}?action=getDailyReschedule\`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ tasks: todayTasks }) });
320      if (!res.ok) {
321        const err = await res.json();

1This Val will proxy anthropic HTTP requests from some frontend client, like langchain, so that you can utilize anthropic apis from the browser.
2
3Convert it to an HTTP val in order to use it (you may want to setup an ENV var / header to protect the endpoint with a secret key)

13  }
14
15  // Check that your valtown API key is sent in the 'x-authorization' header
16  // Delete this line if you don't mind other parties hitting this endpoint
17  if (req.headers.get("x-authorization") !== Deno.env.get("valtown")) {
24  try {
25    const body = await req.json();
26    const apiKey = req.headers.get("x-api-key");
27
28    if (!body) {
30    }
31
32    if (!apiKey) {
33      throw new Error("No API key provided");
34    }
35
36    const anthropic = new Anthropic({ apiKey });
37
38    if (body?.stream) {
57    }
58  } catch (e) {
59    if (e instanceof Anthropic.APIError) {
60      return Response.json(e.error, { status: e.status });
61    }

97      switch (parseMode) {
98        case 'url':
99          endpoint = '/api/parse/url';
100          requestData = { type: 'url', content: parseInput };
101          break;
102        case 'text':
103          endpoint = '/api/parse/text';
104          requestData = { type: 'url', content: parseInput }; // Note: backend expects 'url' type for text parsing
105          break;
110          
111          if (uploadedFile.type.startsWith('image/')) {
112            endpoint = '/api/parse/image';
113            requestData = { type: 'image', content: parseInput };
114          } else if (uploadedFile.type === 'application/pdf') {
115            endpoint = '/api/parse/pdf';
116            requestData = { type: 'pdf', content: parseInput };
117          } else {
198      };
199
200      const url = isEditing ? `/api/recipes/${recipe.id}` : '/api/recipes';
201      const method = isEditing ? 'PUT' : 'POST';
202