In short:
ak-webmcplets AI agents running in the browser call your page, form or feature directly through WebMCP tools registered withdocument.modelContext, instead of reading the DOM and guessing where to click. It sets the name, description, JSON Schema and safety annotations, checks with the validator and evals, and can then hand off toak-agent-browserfor automated runs. WebMCP is only a layer on top of an existing page, not an MCP server: that isak-mcp-builder's job.
Disclosure: I maintain AgentKit and have an affiliate relationship with it: the AgentKit link in this post is an affiliate link; buying through it gets you 30% off.
Summary
Use it when you want to turn a form into a tool, add tools for actions in a single-page app or a React component, let a widget embedded on a partner site use tools, or review a tool set that agents keep calling wrongly. Do not use it when you need an MCP server for an API, want to run an existing MCP tool, or only want browser automation: the skill will point you to the right place.
flowchart LR
A["Existing page, form, feature"] --> B["ak-webmcp"]
B --> C["Checked WebMCP tools"]
C --> D["Test with Inspector and evals"]
D --> E["Automated runs: ak-agent-browser"]
A -->|"Need an MCP server"| F["ak-mcp-builder"]It rests on 4 ideas:
| Idea | Question | Example |
|---|---|---|
| WebMCP is not an MCP server | Where does the tool's logic run? | add_to_cart runs as JavaScript on the page, using the user's signed-in session |
| Imperative or declarative | Is the action just submitting an HTML form? | A support form gets toolname attributes; a custom widget or one whose result must be read calls registerTool |
| Safety annotations | May the agent call freely, or must it ask the user first? | Product search is readOnlyHint; payment and delete are consequentialHint; permissions are still checked in execute |
| Browser conditions | Does the target browser really have this API? | It needs HTTPS and origin isolation; without support, the page still runs its normal UI |
Each tool should do exactly one thing, the tool set should stay as small as possible, and everything should fit the character budget: name up to 30, description up to 500, parameter description up to 150, output up to 1.5K.
Sample prompt to turn a form into a tool:
/ak-webmcp Turn the "Contact support" form on the <page path> page into a WebMCP tool.
Constraints: keep the current form validation and UI, users still see the form.
Done when: the validator reports no errors and Inspector shows the tool with all parameters.This skill has no flags. After the command you describe the page, form or feature to turn into a tool. Options like --strict belong to the bundled scripts, not to the skill.
Below is the detailed version: the run flow, 5 situations with prompts, how to write the input, the change history by ak release, and common pitfalls. The detailed version and the interactive page are for subscribers. Your agent can also search them through the portal's MCP.
Opens when your account has subscriber access
This guide is for subscribers
Once your account has access, the full piece, the interactive visual and the agent call all open.
- Sign in or create a modernEngineer accountReading access belongs to your account email.
- Choose a plan on the pricing page1, 3 or 12 months, paid by VietQR bank transfer. Access opens about a minute after the money arrives.
- Or redeem a Facebook subscriber codePeople supporting the page on Facebook get an activation code by message each month.
Already a subscriber? Sign in to read.
Use this piece in your agent
Get an API keyCopy the text below and paste it into Claude Code, Codex or whichever agent you use. The agent reads the piece and checks it against the repo you have open.
Read "ak-webmcp: turn your existing pages and forms into WebMCP tools" on modernEngineer and apply it to this repo.
1. Call the content_get tool of the modernengineer MCP server with locale "en", slug "ak-webmcp". If the modernengineer MCP server is not connected, stop and walk me through connecting it from https://modernengineer.dev/en/mcp.
2. Summarize the main steps of the piece and point out which apply to this repo.
3. Propose concrete changes and ask me before editing any file.Connect MCP in Claude Code (once)
claude mcp add --transport http modernengineer \
https://api.modernengineer.dev/mcp \
--header "Authorization: Bearer <API key>"Reading the full piece over MCP needs an API key from a subscriber account or one that bought this guide. Without access, the agent only gets the opening.
- Version
- v1.0.0
- Updated
- 22/10/2026
- Licence
- All rights reserved
- Slug
- ak-webmcp
