mirror of
https://github.com/mcp-use/mcp-use.git
synced 2026-09-14 18:06:01 +08:00
Enrico
136 lines
5.2 KiB
Plaintext
136 lines
5.2 KiB
Plaintext
---
|
|
title: "Integration"
|
|
description: "Mount the Inspector in a mcp-use or Hono application."
|
|
icon: "plug-2"
|
|
---
|
|
|
|
{/* TODO: Add Inspector media when a screenshot or short clip would clarify the workflow. */}
|
|
|
|
The Inspector is built-in local development tooling. `mcp-use` installs its prebuilt package, and `mcp-use dev` mounts it on the development listener at `/mcp/inspector`.
|
|
|
|
## Auto-Mounting with mcp-use
|
|
|
|
When using a generated `mcp-use` project, run `npm run dev`. The CLI loads the Inspector supplied by `mcp-use`, serves its bundled UI locally, and opens `/mcp/inspector`. No extra dependency or CDN is involved. Production stays Inspector-free by default; use `mcp-use start --with-inspector` to mount it on the built server's existing listener.
|
|
|
|
### Example
|
|
|
|
Generated and existing projects receive the Inspector through `mcp-use`. Add `@mcp-use/inspector` directly only when overriding the framework-supplied version or mounting it without `mcp-use`.
|
|
|
|
```typescript
|
|
import { MCPServer } from "mcp-use/server";
|
|
|
|
const server = new MCPServer({
|
|
name: "my-server",
|
|
version: "1.0.0",
|
|
});
|
|
|
|
// Add your tools, resources, prompts...
|
|
server.tool(/* ... */);
|
|
|
|
export default server;
|
|
```
|
|
|
|
Then run `mcp-use dev`; the Inspector is available at `http://localhost:3000/mcp/inspector`. Use `--no-inspector` for a headless development run.
|
|
|
|
To inspect the production build locally, build once and opt in when starting it:
|
|
|
|
```bash
|
|
mcp-use build
|
|
mcp-use start --with-inspector
|
|
```
|
|
|
|
This changes neither the build output nor its manifest. Treat a production Inspector as an internal tool: it can invoke MCP tools and proxy OAuth flows.
|
|
|
|
## Manual Integration
|
|
|
|
For custom development servers, `mountInspector()` from `@mcp-use/inspector` provides the complete local Inspector: packaged UI, proxy, OAuth BFF, and callbacks. It can register on Hono/Express or return a framework-neutral Fetch handler.
|
|
|
|
```typescript
|
|
import { mountInspector } from "@mcp-use/inspector";
|
|
|
|
const inspect = mountInspector({
|
|
basePath: "/mcp",
|
|
autoConnectUrl: "http://localhost:3000/mcp",
|
|
});
|
|
|
|
const response = await inspect(request);
|
|
```
|
|
|
|
### Hono Integration
|
|
|
|
Mount the Inspector on a Hono application:
|
|
|
|
```typescript
|
|
import { Hono } from "hono";
|
|
import { mountInspector } from "@mcp-use/inspector";
|
|
|
|
const app = new Hono();
|
|
|
|
// Your Hono routes
|
|
app.get("/api/health", (c) => {
|
|
return c.json({ status: "ok" });
|
|
});
|
|
|
|
// Mount inspector at /mcp/inspector
|
|
mountInspector(app, { basePath: "/mcp" });
|
|
|
|
// Start server with your Hono adapter
|
|
export default app;
|
|
```
|
|
|
|
## Path Customization
|
|
|
|
`basePath` defaults to `/mcp`, so the Inspector lives at `/mcp/inspector`. Set `basePath: ''` for `/inspector`, or use another MCP prefix.
|
|
|
|
### Hono with Custom Path
|
|
|
|
```typescript
|
|
import { Hono } from "hono";
|
|
import { mountInspector } from "@mcp-use/inspector";
|
|
|
|
const app = new Hono();
|
|
|
|
mountInspector(app, { basePath: "/debug" });
|
|
// Inspector now available at http://localhost:3000/debug/inspector
|
|
```
|
|
|
|
## Configuration Options
|
|
|
|
### `mountInspector` Options
|
|
|
|
Pass options only when the default mount behavior is not enough.
|
|
|
|
```typescript
|
|
import { mountInspector } from "@mcp-use/inspector";
|
|
|
|
mountInspector(app, {
|
|
basePath: "/mcp",
|
|
autoConnectUrl: "http://localhost:3000/mcp",
|
|
sandboxOrigin: "https://sandbox.example.com",
|
|
});
|
|
```
|
|
|
|
| Option | Type | Default | Description |
|
|
| ------------------------- | ---------------- | ----------------------------------- | ------------------------------------------------------- |
|
|
| `basePath` | `string` | `'/mcp'` | MCP prefix; Inspector mounts at `${basePath}/inspector` |
|
|
| `autoConnectUrl` | `string \| null` | Current request origin + `basePath` | MCP server URL to auto-connect on load; `null` disables |
|
|
| `devMode` | `boolean` | `true` | Enables same-origin sandbox for MCP Apps widgets |
|
|
| `sandboxOrigin` | `string \| null` | `undefined` | Override the sandbox origin for MCP Apps widgets |
|
|
| `oauthProxyAllowLoopback` | `boolean` | `true` | Permit local proxy/OAuth access to loopback targets |
|
|
|
|
## Protect mounted Inspector routes
|
|
|
|
The Inspector can call tools, read resources, and inspect prompts on any connected server. Keep it in local development. If a custom integration exposes it on a network, disable loopback proxying and put it behind the same access controls as other internal tools.
|
|
|
|
Each mounted Inspector also applies process-local limits of 120 proxy/OAuth
|
|
requests and 600 asset requests per minute. Exhausted routes return `429 Too
|
|
Many Requests` with `Retry-After`; these limits complement, rather than replace,
|
|
network-edge authentication and rate limiting.
|
|
|
|
## Related Documentation
|
|
|
|
- [Getting Started](/inspector/index) - Basic inspector usage
|
|
- [CLI Usage](/inspector/cli) - Standalone inspector usage
|
|
- [Inspector chat components](/typescript/api-reference/client/inspector-chat-components) - API reference for exported chat UI
|
|
- [Debug widgets in the Inspector](/inspector/debugging-chatgpt-apps) - Test widget rendering and host behavior
|