use MCP

🦑 使用MCP（可能是指某种工具、框架或协议）🦑

](https://github.com/modelcontextprotocol/use-mcp)  ](https://www.npmjs.com/package/use-mcp)

一个用于连接的轻量级React Hook 模型上下文协议（MCP） 服务器。简化了实施MCP标准的AI系统的身份验证和工具调用。

试试看： 聊天演示 | MCP 检查器 | Cloudflare Workers AI 实验室

安装

npm install use-mcp
# or
pnpm add use-mcp
# or
yarn add use-mcp

发展

要运行包含所有示例和服务器的开发环境：

pnpm dev

这开始了：

• 检查员http://localhost:5001 - MCP服务器调试工具
• 聊天用户界面http://localhost:5002 - 示例聊天界面
• Hono MCP 服务器http://localhost:5101 - 示例MCP服务器
• CF代理MCP服务器http://localhost:5102 - Cloudflare Workers AI MCP 服务器

测试

集成测试位于 test/ 默认情况下，以无头模式运行目录（或：默认情况下，以无头模式执行目录中的操作）

cd test && pnpm test              # Run tests headlessly (default)
cd test && pnpm test:headed       # Run tests with visible browser
cd test && pnpm test:watch        # Run tests in watch mode
cd test && pnpm test:ui           # Run tests with interactive UI

特点/特性

• 🔄 自动连接管理，支持重新连接和重试
• 🔐 支持弹出窗口和回退机制的OAuth认证流程处理
• 📦 简单的React钩子接口，用于MCP集成
• 全面支持MCP工具、资源和提示
• 📄 访问服务器资源并读取其内容
• 💬 使用服务器提供的提示模板
• 🧰 用于编辑器辅助和类型检查的TypeScript类型
• 📝 全面的日志记录用于调试
• 🌐 支持HTTP和SSE（服务器发送事件）两种传输方式
• 🧠 服务器驱动的引出支持，支持可选的处理器注册

快速入门

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

function MyAIComponent() {
  const {
    state,          // Connection state: 'discovering' | 'pending_auth' | 'authenticating' | 'connecting' | 'loading' | 'ready' | 'failed'
    tools,          // Available tools from MCP server
    resources,      // Available resources from MCP server
    prompts,        // Available prompts from MCP server
    error,          // Error message if connection failed
    callTool,       // Function to call tools on the MCP server
    readResource,   // Function to read resource contents
    getPrompt,      // Function to get prompt messages
    retry,          // Retry connection manually
    authenticate,   // Manually trigger authentication
    clearStorage,   // Clear stored tokens and credentials
    onEliciation,   // Register handler for server elicitations
  } = useMcp({
    url: 'https://your-mcp-server.com',
    clientName: 'My App',
    autoReconnect: true,
  })

  useEffect(() => {
    if (state !== 'ready') return
    onEliciation(async params => {
      if (params.prompt === 'confirm-action') {
        return { action: 'respond', content: { type: 'text', text: 'Approved' } }
      }
      return { action: 'decline' }
    })
  }, [state, onEliciation])

  // Handle different states
  if (state === 'failed') {
    return (
      

        
Connection failed: {error}

        Retry
        Authenticate Manually
      

    )
  }

  if (state !== 'ready') {
    return 
Connecting to AI service...

  }

  // Use available tools
  const handleSearch = async () => {
    try {
      const result = await callTool('search', { query: 'example search' })
      console.log('Search results:', result)
    } catch (err) {
      console.error('Tool call failed:', err)
    }
  }

  return (
    

      
Available Tools: {tools.length}

      

        {tools.map(tool => (
          
{tool.name}

        ))}
      

      Search
      
      {/* Example: Display and read resources */}
      {resources.length > 0 && (
        

          
Resources: {resources.length}

           {
            const content = await readResource(resources[0].uri)
            console.log('Resource content:', content)
          }}>
            Read First Resource
          
        

      )}
      
      {/* Example: Use prompts */}
      {prompts.length > 0 && (
        

          
Prompts: {prompts.length}

           {
            const result = await getPrompt(prompts[0].name)
            console.log('Prompt messages:', result.messages)
          }}>
            Get First Prompt
          
        

      )}
    

  )
}

设置OAuth回调

为了处理OAuth认证流程，您需要在您的应用中设置一个回调端点。

使用 React Router

// App.tsx with React Router
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import { useEffect } from 'react'
import { onMcpAuthorization } from 'use-mcp'

function OAuthCallback() {
  useEffect(() => {
    onMcpAuthorization()
  }, [])

  return (
    

      
Authenticating...

      
This window should close automatically.

    

  )
}

function App() {
  return (
    
      
        } />
        } />
      
    
  )
}

使用 Next.js Pages 路由器

// pages/oauth/callback.tsx
import { useEffect } from 'react'
import { onMcpAuthorization } from 'use-mcp'

export default function OAuthCallbackPage() {
  useEffect(() => {
    onMcpAuthorization()
  }, [])

  return (
    

      
Authenticating...

      
This window should close automatically.

    

  )
}

API 参考文档

useMcp 钩子

function useMcp(options: UseMcpOptions): UseMcpResult

选项

返回值

许可证

麻省理工学院（MIT）