Quickstart

One command, working tools, wired into your app. Five minutes to an agent calling your API.

1. Generate

Point the CLI at a project with an OpenAPI spec. No install, no config file:

npx @webmcp-stack/codegen generate

The CLI finds your spec (including monorepo layouts like apps/server/openapi/openapi.json), finds the package that is your web app, and writes tools into it. In a monorepo with several app candidates it asks once and remembers your answer in .webmcp-codegen.json, so the next run never re-asks.

What you get, per endpoint:

  • Read tools work immediately. GET /trips becomes a tool whose execute() calls your API from the page, with the signed-in user's session. No homework.
  • Mutations start disabled. DELETE /trips/{id} gets the same working code, commented out, behind a generated user-confirmation step. Enable it by uncommenting.
  • Webhooks, auth, and admin endpoints are handled on purpose: webhooks are skipped, auth and admin are generated disabled with a warning.

Preview without writing anything first:

npx @webmcp-stack/codegen generate --dry-run

2. Registration is wired for you

Generated files do nothing until your app registers them once at startup. The CLI does this edit for you:

  • Next.js (app router): creates src/webmcp/register.tsx (a small client component) and adds an import plus <WebMCPRegister /> to your root layout.
  • Vite + React: adds an import and one registerAllTools() call to main.tsx.

Edits are additive only, idempotent, and printed in the report with undo instructions. If the CLI can't find your entry file confidently, it prints the two lines instead of guessing.

3. Try it

  1. Start your app and open it in Chrome.
  2. Turn on chrome://flags/#enable-webmcp-testing and reload.
  3. Open DevTools → ApplicationWebMCP to see your tools listed.
  4. Click a tool to test it manually, or ask the agent to use one. The CLI suggests one, drawn from your spec ("list my trips").

See Chrome DevTools WebMCP panel for the full testing workflow.

Other browsers: add the WebMCP polyfill to your page and the same tools work there.

4. Manage your tools

npx @webmcp-stack/codegen dev

Opens a local dashboard: every tool with its description, risk label, and audit findings. Edit descriptions, toggle tools on and off, and run any tool directly to check it works. Edits are saved to .webmcp-codegen.json and survive regeneration.

5. Refine what matters

The default implementations call your API with fetch. For tools you care about, open the file and replace the body of execute() with your app's own API client. The contract above the marker never changes; your code below it is never touched.

Add summaries to your OpenAPI operations as you go. A tool's description goes straight into the agent's prompt, and the audit reminds you when one is missing.