AI导哈

React组件库文档服务器

一个为Composer Kit React组件库提供文档、示例和使用信息的MCP服务器，专为在Celo区块链上构建web3应用而设计。

  • by celo-org
  • Python
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 celo-org/composer-kit-mcp

使用说明

作曲家工具包MCP服务器

用于访问Composer Kit UI组件文档、示例和使用信息的模型上下文协议（MCP）服务器。该服务器提供对Composer Kit React组件库的全面访问，该组件库专为在Celo区块链上构建web3应用程序而设计。

安装

  1. 克隆存储库：
git clone https://github.com/celo-org/composer-kit-mcp
cd composer-kit-mcp
  1. 安装依赖项：
pip install -e .

MCP客户端设置

在Cursor中设置

  1. 安装MCP服务器 （如果尚未完成）：

    pip install composer-kit-mcp

  2. 配置光标 通过将MCP服务器添加到光标设置中：

    • 打开光标设置（Cmd/Ctrl+，）
    • 导航到“功能”→ “模型上下文协议”
    • 添加具有以下配置的新MCP服务器：
    {
  "mcpServers": {
    "composer-kit-mcp": {
      "command": "uvx",
      "args": ["composer-kit-mcp"]
    }
  }
}

  3. 重新启动游标 加载MCP服务器

  4. 验证设置 通过向Cursor询问Composer Kit组件：

    • “有哪些作曲家工具包组件可用？”
    • “演示如何使用钱包组件”
    • “搜索与支付相关的组件”

在Claude Desktop中设置

  1. 安装MCP服务器 （如果尚未完成）：

    pip install composer-kit-mcp

  2. 找到您的Claude Desktop配置文件:

    • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
    • 视窗: %APPDATA%\Claude\claude_desktop_config.json

  3. 编辑配置文件 添加MCP服务器：

    {
  "mcpServers": {
    "composer-kit-mcp": {
      "command": "uvx",
      "args": ["composer-kit-mcp"]
    }
  }
}

    如果文件不存在，请使用上述内容创建它。

  4. 重新启动克劳德桌面 加载MCP服务器

  5. 验证设置 通过向克劳德询问作曲家套件：

    • 寻找🔌 聊天界面中的图标，表示MCP工具可用
    • 问：“您能帮助我使用哪些Composer Kit组件？”
    • 试试：“给我看使用支付组件的示例”

替代安装方法

使用pipx（建议用于隔离）

# Install pipx if you haven't already
pip install pipx

# Install composer-kit-mcp in an isolated environment
pipx install composer-kit-mcp

# The command will be available globally
composer-kit-mcp

使用虚拟环境

# Create a virtual environment
python -m venv composer-kit-mcp-env
source composer-kit-mcp-env/bin/activate  # On Windows: composer-kit-mcp-env\Scripts\activate

# Install the package
pip install composer-kit-mcp

# Use the full path in your MCP config
# e.g., /path/to/composer-kit-mcp-env/bin/composer-kit-mcp

故障排除

常见问题

  1. 未找到命令：确保安装了该包，并且该命令在您的PATH中

    which composer-kit-mcp  # Should show the path to the command

  2. 权限错误：尝试使用安装 --user 标记或使用pipx

    pip install --user composer-kit-mcp

  3. MCP服务器未连接：检查配置中的命令路径是否正确

    composer-kit-mcp  # Should start the server (will wait for input)

  4. Python版本问题确保你使用的是Python 3.11或更高版本

    python --version  # Should be 3.11+

调试

要测试MCP服务器是否正常工作：

# Test the server directly
echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/list", "params": {}}' | composer-kit-mcp

这应该返回一个带有可用工具的JSON响应。

用法

运行服务器

# Run the MCP server
python -m composer_kit_mcp.server

# Or use the CLI entry point
composer-kit-mcp

可用工具

组件信息

  1. 列表_组件

    • 列出所有可用的Composer Kit组件及其描述和类别
    • 无需参数

  2. get_组件

    • 获取特定组件的详细信息，包括源代码、道具和使用信息
    • 参数： component_name （例如，“按钮”、“钱包”、“支付”、“交换”）

  3. get_component_example

    • 使用真实世界的示例获取特定组件的示例使用代码
    • 参数： component_name, example_type （可选：“基本”、“高级”、“带道具”）

  4. 搜索组件

    • 按名称、描述或功能搜索组件
    • 参数： query （例如，“钱包”、“支付”、“代币”、“nft”）

  5. get_component_props

    • 获取特定组件的详细道具信息，包括类型、描述和要求
    • 参数： component_name

安装和设置

  1. get_installation_guide

    • 获取Composer Kit的安装说明，包括设置步骤和配置
    • 参数： package_manager （可选：“npm”、“yarn”、“pnpm”、“bun”）

  2. get_组件_by_类别

    • 获取特定类别中的所有组件
    • 参数： category （例如，“核心组件”、“钱包集成”、“支付和交易”）

