{"id":47614194,"url":"https://github.com/WebMCP-org/npm-packages","last_synced_at":"2026-04-16T21:00:49.075Z","repository":{"id":310119963,"uuid":"1038654159","full_name":"WebMCP-org/npm-packages","owner":"WebMCP-org","description":"NPM packages for MCP-B: Transport layers, React hooks, and browser tools for the Model Context Protocol","archived":false,"fork":false,"pushed_at":"2026-04-12T10:15:01.000Z","size":11057,"stargazers_count":47,"open_issues_count":17,"forks_count":7,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-04-14T22:14:58.754Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WebMCP-org.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-15T15:39:56.000Z","updated_at":"2026-04-10T20:33:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"a5be4c3d-d50a-4c84-930f-68afb1ff0c47","html_url":"https://github.com/WebMCP-org/npm-packages","commit_stats":null,"previous_names":["webmcp-org/npm-packages"],"tags_count":170,"template":false,"template_full_name":null,"purl":"pkg:github/WebMCP-org/npm-packages","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebMCP-org%2Fnpm-packages","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebMCP-org%2Fnpm-packages/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebMCP-org%2Fnpm-packages/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebMCP-org%2Fnpm-packages/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebMCP-org","download_url":"https://codeload.github.com/WebMCP-org/npm-packages/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebMCP-org%2Fnpm-packages/sbom","scorecard":{"id":1242389,"data":{"date":"2026-01-25T20:19:42Z","repo":{"name":"github.com/WebMCP-org/npm-packages","commit":"9c5b2d60cbaf5157e2b640956ac44fcf1cd51ea5"},"scorecard":{"version":"v5.3.0","commit":"c22063e786c11f9dd714d777a687ff7c4599b600"},"score":7.1,"checks":[{"name":"Dependency-Update-Tool","score":10,"reason":"update tool detected","details":["Info: detected update tool: Dependabot: .github/dependabot.yml:1","Info: detected update tool: RenovateBot: renovate.json:1"],"documentation":{"short":"Determines if the project uses a dependency update tool.","url":"https://github.com/ossf/scorecard/blob/c22063e786c11f9dd714d777a687ff7c4599b600/docs/checks.md#dependency-update-tool"}},{"name":"Code-Review","score":0,"reason":"Found 0/19 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/c22063e786c11f9dd714d777a687ff7c4599b600/docs/checks.md#code-review"}},{"name":"Security-Policy","score":10,"reason":"security policy file detected","details":["Info: security policy file detected: SECURITY.md:1","Info: Found linked content: SECURITY.md:1","Info: Found disclosure, vulnerability, and/or timelines in security policy: SECURITY.md:1","Info: Found text in security policy: SECURITY.md:1"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/c22063e786c11f9dd714d777a687ff7c4599b600/docs/checks.md#security-policy"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/c22063e786c11f9dd714d777a687ff7c4599b600/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":10,"reason":"30 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/c22063e786c11f9dd714d777a687ff7c4599b600/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/c22063e786c11f9dd714d777a687ff7c4599b600/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: topLevel 'contents' permission set to 'write': .github/workflows/changesets.yml:12","Info: topLevel 'contents' permission set to 'read': .github/workflows/ci.yml:13","Info: topLevel 'contents' permission set to 'read': .github/workflows/claude-webmcp-test.yml:30","Warn: topLevel 'security-events' permission set to 'write': .github/workflows/codeql.yml:13","Info: topLevel 'contents' permission set to 'read': .github/workflows/codeql.yml:14","Info: topLevel 'contents' permission set to 'read': .github/workflows/e2e.yml:13","Info: topLevel 'contents' permission set to 'read': .github/workflows/labeler.yml:8","Warn: topLevel 'contents' permission set to 'write': .github/workflows/release-canary.yml:14","Info: topLevel permissions set to 'read-all': .github/workflows/scorecard.yml:11","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/c22063e786c11f9dd714d777a687ff7c4599b600/docs/checks.md#token-permissions"}},{"name":"Pinned-Dependencies","score":9,"reason":"dependency not pinned by hash detected -- score normalized to 9","details":["Warn: npmCommand not pinned by hash: templates/site-package/scripts/setup.sh:23","Info: 29 out of 29 GitHub-owned GitHubAction dependencies pinned","Info: 16 out of 16 third-party GitHubAction dependencies pinned","Info: 0 out of 1 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/c22063e786c11f9dd714d777a687ff7c4599b600/docs/checks.md#pinned-dependencies"}},{"name":"Packaging","score":10,"reason":"packaging workflow detected","details":["Info: Project packages its releases by way of GitHub Actions.: .github/workflows/release-canary.yml:21"],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/c22063e786c11f9dd714d777a687ff7c4599b600/docs/checks.md#packaging"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/c22063e786c11f9dd714d777a687ff7c4599b600/docs/checks.md#cii-best-practices"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/c22063e786c11f9dd714d777a687ff7c4599b600/docs/checks.md#license"}},{"name":"Fuzzing","score":10,"reason":"project is fuzzed","details":["Info: TypeScriptPropertyBasedTesting integration found: packages/global/src/validation.property.test.ts:7","Info: TypeScriptPropertyBasedTesting integration found: packages/global/src/validation.property.test.ts:7"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/c22063e786c11f9dd714d777a687ff7c4599b600/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":8,"reason":"5 out of the last 5 releases have a total of 5 signed artifacts.","details":["Info: signed release artifact: mcp-b-webmcp-ts-sdk-2.0.0-beta.20260125195516.tar.gz.sig: https://github.com/WebMCP-org/npm-packages/releases/tag/%40mcp-b/webmcp-ts-sdk%402.0.0-beta.20260125195516","Info: signed release artifact: mcp-b-transports-2.0.1-beta.20260125195516.tar.gz.sig: https://github.com/WebMCP-org/npm-packages/releases/tag/%40mcp-b/transports%402.0.1-beta.20260125195516","Info: signed release artifact: mcp-b-smart-dom-reader-1.1.0-beta.20260125195516.tar.gz.sig: https://github.com/WebMCP-org/npm-packages/releases/tag/%40mcp-b/smart-dom-reader%401.1.0-beta.20260125195516","Info: signed release artifact: mcp-b-react-webmcp-1.0.2-beta.20260125195516.tar.gz.sig: https://github.com/WebMCP-org/npm-packages/releases/tag/%40mcp-b/react-webmcp%401.0.2-beta.20260125195516","Info: signed release artifact: mcp-b-mcp-iframe-0.0.0-beta.20260125195516.tar.gz.sig: https://github.com/WebMCP-org/npm-packages/releases/tag/%40mcp-b/mcp-iframe%400.0.0-beta.20260125195516","Warn: release artifact @mcp-b/webmcp-ts-sdk@2.0.0-beta.20260125195516 does not have provenance: https://api.github.com/repos/WebMCP-org/npm-packages/releases/279768159","Warn: release artifact @mcp-b/transports@2.0.1-beta.20260125195516 does not have provenance: https://api.github.com/repos/WebMCP-org/npm-packages/releases/279768157","Warn: release artifact @mcp-b/smart-dom-reader@1.1.0-beta.20260125195516 does not have provenance: https://api.github.com/repos/WebMCP-org/npm-packages/releases/279768148","Warn: release artifact @mcp-b/react-webmcp@1.0.2-beta.20260125195516 does not have provenance: https://api.github.com/repos/WebMCP-org/npm-packages/releases/279768143","Warn: release artifact @mcp-b/mcp-iframe@0.0.0-beta.20260125195516 does not have provenance: https://api.github.com/repos/WebMCP-org/npm-packages/releases/279768137"],"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/c22063e786c11f9dd714d777a687ff7c4599b600/docs/checks.md#signed-releases"}},{"name":"Vulnerabilities","score":0,"reason":"12 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-wqch-xfxh-vrr4","Warn: Project is vulnerable to: GHSA-73rr-hh4g-fpgx","Warn: Project is vulnerable to: GHSA-3vhc-576x-3qv4","Warn: Project is vulnerable to: GHSA-mh29-5h37-fv8m","Warn: Project is vulnerable to: GHSA-xxjr-mmjv-4gpg","Warn: Project is vulnerable to: GHSA-6rw7-vpxm-498p","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-g9mf-h72j-4rw9","Warn: Project is vulnerable to: GHSA-93m4-6634-74q7","Warn: Project is vulnerable to: GHSA-g4jq-h2w9-997c","Warn: Project is vulnerable to: GHSA-jqfw-vq24-v9c3","Warn: Project is vulnerable to: GHSA-36p8-mvp6-cv38"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/c22063e786c11f9dd714d777a687ff7c4599b600/docs/checks.md#vulnerabilities"}},{"name":"SAST","score":10,"reason":"SAST tool is run on all commits","details":["Info: SAST configuration detected: CodeQL","Info: all commits (15) are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/c22063e786c11f9dd714d777a687ff7c4599b600/docs/checks.md#sast"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: some github tokens can't read classic branch protection rules: https://github.com/ossf/scorecard-action/blob/main/docs/authentication/fine-grained-auth-token.md","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/c22063e786c11f9dd714d777a687ff7c4599b600/docs/checks.md#branch-protection"}},{"name":"CI-Tests","score":10,"reason":"15 out of 15 merged PRs checked by a CI test -- score normalized to 10","details":null,"documentation":{"short":"Determines if the project runs tests before pull requests are merged.","url":"https://github.com/ossf/scorecard/blob/c22063e786c11f9dd714d777a687ff7c4599b600/docs/checks.md#ci-tests"}},{"name":"Contributors","score":6,"reason":"project has 2 contributing companies or organizations -- score normalized to 6","details":["Info: found contributions from: anthropics, mcp-b"],"documentation":{"short":"Determines if the project has a set of contributors from multiple organizations (e.g., companies).","url":"https://github.com/ossf/scorecard/blob/c22063e786c11f9dd714d777a687ff7c4599b600/docs/checks.md#contributors"}}]},"last_synced_at":"2026-01-25T20:29:22.447Z","repository_id":310119963,"created_at":"2026-01-25T20:29:22.447Z","updated_at":"2026-01-25T20:29:22.447Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31870522,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T15:24:51.572Z","status":"online","status_checked_at":"2026-04-16T02:00:06.042Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-04-01T21:01:47.314Z","updated_at":"2026-04-16T21:00:49.068Z","avatar_url":"https://github.com/WebMCP-org.png","language":"HTML","funding_links":[],"categories":["πŸ“¦ Libraries, SDKs \u0026 Polyfills"],"sub_categories":["MCP-B Ecosystem"],"readme":"\u003cdiv align=\"center\"\u003e\n\n# @mcp-b\n\n**Polyfill and MCP bridge for the [Web Model Context API](https://webmachinelearning.github.io/webmcp/) (`navigator.modelContext`)**\n\n\u003cp\u003e\n \u003ca href=\"https://webmachinelearning.github.io/webmcp/\"\u003e\u003cimg src=\"https://img.shields.io/badge/W3C-WebMCP%20Spec-005A9C?style=flat-square\" alt=\"W3C WebMCP Spec\"\u003e\u003c/a\u003e\n \u003ca href=\"https://www.npmjs.com/org/mcp-b\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@mcp-b/global?style=flat-square\u0026label=latest\" alt=\"npm version\"\u003e\u003c/a\u003e\n \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\u003cimg src=\"https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square\" alt=\"License: MIT\"\u003e\u003c/a\u003e\n \u003ca href=\"https://www.typescriptlang.org/\"\u003e\u003cimg src=\"https://img.shields.io/badge/TypeScript-5.8+-blue?style=flat-square\" alt=\"TypeScript\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n \u003ca href=\"https://github.com/WebMCP-org/npm-packages/actions/workflows/ci.yml\"\u003e\u003cimg src=\"https://github.com/WebMCP-org/npm-packages/actions/workflows/ci.yml/badge.svg\" alt=\"CI\"\u003e\u003c/a\u003e\n \u003ca href=\"https://codecov.io/gh/WebMCP-org/npm-packages\"\u003e\u003cimg src=\"https://codecov.io/gh/WebMCP-org/npm-packages/branch/main/graph/badge.svg\" alt=\"codecov\"\u003e\u003c/a\u003e\n \u003ca href=\"https://github.com/WebMCP-org/npm-packages/actions/workflows/e2e.yml\"\u003e\u003cimg src=\"https://github.com/WebMCP-org/npm-packages/actions/workflows/e2e.yml/badge.svg\" alt=\"E2E Tests\"\u003e\u003c/a\u003e\n \u003ca href=\"https://scorecard.dev/viewer/?uri=github.com/WebMCP-org/npm-packages\"\u003e\u003cimg src=\"https://img.shields.io/ossf-scorecard/github.com/WebMCP-org/npm-packages?label=openssf%20scorecard\" alt=\"OpenSSF Scorecard\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003c/div\u003e\n\n---\n\n## The Web Standard\n\nThe [Web Model Context API](https://webmachinelearning.github.io/webmcp/) is a [W3C Community Group](https://www.w3.org/community/webmachinelearning/) draft spec. It makes every browser tab a **tool source** β€” web pages register tools that AI agents can discover and call:\n\n```\nnavigator.modelContext\nβ”œβ”€β”€ .registerTool(tool) Register a tool for AI agents\nβ”œβ”€β”€ .unregisterTool(name) Remove a tool\nβ”œβ”€β”€ .provideContext(options) Set tools (replaces existing)\n└── .clearContext() Remove all tools\n```\n\nMCP-b **polyfills** that API for all browsers today, and **bridges** it to the full [Model Context Protocol](https://modelcontextprotocol.io/) β€” turning that tool source into a complete MCP server with prompts, resources, sampling, and transports.\n\n\u003e Built by [MCP-b](https://docs.mcp-b.ai). Not an official W3C or MCP project.\n\n## Getting Started\n\n### 1. Use the web standard directly\n\nIf you're running Chrome with [`--enable-experimental-web-platform-features`](./e2e/web-standards-showcase/CHROMIUM_FLAGS.md), `navigator.modelContext` is already there. Just use it:\n\nAdd `@mcp-b/webmcp-types` (`pnpm add -D @mcp-b/webmcp-types`) for full input/output schema inference:\n\n```ts\nnavigator.modelContext.registerTool({\n name: 'add_todo',\n description: 'Add a new todo item',\n inputSchema: {\n type: 'object',\n properties: { title: { type: 'string' }, done: { type: 'boolean' } },\n required: ['title'],\n } as const, // ← args inferred: { title: string; done?: boolean }\n outputSchema: {\n // ← optional β€” infers return type\n type: 'object',\n properties: { id: { type: 'number' }, title: { type: 'string' } },\n required: ['id', 'title'],\n } as const,\n execute: async (args) =\u003e ({ id: Date.now(), title: args.title }),\n});\n```\n\n### 2. Polyfill it\n\nWant it to work in **any browser** without the Chrome flag? Add the polyfill β€” same API, same code:\n\n```ts\nimport { initializeWebMCPPolyfill } from '@mcp-b/webmcp-polyfill'; // pnpm add @mcp-b/webmcp-polyfill\n\ninitializeWebMCPPolyfill(); // no-op if native support exists\n\nnavigator.modelContext.registerTool({\n name: 'get_page_title',\n description: 'Returns the current page title',\n inputSchema: { type: 'object', properties: {} },\n execute: async () =\u003e ({\n content: [{ type: 'text', text: document.title }],\n }),\n});\n```\n\nOr with React: `pnpm add usewebmcp`\n\n```tsx\nimport { useWebMCP } from 'usewebmcp';\n\nfunction PageTitle() {\n useWebMCP({\n name: 'get_page_title',\n description: 'Returns the current page title',\n execute: async () =\u003e ({ title: document.title }),\n });\n // ...\n}\n```\n\n### 3. Full MCP server\n\nNeed the full [Model Context Protocol](https://modelcontextprotocol.io/) β€” prompts, resources, sampling, transports, interop with Claude Desktop / Cursor / any MCP client? Use `@mcp-b/global`:\n\n```ts\nimport '@mcp-b/global'; // pnpm add @mcp-b/global\n\n// Same registerTool API β€” now backed by a full MCP server\nnavigator.modelContext.registerTool({\n name: 'add_todo',\n description: 'Add a new todo item',\n inputSchema: {\n type: 'object',\n properties: {\n title: { type: 'string', description: 'Todo title' },\n },\n required: ['title'],\n },\n execute: async (args) =\u003e {\n const todo = { id: Date.now(), ...args };\n return { content: [{ type: 'text', text: JSON.stringify(todo) }] };\n },\n});\n```\n\nOr as a script tag (zero build step):\n\n```html\n\u003cscript src=\"https://unpkg.com/@mcp-b/global/dist/index.iife.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n navigator.modelContext.registerTool({\n /* ... */\n });\n\u003c/script\u003e\n```\n\nOr with React: `pnpm add @mcp-b/react-webmcp`\n\n```tsx\nimport { useWebMCP } from '@mcp-b/react-webmcp';\n\nfunction TodoApp({ todos, addTodo }) {\n useWebMCP({\n name: 'add_todo',\n description: 'Add a new todo item',\n schema: { title: z.string().describe('Todo title') },\n execute: async ({ title }) =\u003e {\n addTodo(title);\n return { success: true };\n },\n });\n\n return (\n \u003cul\u003e\n {todos.map((t) =\u003e (\n \u003cli key={t.id}\u003e{t.title}\u003c/li\u003e\n ))}\n \u003c/ul\u003e\n );\n}\n```\n\n## Call Those Tools\n\nThree ways for AI agents to discover and call your tools:\n\n```\nβ”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”\nβ”‚ Your website β”‚\nβ”‚ navigator.modelContext.registerTool({ ... }) β”‚\nβ””β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”˜\n β”‚ β”‚ β”‚\n β”Œβ”€β”€β”€β”€β–Όβ”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β–Όβ”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β–Όβ”€β”€β”€β”€β”€β”€β”\n β”‚ MCP-B β”‚ β”‚ Chrome Native β”‚ β”‚ Local β”‚\n β”‚Extension β”‚ β”‚ (experimental) β”‚ β”‚ Relay β”‚\n β””β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”˜\n β”‚ β”‚ β”‚\n β–Ό β–Ό β–Ό\n AI agent in Browser's Claude Desktop\n browser built-in agent Cursor, VS Code\n```\n\n**MCP-b Extension** β€” Install from [docs.mcp-b.ai/extension](https://docs.mcp-b.ai/extension). Discovers tools on any page.\n\n**Chrome Native** β€” Enable at `chrome://flags` β†’ _Experimental Web Platform features_, or:\n\n```bash\ngoogle-chrome --enable-experimental-web-platform-features\n```\n\nSee [Chromium flags reference](./e2e/web-standards-showcase/CHROMIUM_FLAGS.md) for macOS / Windows / Linux commands.\n\n**Local Relay** β€” Add to your MCP client config (Claude Desktop, Cursor, etc.):\n\n```json\n{\n \"mcpServers\": {\n \"webmcp-local-relay\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@mcp-b/webmcp-local-relay@latest\"]\n }\n }\n}\n```\n\nAny website running `@mcp-b/global` becomes callable from your desktop AI agent. See the [relay README](./packages/webmcp-local-relay) for details.\n\n## Which Package?\n\n| I want to… | Package |\n| ----------------------------------- | -------------------------------------------------------------- |\n| Add tools to my site (simplest) | [`@mcp-b/global`](./packages/global) |\n| Just the polyfill, no MCP bridge | [`@mcp-b/webmcp-polyfill`](./packages/webmcp-polyfill) |\n| Register tools from React | [`@mcp-b/react-webmcp`](./packages/react-webmcp) |\n| Forward tools to local AI agents | [`@mcp-b/webmcp-local-relay`](./packages/webmcp-local-relay) |\n| Build a Chrome extension with tools | [`@mcp-b/extension-tools`](./packages/extension-tools) |\n| Control Chrome from an AI agent | [`@mcp-b/chrome-devtools-mcp`](./packages/chrome-devtools-mcp) |\n| Just the TypeScript types | [`@mcp-b/webmcp-types`](./packages/webmcp-types) |\n\n---\n\n## Installation\n\n```bash\n# Full runtime: polyfill + MCP bridge (most users start here)\npnpm add @mcp-b/global\n\n# Strict WebMCP core polyfill only (no MCP extensions)\npnpm add @mcp-b/webmcp-polyfill\n\n# TypeScript definitions (dev dependency)\npnpm add -D @mcp-b/webmcp-types\n\n# React hooks for full runtime\npnpm add @mcp-b/react-webmcp zod\n\n# React hooks for strict WebMCP core only\npnpm add usewebmcp zod\n\n# Transport layer (custom integrations)\npnpm add @mcp-b/transports\n\n# Chrome Extension API tools\npnpm add @mcp-b/extension-tools\n\n# DOM extraction for AI\npnpm add @mcp-b/smart-dom-reader\n```\n\n## All Packages\n\n### Core\n\n| Package | Version | Description |\n| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |\n| [@mcp-b/webmcp-polyfill](./packages/webmcp-polyfill) | [![npm](https://img.shields.io/npm/v/@mcp-b/webmcp-polyfill)](https://www.npmjs.com/package/@mcp-b/webmcp-polyfill) | `navigator.modelContext` polyfill β€” strict spec-aligned surface |\n| [@mcp-b/webmcp-types](./packages/webmcp-types) | [![npm](https://img.shields.io/npm/v/@mcp-b/webmcp-types)](https://www.npmjs.com/package/@mcp-b/webmcp-types) | TypeScript definitions for the WebMCP core API |\n| [@mcp-b/global](./packages/global) | [![npm](https://img.shields.io/npm/v/@mcp-b/global)](https://www.npmjs.com/package/@mcp-b/global) | Full runtime β€” polyfill + MCP bridge (prompts, resources, sampling) |\n| [@mcp-b/webmcp-ts-sdk](./packages/webmcp-ts-sdk) | [![npm](https://img.shields.io/npm/v/@mcp-b/webmcp-ts-sdk)](https://www.npmjs.com/package/@mcp-b/webmcp-ts-sdk) | Browser-adapted MCP TypeScript SDK with dynamic tool registration |\n\n### Transports \u0026 Composition\n\n| Package | Version | Description |\n| ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |\n| [@mcp-b/transports](./packages/transports) | [![npm](https://img.shields.io/npm/v/@mcp-b/transports)](https://www.npmjs.com/package/@mcp-b/transports) | `postMessage`, iframe, and Chrome extension transports |\n| [@mcp-b/mcp-iframe](./packages/mcp-iframe) | [![npm](https://img.shields.io/npm/v/@mcp-b/mcp-iframe)](https://www.npmjs.com/package/@mcp-b/mcp-iframe) | `\u003cmcp-iframe\u003e` web component β€” surfaces iframe tools to the parent page |\n| [@mcp-b/webmcp-local-relay](./packages/webmcp-local-relay) | [![npm](https://img.shields.io/npm/v/@mcp-b/webmcp-local-relay)](https://www.npmjs.com/package/@mcp-b/webmcp-local-relay) | Localhost relay β€” forwards website tools to Claude Desktop, Cursor, etc. |\n\n### React\n\n| Package | Version | Description |\n| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |\n| [@mcp-b/react-webmcp](./packages/react-webmcp) | [![npm](https://img.shields.io/npm/v/@mcp-b/react-webmcp)](https://www.npmjs.com/package/@mcp-b/react-webmcp) | React hooks for full runtime (register tools + consume MCP servers) |\n| [usewebmcp](./packages/usewebmcp) | [![npm](https://img.shields.io/npm/v/usewebmcp)](https://www.npmjs.com/package/usewebmcp) | React hooks for strict WebMCP core only |\n\n### Browser Tooling\n\n| Package | Version | Description |\n| ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |\n| [@mcp-b/extension-tools](./packages/extension-tools) | [![npm](https://img.shields.io/npm/v/@mcp-b/extension-tools)](https://www.npmjs.com/package/@mcp-b/extension-tools) | Pre-built MCP tools for Chrome Extension APIs (tabs, bookmarks, history, …) |\n| [@mcp-b/smart-dom-reader](./packages/smart-dom-reader) | [![npm](https://img.shields.io/npm/v/@mcp-b/smart-dom-reader)](https://www.npmjs.com/package/@mcp-b/smart-dom-reader) | Token-efficient DOM extraction for AI agents |\n| [@mcp-b/chrome-devtools-mcp](./packages/chrome-devtools-mcp) | [![npm](https://img.shields.io/npm/v/@mcp-b/chrome-devtools-mcp)](https://www.npmjs.com/package/@mcp-b/chrome-devtools-mcp) | MCP server for Chrome DevTools with WebMCP integration |\n\n\u003cdetails\u003e\n\u003csummary\u003eDeprecated packages\u003c/summary\u003e\n\n| Package | Status | Migration |\n| ------------------------------ | ---------- | ---------------------------------------------------------- |\n| ~~@mcp-b/mcp-react-hooks~~ | Deprecated | Use [@mcp-b/react-webmcp](./packages/react-webmcp) instead |\n| ~~@mcp-b/mcp-react-hook-form~~ | Removed | Use custom `useWebMCP` wrappers |\n\n\u003c/details\u003e\n\n## Architecture\n\n```\nβ”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”\nβ”‚ Your web app β”‚\nβ”‚ navigator.modelContext.registerTool({ ... }) β”‚\nβ”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ @mcp-b/global ──────────────────────────────\nβ”‚ MCP bridge: prompts, resources, sampling, elicitation β”‚\nβ”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ @mcp-b/webmcp-ts-sdk ───────────────────────\nβ”‚ BrowserMcpServer β€” wraps native/polyfill context β”‚\nβ”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ @mcp-b/webmcp-polyfill ─────────────────────\nβ”‚ Strict WebMCP core (registerTool, provideContext, …) β”‚\nβ”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€\nβ”‚ Native browser API (when available) β”‚\nβ””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜\n β–² β–²\n β”‚ postMessage / extension β”‚ WebSocket\n β–Ό β–Ό\n AI agent in browser Local AI agent\n (extension, tab) (Claude Desktop, Cursor)\n```\n\n### Dependency Graph\n\n```\nwebmcp-types (canonical type definitions)\nβ”œβ”€β”€ webmcp-polyfill (canonical runtime polyfill)\nβ”œβ”€β”€ webmcp-ts-sdk (TypeScript SDK adapter)\nβ”œβ”€β”€ transports (browser transports)\nβ”‚ β”œβ”€β”€ mcp-iframe (iframe custom element)\nβ”‚ └── global (full MCP-B runtime)\nβ”‚ └── react-webmcp (React hooks for MCP-B)\n└── usewebmcp (React hooks for strict core)\n```\n\nStandalone packages: `extension-tools`, `smart-dom-reader`, `chrome-devtools-mcp`, `webmcp-local-relay`.\n\n## Development\n\n```bash\ngit clone https://github.com/WebMCP-org/npm-packages.git\ncd npm-packages\npnpm install\npnpm build\n```\n\n| Command | What it does |\n| --------------------------- | --------------------------------- |\n| `pnpm build` | Build all packages |\n| `pnpm typecheck` | Type-check all packages |\n| `pnpm check` | Lint + format (Biome) |\n| `pnpm test:unit` | Unit tests |\n| `pnpm test:e2e` | E2E tests (Playwright) |\n| `pnpm test` | All tests |\n| `pnpm --filter \u003cpkg\u003e build` | Build a single package |\n| `pnpm --filter \u003cpkg\u003e test` | Test a single package |\n| `pnpm changeset` | Create a changeset for versioning |\n\n**Prerequisites:** Node.js \u003e= 22.12 (see `.nvmrc`), pnpm \u003e= 10\n\n## Documentation\n\n| Document | Purpose |\n| ------------------------------------------------------------------ | --------------------------------------------------- |\n| [CONTRIBUTING.md](./CONTRIBUTING.md) | How to contribute: setup, PR process, commit format |\n| [CLAUDE.md](./CLAUDE.md) | Quick reference for AI agents working in this repo |\n| [Package Philosophy](./docs/MCPB_PACKAGE_PHILOSOPHY.md) | Package boundaries and layering model |\n| [Testing Philosophy](./docs/TESTING_PHILOSOPHY.md) | Test layers, mocking policy, coverage expectations |\n| [E2E Testing](./docs/TESTING.md) | Playwright setup, test apps, debugging |\n| [@mcp-b/global guide](./docs/global-guide.md) | Advanced usage for the full runtime |\n| [@mcp-b/react-webmcp guide](./docs/react-webmcp-guide.md) | Advanced React patterns |\n| [WebMCP Alignment Matrix](./docs/plans/WEBMCP_ALIGNMENT_MATRIX.md) | Spec vs native vs polyfill parity tracking |\n| [AI Contribution Manifesto](./docs/AI_CONTRIBUTION_MANIFESTO.md) | Safety rules and code quality bar |\n| [Relevant Links](./docs/RELEVANT_LINKS.md) | Curated external best practices for contributors |\n\n## Contributing\n\nContributions welcome β€” see [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines.\n\n## License\n\n[MIT](./LICENSE)\n\n## Links\n\n- [MCP-b Documentation](https://docs.mcp-b.ai)\n- [MCP-b Browser Extension](https://docs.mcp-b.ai/extension)\n- [W3C WebMCP Spec](https://webmachinelearning.github.io/webmcp/)\n- [W3C Web Machine Learning Community Group](https://www.w3.org/community/webmachinelearning/)\n- [Model Context Protocol Specification](https://modelcontextprotocol.io/)\n- [Chromium WebMCP Implementation](./e2e/web-standards-showcase/CHROMIUM_FLAGS.md)\n- [npm: @mcp-b](https://www.npmjs.com/org/mcp-b)\n- [GitHub Repository](https://github.com/WebMCP-org/npm-packages)\n- [Issue Tracker](https://github.com/WebMCP-org/npm-packages/issues)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWebMCP-org%2Fnpm-packages","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FWebMCP-org%2Fnpm-packages","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWebMCP-org%2Fnpm-packages/lists"}