关键词

Storybook组件生成AI编程助手前端开发UI自动化

项目简介

Story UI (Storybook User Interface) 是一款创新性的工具，它通过集成大语言模型（LLM）的能力，自动化了前端组件的Storybook故事生成过程。开发者只需用自然语言描述所需组件，Story UI 便能智能理解并生成跨React、Vue、Angular、Svelte和Web Components等多种框架的故事代码，极大地提高了组件文档编写的效率。它还支持多个人工智能服务商（如Anthropic Claude、OpenAI GPT、Google Gemini），并提供了Model Context Protocol (MCP) 服务器集成，方便与其他AI客户端进行深度交互。

主要功能点

  • AI驱动的故事生成: 使用自然语言描述组件需求，AI即可自动生成对应的Storybook故事代码。
  • 框架无关性: 兼容主流的JavaScript前端框架，包括React、Vue、Angular、Svelte和Web Components。
  • 多AI提供商支持: 可灵活选择不同的LLM服务提供商，如Claude、OpenAI GPT或Google Gemini。
  • 设计系统感知: 能够学习并遵循项目的设计系统规范，生成符合团队风格的代码。
  • 智能迭代与预览: 支持在已有故事上进行迭代修改，并提供实时预览功能。
  • MCP服务器集成: 内置Model Context Protocol (MCP) 服务器，允许Claude Desktop等AI客户端直接调用其工具和能力。

安装步骤

  1. 安装 Story UI 包: 在你的项目目录中，使用npm或yarn安装Story UI作为开发依赖。

    npm install -D @tpitre/story-ui
# 或
yarn add -D @tpitre/story-ui

  2. 初始化项目: 运行初始化命令，Story UI 将引导你配置框架、设计系统和AI提供商。

    npx story-ui init

  3. 启动 Story UI: 运行此命令即可启动Story UI服务器。请注意，这将启动一个HTTP服务器，它将托管Story UI的API接口，也包含了远程MCP服务器。

    npm run story-ui

MCP服务器配置（用于MCP客户端）

Story UI 包含一个本地和远程的MCP服务器实现。MCP客户端（如Claude Desktop或Claude Code）可以通过以下JSON格式的配置来连接它。

本地Stdio传输配置示例 (适用于Claude Desktop运行本地命令):

此配置让Claude Desktop在本地启动并运行'story-ui'的MCP Stdio服务器，并通过标准输入输出进行通信。

{
  "mcpServers": {
    "story-ui-local": {
      "command": "npx",
      "args": ["@tpitre/story-ui", "mcp"],
      "env": {
        // 在此处配置你的AI服务API密钥
        "ANTHROPIC_API_KEY": "YOUR_ANTHROPIC_API_KEY", // 替换为你的Anthropic API密钥
        "OPENAI_API_KEY": "YOUR_OPENAI_API_KEY",     // 如果使用OpenAI，替换为OpenAI API密钥
        "GEMINI_API_KEY": "YOUR_GEMINI_API_KEY"       // 如果使用Gemini，替换为Google Gemini API密钥
      },
      "description": "连接到本地运行的Story UI MCP服务器，通过标准输入输出（Stdio）进行通信。适用于本地开发环境。"
    }
  }
}

远程HTTP传输配置示例 (适用于连接已部署的Story UI):

此配置连接到一个通过HTTP协议暴露MCP接口的远程Story UI服务器（例如部署在Railway上）。

{
  "mcpServers": {
    "story-ui-remote": {
      "transport": "http",
      "url": "https://story-ui-demo.up.railway.app/mcp-remote/mcp", // **重要: 请替换为你的Story UI部署的实际URL**
      "name": "Story UI (远程)",
      "description": "连接到远程部署的Story UI MCP服务器，通过HTTP协议进行通信。适用于生产或共享环境。",
      "tools": [
        // 以下列出了此MCP服务器提供的核心工具，AI客户端将能够调用这些功能
        "generate-story",          // 生成一个新的Storybook故事
        "list-components",         // 列出项目中可用的组件
        "list-stories",            // 列出已生成的Storybook故事
        "get-story",               // 获取特定Storybook故事的内容
        "update-story",            // 更新现有的Storybook故事
        "delete-story",            // 删除一个Storybook故事
        "get-component-props",     // 获取组件的详细属性信息
        "test-connection"          // 测试MCP服务器连接是否正常
      ]
    }
  }
}

在MCP客户端中，你可以通过图形界面或CLI添加这些配置。例如，在Claude Desktop中，你可以在“设置”->“连接器”中点击“添加自定义连接器”，然后输入上述配置中的'url'（对于远程HTTP模式）或选择本地CLI命令模式。

基本使用方法

  1. 启动服务: 确保你已经运行 'npm run story-ui' 启动了Story UI 服务器。
  2. 通过AI客户端交互:
    • 在Claude Desktop或Claude Code等MCP客户端中，选择你已连接的"Story UI"连接器。
    • 使用自然语言向AI描述你想要创建的组件故事，例如： '"使用Story UI创建一个包含图片、标题、价格和添加到购物车按钮的产品卡片。"'
    • AI将调用 'generate-story' 工具，生成Storybook故事代码并显示给你。
    • 你可以继续对话，对已生成的故事进行修改： '"把按钮改成绿色，并添加一个数量选择器。"'
    • 你还可以查询可用组件： '"列出Story UI中所有可用的组件。"'
    • 或查看已生成的故事： '"显示我已生成的故事。"'
  3. 查看生成的故事: 生成的代码将自动保存到你的项目目录中（默认在'./src/stories/generated/'），并能实时在你的Storybook实例中预览。

信息

分类

开发者工具

访问项目