| Filename | Latest commit message | Latest commit date |
|---|---|---|
| .. | ||
| public | ||
| src | ||
| .gitignore | ||
| .prettierrc | ||
| AGENT.md | ||
| eslint.config.js | ||
| index.html | ||
| package.json | ||
| pnpm-lock.yaml | ||
| README.md | ||
| tailwind.config.js | ||
| tsconfig.app.json | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.ts | ||
| wrangler.jsonc | ||
MCP Inspector
A minimal demo showcasing the use-mcp React hook for connecting to Model Context Protocol (MCP) servers.
Features
- Connect to any MCP server via URL
- View available tools and their schemas
- Real-time connection status monitoring
- Debug logging for troubleshooting
- Clean, minimal UI focused on MCP functionality
Getting Started
- Make sure you've built the parent
use-mcpdirectory at least once!
cd ../.. && pnpm build && cd -
Alternatively, run pnpm dev in the parent directory in a second terminal if you want to iterate on both the library and the example together.
- Install dependencies:
pnpm install
- Start the development server:
pnpm dev
-
Open your browser and navigate to the displayed local URL
-
Enter an MCP server URL to test the connection and explore available tools
What This Demonstrates
This example shows how easy it is to integrate MCP servers into a React application using the use-mcp hook. The core functionality is just:
import { useMcp } from 'use-mcp/react'
const connection = useMcp({
url: 'your-mcp-server-url',
debug: true,
autoRetry: false
})
// Access connection.state, connection.tools, connection.error, etc.
The McpServers component wraps this hook to provide a complete UI for server management and tool inspection.