MCP Inspector Demo

This guide shows you how to use MCP Inspector to test and interact with MCP Composer.

Overview

MCP Inspector is a web-based tool for testing MCP servers. It provides a user-friendly interface to:

Connect to MCP servers
List available tools
Invoke tools with parameters
View responses and errors
Debug MCP interactions

Prerequisites

MCP Composer Running: Make sure MCP Composer is running in HTTP mode
Node.js: Required to run MCP Inspector
Browser: Modern web browser (Chrome, Firefox, Safari, Edge)

Step 1: Start MCP Composer

Option A: Using CLI

bash

# Start MCP Composer in HTTP mode
mcp-composer --mode http --port 9000

Option B: Using Python Script

bash

# Navigate to src directory
cd src

# Run the test composer
uv run test/test_composer.py

Verify MCP Composer is Running

bash

# Check health endpoint
curl http://localhost:9000/health

# Expected response:
{
  "status": "healthy",
  "timestamp": "2024-01-01T00:00:00Z",
  "version": "0.1.0"
}

Step 2: Install MCP Inspector

Install via npm

bash

# Install latest version
npx @modelcontextprotocol/inspector

# Or install specific version
npx @modelcontextprotocol/[email protected]

# Or install globally
npm install -g @modelcontextprotocol/inspector

Alternative: Clone Repository

bash

git clone https://github.com/modelcontextprotocol/inspector.git
cd inspector
npm install
npm start

Step 3: Launch MCP Inspector

Using npx

bash

npx @modelcontextprotocol/inspector

Using Global Installation

bash

mcp-inspector

Manual Start

bash

cd inspector
npm start

Step 4: Connect to MCP Composer

1. Open MCP Inspector

