SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场gluestack-mcp-tools

gluestack-mcp-tools

编程与开发

查看项目

更新于 10-16 04:01

技能介绍

用途

gluestack-mcp-tools 提供使用 gluestack-ui MCP 服务器工具所需的专家知识，用于发现、探索并检索 gluestack-ui 组件的源代码与元数据。gluestack-ui MCP 服务器通过 6 个专用工具提供对 gluestack-ui 组件库的直接访问。

适用场景包括：

  • 发现 gluestack-ui 中可用的组件
  • 获取某个组件的实际源代码，以便复制到项目中
  • 了解组件的变体（NativeWind、Themed、Unstyled）
  • 访问展示组件使用模式的 Storybook 演示
  • 检索组件的 TypeScript 属性与依赖
  • 浏览 gluestack-ui monorepo 结构

主要能力（可用工具）

list_components

列出全部 70 多个 gluestack-ui 组件及其名称和基本描述。

使用时机：当需要了解有哪些组件可用，或按名称查找组件时的起点。

示例工作流：

  1. 调用 list_components 查看所有可用组件
  2. 找出符合需求的组件
  3. 使用 get_component 或 get_component_metadata 获取详情

list_component_variants

显示某个组件可用的样式变体：NativeWind、Themed 和 Unstyled。

使用时机：在确定组件后，用它了解支持哪些样式方案。

变体说明：

  • NativeWind：面向 React Native 的 Tailwind CSS 类（推荐用于新项目）
  • Themed：基于 token 的主题化，与设计系统集成
  • Unstyled：无样式的基础组件（用于完全自定义）

get_directory_structure

浏览 gluestack-ui monorepo，理解包的组织方式。

使用时机：当需要理解 gluestack-ui 如何组织其包，或在仓库中查找特定文件时。

get_component

获取任意 gluestack-ui 组件的完整源代码。

使用时机：当需要将组件代码复制到项目中，或理解实现细节时。

示例工作流：

  1. 使用 list_components 找到组件名
  2. 使用 list_component_variants 选择变体
  3. 以组件名和变体调用 get_component
  4. 将源代码复制到项目的 components/ui/ 目录

get_component_demo

访问展示组件真实使用模式的 Storybook 示例。

使用时机：当需要了解组件在实践中如何使用，包括属性组合和组合模式时。

可获得内容：

  • 可运行的代码示例
  • 不同的属性组合
  • 与子组件的组合模式
  • 交互状态与变化

get_component_metadata

检索组件的 TypeScript 属性、依赖及其他元数据。

使用时机：当需要了解 TypeScript 接口、必填属性或对等依赖时。

提供的信息：

  • TypeScript 属性类型与接口
  • 必填与可选属性
  • 默认值
  • 对等依赖
  • import 语句

使用方式（常见工作流）

向项目添加新组件

  1. 发现：list_components — 找到需要的组件
  2. 探索变体：list_component_variants — 选择 NativeWind、Themed 或 Unstyled
  3. 获取源码：get_component — 检索完整源代码
  4. 查看演示：get_component_demo — 查看使用示例
  5. 复制到项目：将代码加入 components/ui/ 目录

理解组件 API

  1. 获取元数据：get_component_metadata — 查看 TypeScript 属性
  2. 查看演示：get_component_demo — 在上下文中查看属性用法
  3. 阅读源码：get_component — 理解实现

探索可用组件

  1. 列出全部：list_components — 查看完整组件库
  2. 检查结构：get_directory_structure — 理解组织方式
  3. 查看演示：get_component_demo — 了解组件能力

最佳实践

1. 从发现开始

探索时始终先使用 list_components，这样可获得其他工具使用的规范名称。

# 推荐：从发现开始
1. list_components -> 找到 "Button"
2. get_component("Button", "nativewind")

# 避免：猜测组件名
get_component("Btn") -> 可能找不到

2. 选择合适的变体

  • NativeWind：最适合使用 Tailwind CSS 的新项目
  • Themed：最适合已有设计 token 系统的情况
  • Unstyled：最适合需要完全控制样式的情况

3. 实现前先查看演示

Storybook 演示展示了真实使用模式，可能揭示：

  • 必需的组合模式（例如 Button 需要 ButtonText）
  • 良好配合的属性组合
  • 边界情况与无障碍考量

4. 验证依赖

使用 get_component_metadata 了解：

  • 需要安装的对等依赖
  • 内部使用的其他组件
  • 可能需要导入的 TypeScript 类型

环境配置

MCP 服务器可运行于两种模式：

GitHub 模式（默认）

直接从 gluestack-ui GitHub 仓库获取组件。

# 可选：提高 API 速率限制
export GITHUB_TOKEN="your-token-here"

本地模式

使用 gluestack-ui 仓库的本地克隆，实现离线访问。

# 指向本地克隆
export GLUESTACK_PATH="/path/to/gluestack-ui"

与其他技能集成

可将 MCP 工具与其他 gluestack 技能结合：

  • gluestack-components：获取源代码后，使用组件技能了解实现模式
  • gluestack-theming：与 Themed 变体组件配合，集成设计 token
  • gluestack-accessibility：确保获取的组件以无障碍方式实现

限制与排查

找不到组件

  • 使用 list_components 核实确切的组件名
  • 组件名区分大小写
  • 某些组件可能被分组（例如 FormControl 相关组件）

速率限制

若在 GitHub 模式下未使用 token：

  • 设置 GITHUB_TOKEN 以提高限制
  • 或在本地克隆仓库并设置 GLUESTACK_PATH

组件过时

MCP 服务器从最新的 gluestack-ui 仓库获取。若需要特定版本：

  • 在本地克隆特定版本
  • 将 GLUESTACK_PATH 指向本地克隆