Celo编辑器工具

  1. list_celo_composer_templates

    • 列出所有可用的Celo Composer模板及其描述、用例和功能
    • 无需参数

  2. get_celo_cposer_template

    • 获取特定Celo Composer模板的详细信息
    • 参数： template_name

  3. list_celo_composer_frameworks

    • 列出Celo Composer中支持的框架（React/Next.js，Hardhat）
    • 无需参数

  4. get_celo_cposer_命令

    • 获取带有标志和使用示例的可用Celo Composer CLI命令
    • 无需参数

  5. get_celo_cposer_guide

    • 获取各种Celo Composer任务的分步指南
    • 参数： guide_type （“快速启动”、“智能合约部署”、“本地开发”、“ui组件”、“部署”）

  6. 获取集成指南

    • 获取有关将Composer Kit与Celo Composer项目集成的全面指南
    • 无需参数

  7. create_celo_composer项目

    • 生成创建新Celo Composer项目的完整命令
    • 参数： project_name, owner, template, include_hardhat （可选，默认为true）
    • 返回：使用后续步骤和模板信息完成CLI命令

可用组件

核心组件

  • 地址：显示具有截断和复制功能的以太坊地址
  • 平衡：通过精确控制显示和管理代币余额
  • 身份：显示包含地址、姓名、余额和社交链接的用户信息

钱包集成

  • 钱包：钱包连接和用户信息显示
  • 连接：支持回拨的钱包连接按钮

付款和交易

  • 支付：通过内置对话框和错误处理发送付款
  • 交易：通过状态跟踪促进区块链交易
  • 交换：具有可交换令牌选择的令牌交换接口

许可证管理

  • 令牌选择：使用筛选从列表中搜索和选择令牌

NFT组件

  • 非同质化代币：显示NFT详细信息并提供铸造界面
  • NFT 卡：NFT显示的卡片布局
  • NFTImage：NFT图像显示组件
  • NFTMeta：NFT元数据显示
  • NFTMint：NFT铸造接口

主要特点

组件文档

  • 完整的API参考资料：所有部件的详细道具信息
  • 使用示例：每个组件的真实代码示例
  • 安装指南：分步设置说明
  • 类别式组织：按功能组织的组件

Celo作曲家集成

  • 模板管理：访问所有Celo Composer模板
  • 项目创建：为新项目生成完整的CLI命令
  • 框架支持：关于React/Next.js和Hardhat集成的信息
  • 分步指南：项目设置、部署和开发的综合指南
  • 集成文档：如何将Composer Kit组件与Celo Composer项目相结合

搜索和发现

  • 语义搜索：按功能或用例查找组件
  • 类别筛选：按类别浏览组件
  • 道具文件：详细的类型信息和要求

代码示例

  • 基本用法：简单的实施示例
  • 高级模式：复杂的使用场景
  • 最佳实践：建议的实施模式

Celo编辑器模板

Minipay模板

  • 目的：预先配置用于在Celo上构建迷你支付去中心化应用程序
  • 用例：移动优先支付应用、微交易、P2P支付
  • 特性：移动优化用户界面、支付流程组件、Celo集成、PWA支持

Valora模板

  • 目的：设计用于轻松集成Valora钱包
  • 用例：Valora钱包集成、社交支付、DeFi应用程序
  • 特性：Valora钱包连接、社交功能、DeFi组件、多代币支持

集成工作流程

  1. 选择模板：根据您的使用情况从Minipay或Valora中选择
  2. 创建项目：使用 create_celo_composer_project 生成设置命令的工具
  3. 再进行：使用生成的命令设置项目
  4. 添加编辑器套件：安装Composer Kit组件以增强UI
  5. 开发：使用分步指南进行部署和开发设置

建筑

服务器提供对硬编码的Composer Kit组件数据和Celo Composer信息的访问：

src/composer_kit_mcp/
├── components/         # Component data and models
│   ├── data.py        # Hardcoded component and Celo Composer information
│   └── models.py      # Pydantic models for components and Celo Composer
├── server.py          # Main MCP server with Composer Kit and Celo Composer tools
└── __init__.py        # Package initialization

数据结构

  • 作曲家套件组件：包含道具、示例和使用信息的完整组件库
  • Celo编辑器模板：带有用例和功能的模板配置
  • Celo作曲家指南：常见任务的分步说明
  • 集成文档：如何将这两种工具结合起来进行快速dApp开发

组件类别

核心组件

基本功能的基本UI组件

钱包集成

钱包连接和用户管理组件

付款和交易

用于处理支付和区块链交易的组件

许可证管理

用于令牌选择和管理的组件

NFT组件

NFT显示和交互组件

发展

运行测试

pytest

代码格式化

black .
ruff check .

类型检查

mypy .

许可证

MIT许可证-有关详细信息，请参阅许可证文件。

贡献

  1. 分叉存储库
  2. 创建要素分支
  3. 进行更改
  4. 如果适用，添加测试
  5. 提交拉取请求

支持

对于问题和疑问：

相关 MCP