Skip to main content
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
MCP tool that navigates to a URL path.
FieldValue
Namenavigate
DescriptionNavigate to a URL path in the application

​
Input Schema

ParameterTypeRequiredDescription
pathstringYesURL path to navigate to
replacebooleanNoReplace history entry instead of pushing

​
Example

{ "path": "/dashboard", "replace": false }
Returns: "Navigated to /dashboard"

​
GoBackTool

MCP tool that navigates back in browser history.
FieldValue
Namego_back
DescriptionGo back to the previous page in browser history
Takes no input parameters.

​
CurrentRouteResource

MCP resource that reads the current URL/path/params.
FieldValue
URIroute://current
NameCurrent 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';
FunctionDescription
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.