NPM Packages
NPM packages for MCP-B: Transport layers, React hooks, and browser tools for the Model Context Protocol
What is NPM Packages?
NPM Packages is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to npm packages for mcp-b: transport layers, react hooks, and browser tools for the model context protocol
NPM packages for MCP-B: Transport layers, React hooks, and browser tools for the Model Context Protocol
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- NPM packages for MCP-B: Transport layers, React hooks, and b
Use Cases
Maintainer
Works with
Installation
NPM
npx -y @mcp-b/chrome-devtools-mcpManual Installation
npx -y @mcp-b/chrome-devtools-mcpConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use NPM Packages
The MCP-B npm packages provide the transport layers, React hooks, and browser tools needed to embed Model Context Protocol capabilities directly into web applications and browser extensions. The suite includes @mcp-b/chrome-devtools-mcp for Chrome DevTools integration, @mcp-b/react-webmcp for React hook-based tool registration, and @mcp-b/global for the full MCP bridge runtime. Frontend developers can use these packages to expose web-page tools to AI agents via the navigator.modelContext API, enabling AI assistants to interact with live browser state, DOM data, and in-page actions.
Prerequisites
- Node.js 18 or later and npm or pnpm installed
- A Chromium-based browser (Chrome or Edge) for the Chrome DevTools MCP
- React 18+ if using the @mcp-b/react-webmcp package
- An MCP client such as Claude Desktop or Cursor that supports the configured transport
Install the Chrome DevTools MCP package
The @mcp-b/chrome-devtools-mcp package is the entry point for connecting Claude Desktop to a running Chrome browser session via the Chrome DevTools Protocol.
npx -y @mcp-b/chrome-devtools-mcpInstall web application packages
For embedding MCP tools inside a web app, install the appropriate packages. Use @mcp-b/global for the full runtime or @mcp-b/react-webmcp for React projects.
# Full runtime
pnpm add @mcp-b/global
# React integration
pnpm add @mcp-b/react-webmcp zod
# TypeScript types (dev dependency)
pnpm add -D @mcp-b/webmcp-typesRegister tools in your web application
Use the navigator.modelContext API or the useWebMCP React hook to register tools that AI agents can discover and call. Each tool needs a name, description, input schema, and execute function.
import { useWebMCP } from '@mcp-b/react-webmcp';
useWebMCP({
name: 'get_page_title',
description: 'Returns the current page title',
execute: async () => ({ title: document.title })
});Configure Claude Desktop to use the Chrome DevTools MCP
Add the @mcp-b/chrome-devtools-mcp server to your Claude Desktop configuration so Claude can communicate with your browser through the DevTools Protocol.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "@mcp-b/chrome-devtools-mcp"]
}
}
}Launch Chrome with remote debugging enabled
Start Chrome with the remote debugging port open so the MCP server can connect to it.
# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
# Linux
google-chrome --remote-debugging-port=9222NPM Packages Examples
Client configuration
Add the Chrome DevTools MCP server to claude_desktop_config.json to enable browser interaction from Claude.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "@mcp-b/chrome-devtools-mcp"]
}
}
}Prompts to try
Once connected, use these prompts to interact with live browser state and web-page tools through the MCP-B bridge.
- "What is the current page title and URL in my open Chrome tab?"
- "List all the tools registered on the current web page"
- "Execute the add_todo tool on the current page with the title 'Review pull request'"
- "Get the DOM content of the main article element on this page"Troubleshooting NPM Packages
Chrome DevTools MCP cannot connect to the browser
Make sure Chrome is launched with --remote-debugging-port=9222 before starting the MCP server. Verify the port is open by navigating to http://localhost:9222/json in your browser.
navigator.modelContext is undefined in the web app
Ensure @mcp-b/global or @mcp-b/webmcp-polyfill is imported early in your application entry point (e.g., index.js or main.tsx) before any tool registrations are attempted.
React hook tool registrations are lost on re-render
Wrap useWebMCP calls in a stable component that does not unmount during normal navigation. Tool registrations are tied to the component lifecycle and will be removed if the component unmounts.
Frequently Asked Questions about NPM Packages
What is NPM Packages?
NPM Packages is a Model Context Protocol (MCP) server that npm packages for mcp-b: transport layers, react hooks, and browser tools for the model context protocol It connects AI assistants to external tools and data sources through a standardized interface.
How do I install NPM Packages?
Install via npm with the command: npx -y @mcp-b/chrome-devtools-mcp. Then add the server configuration to your AI client's JSON config file (e.g., claude_desktop_config.json or .cursor/mcp.json).
Which AI clients work with NPM Packages?
NPM Packages works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is NPM Packages free to use?
Yes, NPM Packages is open source and available under the MIT license. You can use it freely in both personal and commercial projects.
NPM Packages Alternatives — Similar Developer Tools Servers
Looking for alternatives to NPM Packages? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.
Ecc
★ 188.2kThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Javaguide
★ 155.8kJava 面试 & 后端通用面试指南，覆盖计算机基础、数据库、分布式、高并发、系统设计与 AI 应用开发
Gemini CLI
★ 104.5kA secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in
Awesome MCP Servers
★ 87.3k⭐ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.
MCP Servers
★ 86.0kModel Context Protocol Servers
CC Switch
★ 77.5kA cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io
Browse More Developer Tools MCP Servers
Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up NPM Packages in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use NPM Packages?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.