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 generateThe 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 /tripsbecomes a tool whoseexecute()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-run2. 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 tomain.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
- Start your app and open it in Chrome.
- Turn on
chrome://flags/#enable-webmcp-testingand reload. - Open DevTools → Application → WebMCP to see your tools listed.
- 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 devOpens 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.