MCP-FrontEnd

What is MCP-Frontend?

Current AI agents are Runtime-Blind. They interact with the web through a "straw"—using brittle screen scraping, slow vision models, or surface-level DOM analysis. They can see what a button looks like, but they don't know what it does, what's in the application state, or why an internal validation failed.

Built on the Model Context Protocol (MCP), this infrastructure is accessible both to in-browser agents natively, and to remote agents (like Claude Desktop or cloud-hosted bots) through our session-aware proxy server.

The Current Reality of Browser-Based AI

Building AI agents that interact with web applications is currently a mess of trade-offs. Existing approaches fall short because they treat the UI as a static image or a flat document, ignoring the rich logic underneath.

Where MCP-Frontend Shines

Stop treating AI as an external observer. Start building applications where the AI is an integrated collaborator that understands the context of every click.

The Power of @mcp-fe/react-tools

Standard MCP servers are static. MCP-FE is alive. With our React integration, your AI agent gains new capabilities dynamically based on the user's current view.

// This tool only exists while the ProductDetail component is active
function ProductDetail({ productId }) {
  const { data } = useQuery(['product', productId]);

  useMCPTool(
    'get_current_product_specs',
    'Returns technical specs of the product currently on screen',
    async () => ({
      name: data.name,
      inStock: data.inventory > 0,
      specs: data.technicalDetails
    })
  );

  return <div>...</div>;
}

Quick Start

npm install @mcp-fe/react-tools @mcp-fe/mcp-worker

// For example in rspack.config.json
entry: {
   main: './src/main.tsx',
   'mcp-service-worker': 'node_modules/@mcp-fe/mcp-worker/mcp-service-worker.ts',
   'mcp-shared-worker': 'node_modules/@mcp-fe/mcp-worker/mcp-shared-worker.ts',
},

import { useMCPTool } from '@mcp-fe/react-tools';

function Dashboard() {
  // AI Agent can now ask for internal metrics directly from this component
  useMCPTool('get_internal_metrics', 'Returns current dashboard KPIs', async () => ({
    activeUsers: state.activeUsers,
    systemLoad: state.systemLoad,
  }));

  return <DashboardUI />;
}

Production-Ready Architecture

MCP-Frontend isn't just a prototype; it's a modular system designed to integrate your web app into the global AI ecosystem.

Security & Privacy First

High-Level Architecture

MCP-FE introduces a frontend edge layer that participates in the MCP ecosystem through two complementary access paths:

Local path: In-browser agents can call MCP tools directly through a Web Worker built on existing Web APIs (SharedWorker, ServiceWorker, IndexedDB) — no experimental browser flags required. When native WebMCP is available by default, MCP-FE will adopt it seamlessly.

Remote path (Proxy): The backend MCP server acts as a session-aware proxy, bridging browser context to the network via WebSocket. This allows cloud-hosted agents, or any standard MCP client to query the same real-time frontend state over the wire.

Both paths expose identical tools and context. The developer defines capabilities once; MCP-FE makes them available locally and remotely with zero extra configuration.

Package Ecosystem

MCP-FE is built as a modular ecosystem with packages for different use cases and frameworks:

Roadmap

MCP-FE is currently published as an open-source reference implementation. The focus is on:

• ✅ Core Architecture Validation — Browser-based MCP servers working in production
• ✅ Package Ecosystem — Modular libraries for different frameworks and use cases
• ✅ Docker Distribution — Ready-to-use proxy server container
• 🔄 Production readiness — Performance optimization, security hardening
• 🔄 Community Adoption — Gathering feedback and real-world usage patterns

Ready to give your AI eyes?

Start building AI-Native applications today