Router Integration

The @frontmcp/react/router entry point bridges React Router v7 with MCP. AI agents can navigate your app, go back in history, and read the current route — all through standard MCP tools and resources.

react-router-dom is an optional peer dependency. Only install it if you use the router integration.

Setup

1. Install React Router

npm install react-router-dom

2. Wire the Bridge

Call useRouterBridge() inside your React Router tree:

src/App.tsx

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { FrontMcpProvider } from '@frontmcp/react';
import { useRouterBridge } from '@frontmcp/react/router';

function RouterBridge() {
  useRouterBridge();
  return null;
}

function App() {
  return (
    <BrowserRouter>
      <FrontMcpProvider server={server}>
        <RouterBridge />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </FrontMcpProvider>
    </BrowserRouter>
  );
}

3. Register Router Entries

Add the router tools and resources to your MCP server:

src/server.ts

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

const { tools, resources } = createRouterEntries();

const server = await create({
  info: { name: 'my-app', version: '1.0.0' },
  tools: [...tools, ...myOtherTools],
  resources: [...resources, ...myOtherResources],
});

useRouterBridge

Wires React Router’s navigate and location into a module-scoped bridge singleton.

import { useRouterBridge } from '@frontmcp/react/router';

function RouterBridge() {
  useRouterBridge();
  return null;
}

Must be called inside a React Router tree (<BrowserRouter>, <MemoryRouter>, etc.). It:

Captures useNavigate() and syncs it to the bridge on mount
Updates the bridge location on every route change
Clears the bridge on unmount

NavigateTool

MCP tool that navigates to a URL path.

Field	Value
Name	`navigate`
Description	Navigate to a URL path in the application

Input Schema

Parameter	Type	Required	Description
`path`	`string`	Yes	URL path to navigate to
`replace`	`boolean`	No	Replace history entry instead of pushing

Example

{ "path": "/dashboard", "replace": false }

Returns: "Navigated to /dashboard"

GoBackTool

MCP tool that navigates back in browser history.

Field	Value
Name	`go_back`
Description	Go back to the previous page in browser history

Takes no input parameters.

CurrentRouteResource

MCP resource that reads the current URL/path/params.

Field	Value
URI	`route://current`
Name	Current Route

Response

{
  "pathname": "/dashboard",
  "search": "?tab=overview",
  "hash": "#section-1",
  "href": "/dashboard?tab=overview#section-1"
}

createRouterEntries

Factory that returns tool and resource entries for easy spreading into create() config:

import { createRouterEntries } from '@frontmcp/react/router';

const { tools, resources } = createRouterEntries();
// tools = [NavigateTool, GoBackTool]
// resources = [CurrentRouteResource]

Bridge Functions

Low-level bridge functions for advanced use cases:

import {
  setNavigate,
  setLocation,
  getNavigate,
  getLocation,
  clearBridge,
} from '@frontmcp/react/router';

Function	Description
`setNavigate(fn)`	Set the navigate function
`setLocation(loc)`	Set the current location
`getNavigate()`	Get the navigate function (or null)
`getLocation()`	Get the current location (or null)
`clearBridge()`	Reset both navigate and location to null

If the bridge is not connected (e.g., useRouterBridge() not called), NavigateTool and GoBackTool return an error message instead of navigating. CurrentRouteResource returns an error JSON object.

Get Started

Concepts

Build

Deploy

Plugins

Adapters

Extensibility

Testing

React SDK

Guides

Setup

1. Install React Router

2. Wire the Bridge

3. Register Router Entries

useRouterBridge

NavigateTool

Input Schema

Example

GoBackTool

CurrentRouteResource

Response

createRouterEntries

Bridge Functions

​Setup

​1. Install React Router

​2. Wire the Bridge

​3. Register Router Entries

​useRouterBridge

​NavigateTool

​Input Schema

​Example

​GoBackTool

​CurrentRouteResource

​Response

​createRouterEntries

​Bridge Functions

Setup

1. Install React Router

2. Wire the Bridge

3. Register Router Entries

useRouterBridge

NavigateTool

Input Schema

Example

GoBackTool

CurrentRouteResource

Response

createRouterEntries

Bridge Functions