# WebMCP plugin
Agent skill for making websites **WebMCP-compatible**: ping-pong which paths to expose, then ship **Declarative vs Imperative vs Bridge**.
Surface support today: [Codex](http://learn.chatgpt.com/docs/webmcp), Chrome 149 and Edge 150 origin trials, experimental Brave Leo; Firefox and Safari are still positions-only ([implementation status](https://github.com/webmachinelearning/webmcp/blob/main/implementation-status.md)).
The repo is packaged as a **plugin** for Claude Code, Codex, and as a [skills.sh](https://skills.sh) skill.
## Install
### Cursor / skills.sh
```bash
npx skills add alpic-ai/webmcp --skill webmcp
```
### Claude Code
```bash
claude plugin marketplace add alpic-ai/webmcp
claude plugin install webmcp@webmcp
```
Validate before submitting:
```bash
claude plugin validate .
```
### Codex
Add this repo as a marketplace source, then install **WebMCP** from the Plugins Directory.
```bash
codex plugin marketplace add alpic-ai/webmcp
```
## What’s inside
```
skills/webmcp/
├── SKILL.md # Ping-pong + Declarative vs Imperative vs Bridge
└── references/
├── strategies.md # Declarative vs Imperative vs Bridge
├── declarative-forms.md # toolname / tooldescription on existing forms
├── tool-design.md # Dedicated imperative paths
├── runtime.md # Native vs polyfill, iframes
├── frameworks.md # Vanilla, React/usewebmcp, Next, Vue
├── proxy-existing-mcp.md # webmcp-proxy for existing MCP servers
├── verify.md # Chrome DevTools MCP dogfood
└── security.md # Session inheritance, injection
```
## Why this exists
1. **Spec-aligned** — `document.modelContext` first, navigator fallback
2. **Path-first** — agent ping-pongs strategies and paths before coding
3. **Three strategies** — Declarative vs Imperative vs Bridge (`webmcp-proxy`)
4. **Verification-first** — Chrome DevTools MCP `list_webmcp_tools` / `execute_webmcp_tool`
## Example prompts after install
- “Make this site WebMCP compatible — help me choose what to expose”
- “Annotate our existing forms as WebMCP tools”
- “Put our MCP server on the website with webmcp-proxy”
- “Expose checkout as one dedicated WebMCP tool from step 1”
## References
- [W3C WebMCP draft](https://webmachinelearning.github.io/webmcp/)
- [Chrome Imperative API](https://developer.chrome.com/docs/ai/webmcp/imperative-api)
- [Chrome Declarative API](https://developer.chrome.com/docs/ai/webmcp/declarative-api)
- [Chrome best practices](https://developer.chrome.com/docs/ai/webmcp/best-practices)
- [webmcp-proxy](https://www.npmjs.com/package/webmcp-proxy)
- [usewebmcp](https://www.npmjs.com/package/usewebmcp)
## License
MIT