WebMCP Hello World

A minimal static page that registers tools callable by AI agents — no server required.

🔧

Registered tools

say_hello

Returns a greeting message. Demonstrates a tool with an input parameter.

Input: name (string) — the name to greet

get_page_info

Returns metadata about the current page: title, URL, and visit count (sessionStorage).

increment_counter

Increments a counter displayed on the page. Demonstrates a tool that mutates DOM state.

Counter: 0

💻

The code

if (!navigator.modelContext) return

navigator.modelContext.registerTool({
  name: 'say_hello',
  description: 'Returns a greeting for the given name',
  inputSchema: {
    type: 'object',
    properties: { name: { type: 'string' } },
    required: ['name']
  },
  execute: async ({ name }) => ({ message: `Hello, ${name}! 👋` }),
  annotations: { readOnlyHint: true }
})

navigator.modelContext.registerTool({
  name: 'increment_counter',
  description: 'Increments the page counter by 1',
  inputSchema: { type: 'object', properties: {} },
  execute: async () => {
    counter++
    document.getElementById('counter-display').textContent = counter
    return { counter }
  },
  annotations: { readOnlyHint: false }
})