| Filename | Latest commit message | Latest commit date |
|---|---|---|
fe65d50ec3* /sse still not working * Add transport type selector to inspector UI and comprehensive transport testing - Add transport type dropdown to inspector UI (auto, HTTP, SSE) with session storage persistence - Update test framework to support transport type selection in test scenarios - Add comprehensive test cases covering: * Working /mcp endpoints with auto and HTTP transports * SSE endpoint with SSE transport (expected to pass) * SSE endpoint with auto transport (expected to fail - demonstrates current fallback issue) - Test structure now provides clear visibility into transport-specific behavior - All tests properly named and categorized for easy identification of failing scenarios * Gearing up to "make amp do it" * fix: improve SSE fallback logic in auto transport mode - Fix issue where SSE fallback was not attempted when HTTP transport failed - Specific error types (404, 405, CORS) now correctly trigger SSE fallback - Allow SSE fallback even when component state is 'failed' from previous attempts - Maintain proper error handling for non-fallback HTTP errors - All 6 transport scenarios now pass integration tests The core issue was that failConnection() was being called for HTTP errors before returning 'fallback', which set the component state to 'failed' and prevented the orchestration logic from attempting SSE fallback. Now only specific HTTP errors that should trigger fallback avoid calling failConnection immediately, allowing the SSE transport to be attempted as expected. --------- Co-authored-by: Glen Maddern <glen@glenmaddern.com> |
||
| .. | ||
| 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.