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

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

- 打开光标设置（Cmd/Ctrl+，） - 导航到“功能”→ “模型上下文协议” - 添加具有以下配置的新MCP服务器：

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

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

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

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

在Claude Desktop中设置

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

   pip install composer-kit-mcp

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

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

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

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

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

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

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

- 寻找🔌 聊天界面中的图标，表示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

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

   pip install --user composer-kit-mcp

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

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

1. 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组件及其描述和类别 - 无需参数

1. get_组件

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

1. get_component_example

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

1. 搜索组件

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

1. get_component_props

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

安装和设置

1. get_installation_guide

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

1. get_组件_by_类别

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

Celo编辑器工具

1. list_celo_composer_templates

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

1. get_celo_cposer_template

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

1. list_celo_composer_frameworks

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

1. get_celo_cposer_命令

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

1. get_celo_cposer_guide

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

1. 获取集成指南

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

1. 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. 提交拉取请求

支持

对于问题和疑问：

• GitHub问题： 作曲家工具包mcp/issues
• 文档： 作曲家工具包文档