Val Town Code SearchReturn to Val Town

1# Hono
2
3Here's an example using the [Hono](https://hono.dev/) server library with the [Web API](https://docs.val.town/api/web). It works great!
4
5
11- [Nhttp](https://www.val.town/v/tmcw.nhttpExample)
12
13Migrated from folder: Web_API/honoExample

1# Hono
2
3Here's an example using the [Hono](https://hono.dev/) server library with the [Web API](https://docs.val.town/api/web). It works great!
4
5
11- [Nhttp](https://www.val.town/v/tmcw.nhttpExample)
12
13Migrated from folder: Web_API/honoExample

1import { Hono } from "https://esm.sh/hono@3.11.7";
2import { readFile, serveFile } from "https://esm.town/v/std/utils@85-main/index.ts";
3import type { ValTownVal, ValListResponse, ApiResponse } from "../shared/types.ts";
4
5const app = new Hono();
20});
21
22// API endpoint to fetch user's vals
23app.get("/api/vals", async c => {
24  try {
25    const apiToken = Deno.env.get('VALTOWN_API_TOKEN');
26    
27    if (!apiToken) {
28      return c.json<ApiResponse<null>>({
29        success: false,
30        error: "Val Town API token not configured. Please set VALTOWN_API_TOKEN environment variable."
31      }, 400);
32    }
33
34    // Fetch vals from Val Town API
35    const response = await fetch('https://api.val.town/v2/me/vals', {
36      headers: {
37        'Authorization': `Bearer ${apiToken}`,
38        'Content-Type': 'application/json'
39      }
41
42    if (!response.ok) {
43      throw new Error(`Val Town API error: ${response.status} ${response.statusText}`);
44    }
45
48    // Process vals and add basic information
49    const processedVals = valsData.data.map(val => {
50      // For now, we'll set a default type since the v2 API doesn't include it
51      // We can try to infer it from the val name or other clues
52      val.type = 'script'; // Default type
53      
54      // Simple heuristic: if the val name suggests it's an HTTP endpoint
55      if (val.name.toLowerCase().includes('api') || 
56          val.name.toLowerCase().includes('server') ||
57          val.name.toLowerCase().includes('web') ||
64    });
65
66    return c.json<ApiResponse<ValTownVal[]>>({
67      success: true,
68      data: processedVals
71  } catch (error) {
72    console.error('Error fetching vals:', error);
73    return c.json<ApiResponse<null>>({
74      success: false,
75      error: error instanceof Error ? error.message : 'Unknown error occurred'
78});
79
80// API endpoint to get a specific val's details
81app.get("/api/vals/:id", async c => {
82  try {
83    const apiToken = Deno.env.get('VALTOWN_API_TOKEN');
84    const valId = c.req.param('id');
85    
86    if (!apiToken) {
87      return c.json<ApiResponse<null>>({
88        success: false,
89        error: "Val Town API token not configured"
90      }, 400);
91    }
92
93    const response = await fetch(`https://api.val.town/v1/vals/${valId}`, {
94      headers: {
95        'Authorization': `Bearer ${apiToken}`,
96        'Content-Type': 'application/json'
97      }
99
100    if (!response.ok) {
101      throw new Error(`Val Town API error: ${response.status} ${response.statusText}`);
102    }
103
109    }
110
111    return c.json<ApiResponse<ValTownVal>>({
112      success: true,
113      data: val
116  } catch (error) {
117    console.error('Error fetching val:', error);
118    return c.json<ApiResponse<null>>({
119      success: false,
120      error: error instanceof Error ? error.message : 'Unknown error occurred'

32}
33
34export interface ApiResponse<T> {
35  success: boolean;
36  data?: T;

50                try {
51                    setLoading(true);
52                    const response = await fetch('/api/vals');
53                    const result = await response.json();
54                    
109
110            if (error) {
111                const isTokenError = error.includes('API token not configured');
112                return h('div', { className: 'flex items-center justify-center min-h-screen' },
113                    h('div', { className: 'text-center max-w-lg mx-auto p-6' },
114                        h('div', { className: 'text-red-500 text-6xl mb-4' }, isTokenError ? '🔑' : '⚠️'),
115                        h('h2', { className: 'text-xl font-semibold text-gray-900 mb-2' }, 
116                            isTokenError ? 'API Token Required' : 'Error Loading Vals'
117                        ),
118                        h('p', { className: 'text-gray-600 mb-4' }, error),
121                            h('ol', { className: 'text-sm text-blue-800 space-y-1 list-decimal list-inside' },
122                                h('li', null, 'Go to ', h('a', { 
123                                    href: 'https://www.val.town/settings/api', 
124                                    target: '_blank',
125                                    className: 'underline hover:text-blue-600'
126                                }, 'Val Town API Settings')),
127                                h('li', null, 'Create a new API token'),
128                                h('li', null, 'Set VALTOWN_API_TOKEN environment variable'),
129                                h('li', null, 'Refresh this page')
130                            )

12## Structure
13
14- `backend/index.ts` - Main Hono server with API routes
15- `frontend/index.html` - Main web interface
16- `frontend/index.tsx` - React frontend application
19## Setup
20
211. **Get your Val Town API token:**
22   - Go to [Val Town Settings](https://www.val.town/settings/api)
23   - Create a new API token
24   - Copy the token
25
262. **Set the environment variable:**
27   - In your Val Town environment, set `VALTOWN_API_TOKEN` to your API token
28   - The app will automatically fetch and display your vals
29

11  /* 1 ▸ Crypto with 7-day sparkline ------------------------------- */
12  const ids = crypto.join(",");
13  const url = `https://api.coingecko.com/api/v3/coins/markets`
14    + `?vs_currency=aud&ids=${ids}&sparkline=true`;
15  const coins = await fetch(url, { headers: { "x-cg-demo-api-key": CG } }).then(r => r.json());
16
17  coins.forEach((c: any) => {

7
8  for (const id of crypto) {
9    const url = `https://api.coingecko.com/api/v3/coins/${id}`
10      + `/market_chart?vs_currency=aud&days=365&interval=daily`;
11

46app.post("/mcp", async (c) => {
47  try {
48    // Extract API token from headers
49    const apiToken = c.req.header("X-Val-Town-Token") ||
50      c.req.header("Authorization")?.replace("Bearer ", "")
51
52    if (!apiToken) {
53      return c.json({
54        jsonrpc: "2.0",
55        error: {code: -32000, message: "Missing API token in X-Val-Town-Token header or Authorization header"},
56        id: null
57      }, 401)
60    // Load remote configuration
61    const config = await loadConfig(true)
62    config.apiToken = apiToken
63
64    console.log({apiToken})
65    // Convert Hono request to Node.js-style req/res
66    const {req, res} = toReqRes(c.req.raw)

12
13      // check the boolean to see if a Glancer has enabled the link to start a cobrowsing session
14      const resp = await fetch("/api/cobrowse/" + window.__DEMO_ID__, {
15        method: "GET",
16        headers: {