modelcontextprotocol/use-mcp
Watch
1
0
Fork
You've already forked use-mcp
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
use-mcp/examples/inspector
History
Repository files (latest commit first)
Filename Latest commit message Latest commit date
Jem 7a923c3509 feat(examples): add resources and prompts display to inspector 
- Import and export Resource, ResourceTemplate, and Prompt types
- Add state management for resources and prompts in McpServers component
- Add UI sections to display available resources and prompts
- Implement readResource functionality with content display
- Implement getPrompt functionality with argument inputs
- Show resource templates with visual distinction
- Add expand/collapse UI for resources and prompts
- Display prompt messages with proper formatting

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-02 14:24:59 -07:00
..
public Transfer from geelen/use-mcp 2025-06-18 21:46:43 +10:00
src feat(examples): add resources and prompts display to inspector 2025-07-02 14:24:59 -07:00
.gitignore Transfer from geelen/use-mcp 2025-06-18 21:46:43 +10:00
.prettierrc Transfer from geelen/use-mcp 2025-06-18 21:46:43 +10:00
AGENT.md Transfer from geelen/use-mcp 2025-06-18 21:46:43 +10:00
eslint.config.js Prettier changes 2025-06-27 16:09:36 +10:00
index.html Prettier changes 2025-06-27 16:09:36 +10:00
package.json Adding a full chat example (#19) 2025-07-02 16:24:03 +10:00
pnpm-lock.yaml Merge pull request #10 from modelcontextprotocol/e2e-testing 2025-06-30 21:07:45 +10:00
README.md Transfer from geelen/use-mcp 2025-06-18 21:46:43 +10:00
tailwind.config.js Prettier changes 2025-06-27 16:09:36 +10:00
tsconfig.app.json Transfer from geelen/use-mcp 2025-06-18 21:46:43 +10:00
tsconfig.json Prettier changes 2025-06-27 16:09:36 +10:00
tsconfig.node.json Transfer from geelen/use-mcp 2025-06-18 21:46:43 +10:00
vite.config.ts Fixing /sse support (#12) 2025-07-01 12:14:32 +10:00
wrangler.jsonc Prettier changes 2025-06-27 16:09:36 +10:00

README.md

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

  1. Make sure you've built the parent use-mcp directory 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.

  1. Install dependencies:
pnpm install
  1. Start the development server:
pnpm dev

  1. Open your browser and navigate to the displayed local URL

  2. 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.