Getting Started

Installation

npm install @frontmcp/react react react-dom

yarn add @frontmcp/react react react-dom

The packages bundle for the browser as they are — with Vite 7 and 8 (build and dev server), or any bundler that honors the browser export condition — with no Node polyfills and no aliases. A browser bundler resolves @frontmcp/sdk to its browser build (the browser export condition), which leaves the Node HTTP host (Express) and the stdio transports out of the bundle.

With Vite 7 (Rollup), call create() from a function or a .then() rather than with a top-level await in your entry module: Rollup can place modules the SDK imports lazily in a chunk that imports the entry back, and a top-level await there waits on itself, so create() never settles.

Wrap Your App

Every @frontmcp/react app starts with a FrontMcpProvider. It takes a pre-created DirectMcpServer and manages the MCP client lifecycle.

src/App.tsx

import { create } from '@frontmcp/sdk';
import { FrontMcpProvider } from '@frontmcp/react';
import { GreetTool } from './tools/greet.tool';
import { Dashboard } from './Dashboard';

// Create an in-process MCP server
const server = await create({
  info: { name: 'my-app', version: '1.0.0' },
  tools: [GreetTool],
});

export function App() {
  return (
    <FrontMcpProvider server={server}>
      <Dashboard />
    </FrontMcpProvider>
  );
}

By default the provider auto-connects on mount. Pass autoConnect={false} to connect manually later.

Your First Hook

Use useCallTool to invoke an MCP tool:

src/Dashboard.tsx

import { useCallTool } from '@frontmcp/react';

export function Dashboard() {
  const [callTool, { data, loading, error }] = useCallTool('greet');

  return (
    <div>
      <button onClick={() => callTool({ name: 'Alice' })} disabled={loading}>
        {loading ? 'Calling...' : 'Greet'}
      </button>
      {data?.isError && <p style={{ color: 'red' }}>The tool reported an error</p>}
      {data && <pre>{JSON.stringify(data.structuredContent ?? data.content, null, 2)}</pre>}
      {error && <p style={{ color: 'red' }}>{error.message}</p>}
    </div>
  );
}

Multi-Server Setup

Connect to multiple MCP servers by passing a servers prop:

src/App.tsx

import { create } from '@frontmcp/sdk';
import { FrontMcpProvider } from '@frontmcp/react';

const mainServer = await create({ info: { name: 'main', version: '1.0.0' }, tools: mainTools });
const analyticsServer = await create({ info: { name: 'analytics', version: '1.0.0' }, tools: analyticsTools });

export function App() {
  return (
    <FrontMcpProvider
      server={mainServer}
      servers={{ analytics: analyticsServer }}
    >
      <Dashboard />
    </FrontMcpProvider>
  );
}

Target a specific server from any hook:

const [callTool, state] = useCallTool('track_event', { server: 'analytics' });

Connection Lifecycle

The provider status progresses through:

Status	Description
`idle`	Not connected yet (`autoConnect={false}`)
`connecting`	`server.connect()` in progress
`connected`	Client ready, tools/resources/prompts populated
`error`	Connection failed — see `error` field

Monitor status with useFrontMcp():

import { useFrontMcp } from '@frontmcp/react';

function StatusBar() {
  const { status, error, tools } = useFrontMcp();
  return (
    <div>
      Status: {status} | Tools: {tools.length}
      {error && <span> — {error.message}</span>}
    </div>
  );
}

Get Started

Concepts

Build

Deploy

Plugins

Adapters

Extensibility

Testing

React SDK

Guides

Installation

Wrap Your App

Your First Hook

Multi-Server Setup

Connection Lifecycle

What’s Next

Provider & Context

Hooks Reference

​Installation

​Wrap Your App

​Your First Hook

​Multi-Server Setup

​Connection Lifecycle

​What’s Next

Provider & Context

Hooks Reference

Installation

Wrap Your App

Your First Hook

Multi-Server Setup

Connection Lifecycle

What’s Next