MCP-B NPM Packages 📦

This monorepo contains the official NPM packages for MCP-B (Model Context Protocol for Browsers). These packages provide the core functionality for implementing MCP in browser environments.

📥 Installation

Install the packages you need via npm, yarn, or pnpm:

# Core transport layer (required)
npm install @mcp-b/transports

# React integration
npm install @mcp-b/mcp-react-hooks

# Chrome Extension API tools
npm install @mcp-b/extension-tools

📦 Available Packages

| Package | NPM | Description | Documentation | |---------|-----|-------------|---------------| | @mcp-b/transports | | Browser-specific MCP transport implementations | Docs | | @mcp-b/mcp-react-hooks | | React hooks for MCP integration | Docs | | @mcp-b/extension-tools | | MCP tools for Chrome Extension APIs | Docs | | @mcp-b/mcp-react-hook-form | | React Hook Form integration for MCP | Docs | | @mcp-b/global | Internal | Global type definitions | Internal use |

🚀 Quick Start

Basic Usage with Vanilla JavaScript

import { TabServerTransport } from "@mcp-b/transports";
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";

// Create MCP server
const server = new McpServer({
  name: "my-website",
  version: "1.0.0",
});

// Add tools
server.tool("getTodos", "Get all todos", {}, async () => {
  // Your tool implementation
  return { content: [{ type: "text", text: "Todo items..." }] };
});

// Connect transport
await server.connect(new TabServerTransport({ allowedOrigins: ["*"] }));

React Integration

import { useMcpClient } from "@mcp-b/mcp-react-hooks";

function MyComponent() {
  const { client, connected, tools } = useMcpClient();
  
  // Use MCP tools in your React app
  const handleClick = async () => {
    const result = await client.callTool("getTodos", {});
    console.log(result);
  };
  
  return <button onClick={handleClick}>Get Todos</button>;
}

🏗️ Architecture

These packages implement the Model Context Protocol for browser environments:

• Transports: Handle communication between MCP servers and clients using browser-specific mechanisms (postMessage, Chrome runtime messaging)
• React Hooks: Provide React-friendly APIs for MCP integration
• Extension Tools: Auto-generated tools for Chrome Extension APIs
• React Hook Form: Integration with React Hook Form for form handling

🔧 Development

This is a pnpm workspace monorepo using Turbo for build orchestration.

Prerequisites

• Node.js >= 22.12 (see .nvmrc)
• pnpm >= 10.0.0

Getting Started

# Clone the repository
git clone https://github.com/WebMCP-org/npm-packages.git
cd npm-packages

# Install dependencies
pnpm install

# Build all packages
pnpm build

# Development mode with watch
pnpm dev

Available Scripts

| Script | Description | |--------|-------------| | pnpm build | Build all packages | | pnpm dev | Start development mode with watch | | pnpm typecheck | Run TypeScript type checking | | pnpm check | Run Biome linting and formatting (with fixes) | | pnpm check:ci | Run Biome checks (CI mode) | | pnpm changeset | Create a new changeset | | pnpm changeset:version | Update versions based on changesets | | pnpm changeset:publish | Build and publish packages to npm |

Code Quality

• Linting & Formatting: We use Biome for fast, unified linting and formatting
• Pre-commit Hooks: Automatic formatting via Husky and lint-staged
• Type Safety: Full TypeScript with strict mode enabled
• CI/CD: GitHub Actions for automated testing and publishing

Testing Locally

• GitHub Actions: Test workflows locally with act
• Unit Tests: Run tests with pnpm test (when implemented)

Publishing

We use changesets for version management:

# 1. Create a changeset for your changes
pnpm changeset

# 2. Commit the changeset file
git add .changeset/*.md
git commit -m "Add changeset"

# 3. Push to main branch
git push origin main

# GitHub Actions will automatically:
# - Create a Version PR
# - Update versions when merged
# - Publish to npm

📚 Documentation

• Main MCP-B Documentation
• Examples Repository
• Main WebMCP Repository
• Model Context Protocol Spec

🤝 Contributing

Contributions are welcome! Please see our Contributing Guide for details.

📄 License

MIT - see LICENSE for details.

🔗 Links

• NPM Organization
• GitHub Organization
• Discord Community