Quick Start

This guide will help you set up a minimal component that connects to an MCP server and lists its available tools.

1. Import the Hook

import { useMcp } from 'use-mcp/react';

2. Create a Component

Create a component that connects to an MCP server. For this example, we'll assume you have an MCP server running locally at http://localhost:8080/sse (see the Examples section for setting up a server).

import React from 'react';
import { useMcp } from 'use-mcp/react';

export function McpStatus() {
  const {
    state,
    tools,
    error,
    retry
  } = useMcp({
    url: 'http://localhost:8080/sse',
    clientName: 'QuickStart App',
    autoReconnect: true
  });

  if (state === 'failed') {
    return (
      <div style={{ color: 'red' }}>
        <p>Connection failed: {error}</p>
        <button onClick={retry}>Retry</button>
      </div>
    );
  }

  if (state !== 'ready') {
    return <p>Status: {state}...</p>;
  }

  return (
    <div>
      <h1>🟢 Connected</h1>
      <h3>Available Tools:</h3>
      <ul>
        {tools.map((tool) => (
          <li key={tool.name}>
            <strong>{tool.name}</strong>: {tool.description}
          </li>
        ))}
      </ul>
    </div>
  );
}

3. Using Tools

Once connected, you can execute tools defined by the server using the callTool function returned by the hook.

const { callTool } = useMcp({ /* options */ });

const handleExecute = async () => {
  try {
    const result = await callTool('add', { a: 5, b: 3 });
    console.log('Result:', result);
  } catch (err) {
    console.error('Tool execution failed:', err);
  }
};

Next Steps

• Learn how to handle Authentication if your server is protected.
• Explore Core Concepts to understand connection states and transports.
• Check the API Reference for full hook options.