mcpField
M
Miro

Miro

远程服务
github.com/miroapp媒体与设计1646 周前更新
文档代码仓库

关于 Miro

Miro AI 开发者工具是一组将 AI 编码助手连接到 Miro 白板的 MCP 服务与插件。面向需要在白板上生成图表、提取设计上下文或同步任务的开发者，可通过自然对话完成操作。

主要功能

  1. 01通过 MCP 服务访问和编辑 Miro 白板
  2. 02生成流程图、时序图和 ERD
  3. 03将白板设计转换为代码
  4. 04同步 AI 对话与 Miro 表格中的任务
  5. 05提供 Claude Code、Gemini CLI 等平台的集成

适用场景

  1. 01根据白板草图生成代码
  2. 02为代码库在白板上生成架构图
  3. 03基于 PR 或分支变更进行可视化代码审查

MCP 相关

项目提供 Miro MCP 服务，AI 客户端通过 OAuth 授权后即可访问白板内容和工具，也为 Cursor、VSCode 等客户端提供 MCP 配置方式。

配置

远程服务无需本地安装。选择你使用的客户端，复制配置或使用一键安装。

服务地址https://mcp.miro.com/
一键复制安装命令
Claude CodeTerminal
Cursor.cursor/mcp.json
VS Code.vscode/mcp.json
Claude Desktopclaude_desktop_config.json
Windsurf~/.codeium/windsurf/mcp_config.json

命令在终端中运行；JSON 粘贴到对应客户端的 MCP 配置后重启。需要授权的服务会在首次连接时提示登录。

工具

详细介绍

Miro AI 开发者工具

文档

将 AI 编码助手连接到你的 Miro 看板。通过自然对话创建图表、提取上下文、根据设计生成代码并跟踪任务。

Gemini CLI 文档、图表和表格演示

分享你的反馈。

此仓库包含什么？

此仓库提供了将 AI 工具连接到 Miro 所需的一切：

组件功能
Miro MCP 服务为 AI Agent 提供访问 Miro 看板的 API
插件和扩展面向热门 AI 工具的预构建集成
文档使用和开发集成的指南
支持的 AI 工具
AI 工具集成方式
Claude Code插件
Gemini CLI扩展
Codex本地插件
KiroPower
Agent SkillsSkills
Cursor、VSCode、Windsurf 等MCP 配置

快速开始

第 1 步：选择你的 AI 工具

在下方选择你的 AI 工具，并按照安装步骤操作。

第 2 步：安装
Claude Code（推荐） 
/plugin marketplace add miroapp/miro-ai
/plugin install miro@miro-ai

miro 插件打包了所有技能（browse、code-review、code-spec、code-explain-on-board、diagram、doc、format、table）以及 Miro MCP 服务。

安装后重启 Claude Code。如果你之前手动配置过 Miro MCP，请移除重复配置，以避免冲突——插件已经会为你管理 MCP 连接。

完整文档请参阅 Claude Code 插件。

Gemini CLI 
gemini extensions install https://github.com/miroapp/miro-ai

Gemini CLI 会将此仓库作为扩展安装，从 gemini-extension.json 注册 Miro MCP 服务，并自动发现 skills/ 中打包的 8 个技能。重启 Gemini CLI，并在收到提示时完成身份验证。

请参阅 Gemini CLI 扩展 | 官方文档

Kiro
  1. 在 Kiro 中打开 Powers 面板
  2. 点击 Add power from GitHub
  3. 输入：miroapp/miro-ai，并选择 powers/code-gen

本地开发请参阅 CONTRIBUTING.md。

请参阅 Kiro Powers | 官方文档

Agent Skills（agentskills.io）

可移植的知识技能，适用于各类 AI 编码工具（Claude Code、Cursor、VS Code + Copilot、Codex 等）。

npx skills add miroapp/miro-ai                       # Interactive install
npx skills add miroapp/miro-ai --list                # List available skills
npx skills add miroapp/miro-ai --skill=miro-code-review   # Install specific skill

可用技能：miro-code-explain-on-board、miro-code-review、miro-code-spec

请参阅 Agent Skills 概览 | agentskills.io

