> ## Documentation Index
> Fetch the complete documentation index at: https://docs.agentfront.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Router Integration

> Bridge React Router with MCP via useRouterBridge, navigation tools, and route resources

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.

<Info>
  `react-router-dom` is an optional peer dependency. Only install it if you use the router integration.
</Info>

## Setup

### 1. Install React Router

```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
npm install react-router-dom
```

### 2. Wire the Bridge

Call `useRouterBridge()` inside your React Router tree:

```tsx title="src/App.tsx" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
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:

```ts title="src/server.ts" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
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.

```tsx theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
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

```json theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{ "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

```json theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
  "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:

```ts theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
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:

```ts theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
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 |

<Warning>
  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.
</Warning>