{point.country}
Fat intake:	{point.x}g
Sugar intake:	{point.y}g
Obesity (adults):	{point.z}%

\",\n \"followPointer\": true\n },\n \"plotOptions\": {\n \"series\": {\n \"dataLabels\": {\n \"enabled\": true,\n \"format\": \"{point.name}\"\n }\n }\n },\n \"series\": [\n {\n \"data\": [\n {\"x\": 95, \"y\": 95, \"z\": 13.8, \"name\": \"BE\", \"country\": \"Belgium\"},\n {\"x\": 86.5, \"y\": 102.9, \"z\": 14.7, \"name\": \"DE\", \"country\": \"Germany\"},\n {\"x\": 80.8, \"y\": 91.5, \"z\": 15.8, \"name\": \"FI\", \"country\": \"Finland\"},\n {\"x\": 80.4, \"y\": 102.5, \"z\": 12, \"name\": \"NL\", \"country\": \"Netherlands\"},\n {\"x\": 80.3, \"y\": 86.1, \"z\": 11.8, \"name\": \"SE\", \"country\": \"Sweden\"},\n {\"x\": 78.4, \"y\": 70.1, \"z\": 16.6, \"name\": \"ES\", \"country\": \"Spain\"},\n {\"x\": 74.2, \"y\": 68.5, \"z\": 14.5, \"name\": \"FR\", \"country\": \"France\"},\n {\"x\": 73.5, \"y\": 83.1, \"z\": 10, \"name\": \"NO\", \"country\": \"Norway\"},\n {\"x\": 71, \"y\": 93.2, \"z\": 24.7, \"name\": \"UK\", \"country\": \"United Kingdom\"},\n {\"x\": 69.2, \"y\": 57.6, \"z\": 10.4, \"name\": \"IT\", \"country\": \"Italy\"},\n {\"x\": 68.6, \"y\": 20, \"z\": 16, \"name\": \"RU\", \"country\": \"Russia\"},\n {\"x\": 65.5, \"y\": 126.4, \"z\": 35.3, \"name\": \"US\", \"country\": \"United States\"},\n {\"x\": 65.4, \"y\": 50.8, \"z\": 28.5, \"name\": \"HU\", \"country\": \"Hungary\"},\n {\"x\": 63.4, \"y\": 51.8, \"z\": 15.4, \"name\": \"PT\", \"country\": \"Portugal\"},\n {\"x\": 64, \"y\": 82.9, \"z\": 31.3, \"name\": \"NZ\", \"country\": \"New Zealand\"}\n ],\n \"colorByPoint\": true\n }\n ]\n}\n```\n\n## Syntax and Data Format Rules\n\n### Data Format Requirements\n\n- For bar/column charts: series.data should be a simple numeric array when\n xAxis.categories are defined.\n- **Bar/Column:** \\`xAxis.categories\\` with simple numeric array in series.data\n- **Scatter/Bubble:** Objects with x, y properties: \\`{x: 10, y: 20, name:\n \"Point\"}\\`\n- **Line/Time series:** Datetime xAxis with \\`[[timestamp, value], ...]\\` format\n\n**Axis Configuration for Bar Charts**\n\n- For HORIZONTAL bar charts (type: 'bar'):\n - xAxis = categories (treatment names, etc.)\n - yAxis = values (metrics, measurements)\n- For VERTICAL bar charts (type: 'column'):\n - xAxis = categories (treatment names, etc.)\n - yAxis = values (metrics, measurements)\n\n**Critical**: Do NOT swap xAxis and yAxis definitions when switching chart\ntypes. Whether using type: 'bar' (horizontal) or type: 'column' (vertical),\nALWAYS configure: xAxis.categories = your dimension/grouping (e.g., treatment\nnames) yAxis.title = your metric name (e.g., 'Brand Lift') series.data = numeric\nvalues Highcharts automatically handles the visual rotation—only the chart type\nchanges, not the axis definitions.\n\n### Data Structure Examples by Chart Type\n\nBar/Column with categories:\n\n```\n{\n \"xAxis\": {\"categories\": [\"A\", \"B\", \"C\"]},\n \"series\": [{\"data\": [10, 20, 30]}] // Simple array\n}\n```\n\nBar/Column with custom properties:\n\n```\n{\n \"xAxis\": {\"type\": \"category\"},\n \"series\": [{\n \"data\": [\n {\"y\": 10, \"name\": \"A\", \"color\": \"#fff\"},\n {\"y\": 20, \"name\": \"B\", \"color\": \"#fff\"}\n ]\n }]\n}\n```\n\nScatter/Bubble with multiple values:\n\n```\n{\n \"series\": [{\n \"data\": [\n {\"x\": 10, \"y\": 20, \"z\": 30, \"customProp\": \"value\"}\n ]\n }]\n}\n```\n\nFormatter Functions: When using Highcharts formatters (e.g., tooltip.formatter,\ndataLabels.formatter), output the function as a STRING. For example:\n\n```\n\"dataLabels\": {\n \"enabled\": true,\n \"formatter\": \"function() { return (this.y >= 0 ? '+' : '') + this.y.toFixed(1) + ' p.p.'; }\"\n}\n```\n\nFormat Strings vs. Formatters: Do NOT use printf-style format strings like\n{y:+.1f} in the format property—this is not valid Highcharts syntax. Use format\nONLY for simple Highcharts format syntax like {value}, {point.name}, or\n{point.custom}. For complex number formatting, use a formatter function as a\nstring instead.\n\n### Common Syntax and Data Format Errors to Avoid:\n\n- ❌ Mixing simple arrays with object notation in same series\n- ❌ Defining xAxis.categories AND using \"x\" properties in data points\n- ❌ Adding custom properties to data without corresponding tooltip formatter\n- ❌ Using custom properties in formatters without quotes/brackets\n- ❌ Using legends when showing a single series\n- ❌ Showing data labels on axes when data labels are present on data points\n (redundant axis labels)\n- ✅ When categories exist, map data by position (index), not by property\n- Confusing format: \"{y:+.1f} p.p.\" (invalid) with formatter: \"function() {\n return (this.y >= 0 ? '+' : '') + this.y.toFixed(1) + ' p.p.'; }\" (valid).\n\n## Charting principles\n\n- Use the largest feasible font sizes so the chart is readable easily.\n- Use charting principles from Edward Tufte and Gene Zelazny\n\n## Layout preferences\n\n- Prefer data labels on the data points rather than the legend, unless the chart\n is too crowded.\n- Grid lines should be very light, and dotted.\n- Axis titles should be clear, and include the unit of measurement.\n- If you are plotting multiple charts, align the axes to the same scale.\n\n## Common chart types\n\n- For marketing funnel analysis, use funnel chart type.\n- For comparisons of treatment effects, use bar chart type.",[],[163,182],{"_105":190,"_97":191,"_164":192,"_166":165,"_167":147,"_168":169,"_170":171,"_107":193,"_102":33,"_173":194,"_175":195,"_176":22,"_177":-5,"_178":196,"_101":197},"3ee12900-014a-11f1-a7ee-42dde27851f2","html-chart.ts","019c257b-9497-7521-b5b8-abc7d2d36b58",["D",1770155381921],"script","import { z } from \"npm:zod@4\";\nimport type { CallToolResult } from \"npm:@modelcontextprotocol/sdk@1/types.js\";\nimport { httpEndpoint, readFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nconst description = await readFile(\"/tools/html-chart.md\");\n\nexport const htmlChart = {\n name: \"html_chart\",\n config: {\n description,\n inputSchema: {\n options: z.looseObject({}).describe(\n \"Highcharts configuration object (Highcharts.Options). Must be valid JSON matching Highcharts API.\",\n ),\n },\n },\n cb: async (\n { options }: { options: Record },\n ): Promise => {\n try {\n const result = await sqlite.execute({\n sql:\n \"INSERT INTO charts(created_at, config) values(?, ?) RETURNING created_at\",\n args: [Date.now(), JSON.stringify(options)],\n });\n\n const baseUrl = await httpEndpoint(\"main.ts\");\n const chartUrl = `${baseUrl}/${result.rows[0].created_at}`;\n\n return { content: [{ type: \"text\", text: chartUrl }] };\n } catch (e) {\n console.error(e);\n return {\n content: [{ type: \"text\", text: `Error creating chart: ${e.message}` }],\n isError: true,\n };\n }\n },\n};\n\nexport async function render(chartTimestamp: string) {\n const result = await sqlite.execute({\n sql: \"SELECT config FROM charts WHERE created_at = ?\",\n args: [chartTimestamp],\n });\n\n const options = result.rows[0]?.config;\n if (!options) {\n return `