Navigate to the URL shown in the terminal (usually http://localhost:6274)

2. Configure Connection

Fill in the connection details:

Transport Type: http
URL: http://localhost:9000/mcp
Session Token: Leave empty (or use token if provided)

3. Connect

Click the Connect button to establish connection with MCP Composer.

Step 5: Explore Available Tools

List Tools

Go to the Tools tab
Click List Tools to see all available tools
You should see MCP Composer's built-in tools:
- register_mcp_server
- delete_mcp_server
- member_health
- activate_mcp_server
- deactivate_mcp_server
- list_member_servers
- get_tool_config_by_name
- get_tool_config_by_server
- disable_tools
- enable_tools
- update_tool_description
- add_tools
- add_tools_from_openapi
- add_prompts
- get_all_prompts

Tool Details

Click on any tool to see its:

Description
Input schema
Required parameters
Example usage

Step 6: Register a Test Server

Example: Register Stock Info Server

Select Tool: Choose register_mcp_server
Fill Parameters:

json

{
  "id": "mcp-stock-info",
  "type": "http",
  "endpoint": "https://mcp-stock-info.1vgzmntiwjzl.eu-es.codeengine.appdomain.cloud/mcp"
}

Execute: Click Call Tool

Expected Response

json

{
  "content": [
    {
      "type": "text",
      "text": "Server registered successfully"
    }
  ]
}

Step 7: List Tools Again

Refresh Tool List

Clear Tools: Click Clear Tools to refresh the list
List Tools: Click List Tools again
New Tools: You should now see tools from the registered server:
- get_stock_price
- get_stock_info
- search_stocks

Step 8: Test Registered Tools

Example: Get Stock Price

Select Tool: Choose get_stock_price
Fill Parameters:

json

{
  "symbol": "AAPL"
}

Execute: Click Call Tool

Expected Response

json

{
  "content": [
    {
      "type": "text",
      "text": "{\"symbol\":\"AAPL\",\"price\":150.25,\"currency\":\"USD\",\"timestamp\":\"2024-01-01T12:00:00Z\"}"
    }
  ]
}

Step 9: Advanced Testing

Test Error Handling

Try calling a tool with invalid parameters:

json

{
  "symbol": "INVALID_SYMBOL"
}

Test Multiple Tools

Get Stock Info:
json
```
{
  "symbol": "GOOGL"
}
```
1
2
3
Search Stocks:
json
```
{
  "query": "tech"
}
```
1
2
3

Step 10: Monitor Server Health

Check Member Health

Select Tool: Choose member_health
Execute: Click Call Tool (no parameters needed)

Expected Response

json

{
  "content": [
    {
      "type": "text",
      "text": "{\"mcp-stock-info\":{\"status\":\"healthy\",\"last_check\":\"2024-01-01T12:00:00Z\",\"response_time\":150}}"
    }
  ]
}

Step 11: Manage Servers

List Member Servers

Select Tool: Choose list_member_servers
Execute: Click Call Tool

Deactivate Server

Select Tool: Choose deactivate_mcp_server
Fill Parameters:
json
```
{
  "server_id": "mcp-stock-info"
}
```
1
2
3
Execute: Click Call Tool

Reactivate Server

Select Tool: Choose activate_mcp_server
Fill Parameters:
json
```
{
  "server_id": "mcp-stock-info"
}
```
1
2
3
Execute: Click Call Tool

Step 12: Add Custom Tools

Add Curl Tool

Select Tool: Choose add_tools
Fill Parameters:

json

{
  "tools": [
    {
      "name": "weather",
      "tool_type": "curl",
      "curl_config": {
        "value": "curl 'https://api.openweathermap.org/data/2.5/weather?q={{city}}&appid=YOUR_API_KEY'"
      },
      "description": "Get weather information for a city",
      "permission": {
        "user": "read"
      }
    }
  ]
}

Execute: Click Call Tool

Test Custom Tool

List Tools: Refresh the tool list
Select Tool: Choose the new weather tool
Fill Parameters:
json
```
{
  "city": "New York"
}
```
1
2
3
Execute: Click Call Tool

Troubleshooting

Common Issues

1. Connection Failed

Symptoms: Cannot connect to MCP Composer

Solutions:

bash

# Check if MCP Composer is running
curl http://localhost:9000/health

# Check port availability
netstat -an | grep 9000

# Restart MCP Composer
mcp-composer --mode http --port 9000

2. Tools Not Loading

Symptoms: No tools appear after registration

Solutions:

Clear tools and list again
Check server health
Verify server configuration
Check logs for errors

3. Tool Execution Fails

Symptoms: Tool calls return errors

Solutions:

Check tool parameters
Verify server connectivity
Check authentication
Review error messages

4. MCP Inspector Not Starting

Symptoms: Cannot launch MCP Inspector

Solutions:

bash

# Check Node.js version
node --version

# Clear npm cache
npm cache clean --force

# Reinstall MCP Inspector
npm uninstall -g @modelcontextprotocol/inspector
npm install -g @modelcontextprotocol/inspector

Debug Mode

Enable debug logging in MCP Composer:

bash

# Start with debug logging
mcp-composer --mode http --port 9000 --log-level debug

Log Analysis

Check MCP Composer logs for errors:

bash

# View logs
tail -f logs/mcp_composer.log

# Search for errors
grep ERROR logs/mcp_composer.log

Best Practices

Testing Workflow

Start Simple: Begin with basic tools
Test Incrementally: Add one server at a time
Verify Health: Check server status regularly
Document Issues: Note any problems encountered
Clean Up: Remove test servers when done

Security Considerations

Use Test Data: Avoid production credentials
Limit Access: Use localhost for testing
Monitor Logs: Watch for suspicious activity
Clean Environment: Remove test configurations

Performance Testing

Load Testing: Test with multiple concurrent requests
Response Times: Monitor tool execution times
Resource Usage: Check memory and CPU usage
Error Rates: Monitor failure rates

Next Steps

API Reference - Complete API documentation
Configuration Guide - Advanced configuration options
Quick Start Guide - Get up and running

MCP Inspector Demo ​

Overview ​

Prerequisites ​

Step 1: Start MCP Composer ​

Option A: Using CLI ​

Option B: Using Python Script ​

Verify MCP Composer is Running ​

Step 2: Install MCP Inspector ​

Install via npm ​

Alternative: Clone Repository ​

Step 3: Launch MCP Inspector ​

Using npx ​

Using Global Installation ​

Manual Start ​

Step 4: Connect to MCP Composer ​

1. Open MCP Inspector ​

2. Configure Connection ​

3. Connect ​

Step 5: Explore Available Tools ​

List Tools ​

Tool Details ​

Step 6: Register a Test Server ​

Example: Register Stock Info Server ​

Expected Response ​

Step 7: List Tools Again ​

Refresh Tool List ​

Step 8: Test Registered Tools ​

Example: Get Stock Price ​

Expected Response ​

Step 9: Advanced Testing ​

Test Error Handling ​

Test Multiple Tools ​

Step 10: Monitor Server Health ​

Check Member Health ​

Expected Response ​

Step 11: Manage Servers ​

List Member Servers ​

Deactivate Server ​

Reactivate Server ​

Step 12: Add Custom Tools ​

Add Curl Tool ​

Test Custom Tool ​

Troubleshooting ​

Common Issues ​

1. Connection Failed ​

2. Tools Not Loading ​

3. Tool Execution Fails ​

4. MCP Inspector Not Starting ​

Debug Mode ​

Log Analysis ​

Best Practices ​

Testing Workflow ​

Security Considerations ​

Performance Testing ​

Next Steps ​

MCP Inspector Demo

Overview

Prerequisites

Step 1: Start MCP Composer

Option A: Using CLI

Option B: Using Python Script

Verify MCP Composer is Running

Step 2: Install MCP Inspector

Install via npm

Alternative: Clone Repository

Step 3: Launch MCP Inspector

Using npx

Using Global Installation

Manual Start

Step 4: Connect to MCP Composer

1. Open MCP Inspector

2. Configure Connection

3. Connect

Step 5: Explore Available Tools

List Tools

Tool Details

Step 6: Register a Test Server

Example: Register Stock Info Server

Expected Response

Step 7: List Tools Again

Refresh Tool List

Step 8: Test Registered Tools

Example: Get Stock Price

Expected Response

Step 9: Advanced Testing

Test Error Handling

Test Multiple Tools

Step 10: Monitor Server Health

Check Member Health

Expected Response

Step 11: Manage Servers

List Member Servers

Deactivate Server

Reactivate Server

Step 12: Add Custom Tools

Add Curl Tool

Test Custom Tool

Troubleshooting

Common Issues

1. Connection Failed

2. Tools Not Loading

3. Tool Execution Fails

4. MCP Inspector Not Starting

Debug Mode

Log Analysis

Best Practices

Testing Workflow

Security Considerations

Performance Testing

Next Steps