其他 MCP 客户端（Cursor、VSCode + Copilot、Windsurf、Lovable、Replit 等）

将以下内容添加到 MCP 客户端配置文件中：

{
  "mcpServers": {
    "miro": {
      "url": "https://mcp.miro.com/"
    }
  }
}

**注意：**如果之后有适用于你的客户端的 Miro 插件或扩展， 请切换使用，并移除手动配置，以避免重复的服务。

客户端特定路径请参阅 MCP 设置指南。

第 3 步：身份验证

首次使用 Miro 命令时，系统会提示你进行身份验证：

  1. 浏览器窗口会打开 Miro OAuth
  2. 登录你的 Miro 帐户
  3. 授予对所需看板的访问权限
  4. 返回 AI 工具——连接成功！
第 4 步：试用

使用以下示例提示词测试设置：

"What's on my Miro board https://miro.com/app/board/..."

"Create a flowchart on Miro showing a user login flow"

"Summarize the architecture diagram on my Miro board"
开发者模式

想修改插件、在本地测试更改，或构建自己的插件？请参阅 CONTRIBUTING.md，了解开发环境设置说明。

Codex 插件会在本地生成到 codex-plugins/*/，仓库市场文件位于 .agents/plugins/marketplace.json。请参阅 Codex Plugins，了解生成的结构；并参阅 CONTRIBUTING.md，了解重新生成和本地测试。

避免重复的服务

如果你的客户端有 Miro 插件或扩展，请仅使用它——不要再手动添加 https://mcp.miro.com/。每种安装方式都会创建独立的 MCP 连接，并拥有各自的 OAuth 会话；同时运行多个连接会导致工具重复和身份验证混乱。

请参阅 Miro 开发者文档中的重复的 MCP 服务指南，了解诊断和清理步骤。

企业用户

需要管理员批准：如果你的组织使用 Miro Enterprise 计划，管理员必须先启用 MCP Server，你才能连接。

请参阅企业指南，了解设置说明。

你可以做什么？

技能（Claude Code）

只要用自然语言描述你的需求，技能就会自动激活。无需斜杠命令——只需附上 Miro 白板 URL。

技能触发条件
miro-code-explain-on-board“在……上解释这个代码库”、“在……上可视化架构”
miro-code-review“在……上审查 PR 123”、“在……上对这个分支进行可视化审查”
miro-code-spec“从……中提取规格”、“获取……处的设计文档”

在白板上创建内容——图表、文档、表格、便签和独立格式——无需技能。直接提出需求即可；Miro MCP 服务自带的工具可以完成这些操作，并会按需加载创作指南。

功能（所有平台）
功能描述
生成图表根据代码或描述创建流程图、时序图、ERD
生成代码将白板设计和线框图转换为可运行的代码
跟踪任务在 AI 对话和 Miro 表格之间同步任务
提取上下文读取白板内容，为 AI 工作流提供信息

可用插件

Claude Code
插件描述
miro核心 MCP 集成，包含 3 个捆绑技能（code-explain-on-board、code-review、code-spec）
Gemini CLI
扩展描述
miro核心 MCP 集成，包含捆绑技能
Codex
插件描述
miro核心 MCP 集成，支持原生 $miro:<skill> 激活和 MCP 访问
Agent Skills
技能描述
miro-code-explain-on-board在白板上用一组精简且符号规范的图表及配套文档解释代码库
miro-code-review对 PR、本地更改或分支比较进行可视化代码审查
miro-code-spec将 Miro 规格（文档、图表、原型、表格、图片）提取到 .miro/specs/
Kiro
Power描述
code-gen从设计到代码的工作流

安全性

  • OAuth 2.1 安全授权
  • 企业合规性标准
  • 通过你的 Miro 账户进行基于权限的访问
  • 速率限制 API 保护

文档

开始使用
平台指南
参考
开发
外部资源

支持的 MCP 客户端

Claude Code、Cursor、VSCode + GitHub Copilot、Gemini CLI、Lovable、Replit、Windsurf、Kiro、Glean、Devin、OpenAI Codex

反馈与支持

许可证

MIT — 参见 LICENSE

由 Miro 倾情打造

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。