Chart not found

`;\n }\n\n return `\n\n\n \n HTML chart\n \n \n \n\n\n\n

\n\n \n\n`;\n}",[],[163,191],{"_105":199,"_97":200,"_164":201,"_166":165,"_167":147,"_168":146,"_170":171,"_107":202,"_102":203,"_173":194,"_175":204,"_176":22,"_177":-5,"_178":205,"_101":206},"bf2de1b0-0150-11f1-8e7f-42dde27851f2","index.ts","019c257b-9497-7521-b5b8-ac2430e88f1a",["D",1770158174154],2,"import { htmlChart } from \"./html-chart.ts\";\nimport { screenshot } from \"./screenshot.ts\";\n\nconst TOOLS = [htmlChart, screenshot];\n\nexport default TOOLS;",[],[163,200],{"_105":208,"_97":209,"_164":210,"_166":165,"_167":147,"_168":146,"_170":171,"_107":211,"_102":212,"_173":194,"_175":213,"_176":22,"_177":-5,"_178":214,"_101":215},"bf2de6e2-0150-11f1-8e7f-42dde27851f2","screenshot.ts","4098d46e-014a-11f1-a711-42dde27851f2",["D",1770158174154],8,"import \"https://esm.town/v/wolf/StubFS/stubFs.ts\";\nimport Kernel from \"npm:@onkernel/sdk@0\";\nimport { chromium } from \"npm:playwright-core@1\";\nimport { z } from \"npm:zod@4\";\nimport type { CallToolResult } from \"npm:@modelcontextprotocol/sdk@1/types.js\";\n\nexport const screenshot = {\n name: \"screenshot\",\n config: {\n description:\n \"Captures a screenshot of a URL using Kernel browser + Playwright. Returns the screenshot as a base64 image.\",\n inputSchema: { url: z.string().describe(\"URL to screenshot\") },\n },\n cb: async (\n { url }: { url: string },\n ): Promise => {\n const kernel = new Kernel({\n apiKey: Deno.env.get(\"KERNEL_API_KEY\"),\n });\n\n let kernelBrowser;\n let playwrightBrowser;\n\n try {\n console.log(\"Creating Kernel browser...\");\n kernelBrowser = await kernel.browsers.create();\n\n console.log(\"Connecting Playwright to Kernel browser...\");\n playwrightBrowser = await chromium.connectOverCDP(\n kernelBrowser.cdp_ws_url,\n );\n\n const context = playwrightBrowser.contexts()[0] ||\n (await playwrightBrowser.newContext({\n viewport: { width: 1920, height: 1080 },\n }));\n const page = context.pages()[0] || (await context.newPage());\n\n console.log(`Navigating to ${url}...`);\n await page.goto(url, {\n waitUntil: \"networkidle\",\n timeout: 10000,\n });\n\n console.log(\"Capturing screenshot...\");\n const screenshotBuffer = await page.screenshot({ type: \"png\" });\n const base64 = btoa(\n String.fromCharCode(...new Uint8Array(screenshotBuffer)),\n );\n\n console.log(\"Screenshot captured successfully\");\n\n return {\n content: [\n {\n type: \"image\",\n data: base64,\n mimeType: \"image/png\",\n },\n ],\n };\n } catch (e) {\n console.error(e);\n return {\n content: [{ type: \"text\", text: `Error screenshotting: ${e.message}` }],\n isError: true,\n };\n } finally {\n console.log(\"Cleaning up browser resources...\");\n if (playwrightBrowser) {\n try {\n await playwrightBrowser.close();\n } catch (e) {\n console.error(\"Error closing Playwright browser:\", e);\n }\n }\n if (kernelBrowser) {\n try {\n await kernel.browsers.deleteByID(kernelBrowser.session_id);\n } catch (e) {\n console.error(\"Error deleting Kernel browser:\", e);\n }\n }\n }\n },\n};",[],[163,209],[163],{"_105":218,"_97":219,"_164":220,"_166":-5,"_167":147,"_168":146,"_170":171,"_107":221,"_102":203,"_173":185,"_175":222,"_176":22,"_177":-5,"_178":223,"_101":224},"bf2dd698-0150-11f1-8e7f-42dde27851f2","README.md","019c257b-9497-7521-b5b8-b6c6d1ebd8d9",["D",1770158174154],"# Hello, MCP\n\nSimple MCP server using:\n\n- Hono\n- Zod\n- MCP TypeScript SDK\n- Val Town [SQLite](https://docs.val.town/reference/std/sqlite/) and\n [HTTP](https://docs.val.town/vals/http/)\n\nTest quickly on\n[playground.ai.cloudflare.com](https://playground.ai.cloudflare.com/) (and/or\nwatch this 40s [demo](https://screen.studio/share/KD0R86Oe)).\n\n## Tools\n\n1. [HTML charting](./tools/html-chart.ts)\n2. [Screenshotting](./tools/screenshot.ts)\n\n## Open questions\n\n- [ ] Should long tool descriptions (e.g.\n [html-chart.md](./tools/html-chart.md)) be extracted into\n [prompts](https://modelcontextprotocol.io/docs/learn/server-concepts#prompts)?",[],[219],{"_105":226,"_97":227,"_164":228,"_166":-5,"_167":147,"_168":169,"_170":171,"_107":229,"_102":33,"_173":194,"_175":230,"_176":22,"_177":-5,"_178":231,"_101":232},"3ee1484a-014a-11f1-a7ee-42dde27851f2","db.ts","019c257b-9497-7521-b5b8-ba27ae68a7ae",["D",1770155381921],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nawait sqlite.execute(`\n CREATE TABLE IF NOT EXISTS charts (\n id integer PRIMARY KEY,\n created_at INTEGER NOT NULL, -- in milliseconds, e.g. using Date.now\n config TEXT NOT NULL -- the highcharts json configuration\n );\n`);",[],[227],{"_105":234,"_97":235,"_164":236,"_166":-5,"_167":147,"_168":169,"_170":171,"_107":237,"_102":33,"_173":238,"_175":239,"_176":22,"_177":-5,"_178":240,"_101":241},"3ee14bc4-014a-11f1-a7ee-42dde27851f2","main.ts","019c257b-9497-7521-b5b8-bc555427a800",["D",1770155381921],"http","import { Hono } from \"npm:hono@4\";\nimport { McpServer } from \"npm:@modelcontextprotocol/sdk@1/server/mcp.js\";\nimport { StreamableHTTPTransport } from \"npm:@hono/mcp@0\";\nimport TOOLS from \"./tools/index.ts\";\nimport { render } from \"./tools/html-chart.ts\";\n\nconst app = new Hono();\n\nconst mcpServer = new McpServer({\n name: \"hello-mcp\",\n version: \"1.0.0\",\n});\n\nconst transport = new StreamableHTTPTransport();\n\nfor (const tool of TOOLS) {\n const { name, config, cb } = tool;\n mcpServer.registerTool(name, config, cb);\n}\n\napp.all(\"/mcp\", async (c) => {\n if (!mcpServer.isConnected()) {\n await mcpServer.connect(transport);\n }\n\n return transport.handleRequest(c);\n});\n\napp.get(\"/\", (c) => {\n return c.text(`hello-mcp server running at: ${c.req.url + \"mcp\"}`);\n});\n\napp.get(\"/:chart_timestamp\", async (c) => {\n const chartTimestamp = c.req.param(\"chart_timestamp\");\n const html = await render(chartTimestamp);\n return c.html(html);\n});\n\nexport default app.fetch;",[],[235],"files",[161,180,189,198,207,217,225,233],"counts",{"_246":33,"_247":203,"_248":169,"_249":250,"_253":254},"pulls","branches","forks","envVars",{"_251":169,"_252":33},"count","emptyCount","connections",{"_251":33,"_255":33},"unfilledCount","contents",[258,261,264,267],{"_105":162,"_97":163,"_164":165,"_166":-5,"_167":147,"_168":169,"_170":171,"_107":259,"_102":33,"_173":174,"_175":-5,"_176":22,"_177":-5,"_101":260},["D",1770155381921],[163],{"_105":218,"_97":219,"_164":220,"_166":-5,"_167":147,"_168":146,"_170":171,"_107":262,"_102":203,"_173":185,"_175":222,"_176":22,"_177":-5,"_101":263},["D",1770158174154],[219],{"_105":226,"_97":227,"_164":228,"_166":-5,"_167":147,"_168":169,"_170":171,"_107":265,"_102":33,"_173":194,"_175":230,"_176":22,"_177":-5,"_101":266},["D",1770155381921],[227],{"_105":234,"_97":235,"_164":236,"_166":-5,"_167":147,"_168":169,"_170":171,"_107":268,"_102":33,"_173":238,"_175":239,"_176":22,"_177":-5,"_101":269},["D",1770155381921],[235],"upstreamProject",{"_105":272,"_97":273,"_113":274,"_115":74,"_111":112,"_23":275},"376b85e4-0118-11f1-bffe-42dde27851f2","mcpete","MCP server with one ccTLD query tool",{"_95":96,"_137":138},"upstreamBranch",{"_105":150,"_107":278,"_279":280,"_97":45,"_148":106,"_102":152,"_149":281,"_151":282,"_283":284,"_109":-5,"_158":22,"_111":112,"_157":96,"_16":122,"_156":98},["D",1770143321872],"updatedAt",["D",1770158174110],"376be700-0118-11f1-bffe-42dde27851f2",22,"lockfileKey","1770228050244-esm.town_v_petermillspaugh_hello-mcp@123-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.compare.$branch",{"_95":96,"_97":98,"_99":100,"_103":291,"_296":33,"_297":33,"_298":299,"_305":22,"_306":295,"_307":308,"_311":-5},{"_105":106,"_97":98,"_107":292,"_109":-5,"_110":22,"_111":112,"_113":114,"_115":74,"_14":116,"_117":-5,"_118":22,"_119":-5,"_120":-5,"_121":33,"_16":122,"_123":124,"_125":126,"_127":128,"_129":128,"_130":131,"_132":131,"_133":131,"_134":128,"_135":128,"_23":293,"_139":294,"_144":295,"_158":22},["D",1770143321872],{"_95":96,"_137":138},{"_95":96,"_141":138,"_14":116,"_142":143},{"_102":146,"_97":100,"_105":147,"_148":106,"_149":150,"_151":152,"_153":112,"_154":106,"_155":122,"_156":98,"_157":96},"ahead","behind","diff",{"_300":301,"_176":302,"_303":304},"added",[],[],"modified",[],"hasChanges","sourceBranch","targetBranch",{"_105":150,"_107":309,"_279":310,"_97":45,"_148":106,"_102":152,"_149":281,"_151":282,"_283":284,"_109":-5,"_158":22,"_111":112,"_157":96,"_16":122,"_156":98},["D",1770143321872],["D",1770158174110],"pull","actionData","errors"]

{point.country}

Chart not found

petermillspaugh

hello-mcp

Mergescreenshotintomain