b909730ae2
- Add resources, resourceTemplates, and prompts to all feature lists - Document new properties returned by useMcp hook - Document new methods: listResources, readResource, listPrompts, getPrompt - Add code examples showing how to use resources and prompts - Update quick start examples to demonstrate all features - Add note about graceful handling of servers with partial MCP support 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
64 lines
2 KiB
Markdown
64 lines
2 KiB
Markdown
# 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
|
|
- Browse and read server resources
|
|
- Interact with server-provided prompts
|
|
- Real-time connection status monitoring
|
|
- Debug logging for troubleshooting
|
|
- Clean, minimal UI focused on MCP functionality
|
|
|
|
## Getting Started
|
|
|
|
0. Make sure you've built the parent `use-mcp` directory at least once!
|
|
```bash
|
|
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.
|
|
|
|
1. Install dependencies:
|
|
```bash
|
|
pnpm install
|
|
```
|
|
|
|
2. Start the development server:
|
|
```bash
|
|
pnpm dev
|
|
```
|
|
|
|
3. Open your browser and navigate to the displayed local URL
|
|
|
|
4. Enter an MCP server URL to test the connection and explore available tools, resources, and prompts
|
|
|
|
## 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:
|
|
|
|
```tsx
|
|
import { useMcp } from 'use-mcp/react'
|
|
|
|
const connection = useMcp({
|
|
url: 'your-mcp-server-url',
|
|
debug: true,
|
|
autoRetry: false
|
|
})
|
|
|
|
// Access connection.state, connection.tools, connection.resources,
|
|
// connection.prompts, connection.error, etc.
|
|
```
|
|
|
|
The `McpServers` component wraps this hook to provide a complete UI for server management, tool inspection, resource browsing, and prompt interaction.
|
|
|
|
## Supported MCP Features
|
|
|
|
- **Tools**: Execute server-provided tools with custom arguments and view results
|
|
- **Resources**: Browse available resources and read their contents (text or binary)
|
|
- **Resource Templates**: View dynamic resource templates with URI patterns
|
|
- **Prompts**: Interact with server prompts, provide arguments, and view generated messages
|
|
|
|
Note: Not all MCP servers implement all features. The inspector will gracefully handle servers that only support a subset of the MCP specification.
|