AI导哈

MCP应用UI生成器

bloom-ui-mcp是一个快速生成具有交互式UI的MCP应用的生成器，简化了配置和SDK设置流程，适用于开发MCP应用的场景。

  • by Rixmerz
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 Rixmerz/bloom-ui-mcp

使用说明

布鲁姆ui mcp

英语 | 西班牙语

🌸 英语

什么是bloom-ui-mcp？

用于创建的生成器 具有交互式UI的MCP应用程序 在几秒钟内。不要再纠结于样板、捆绑配置和SDK设置——只需将你的想法转化为可工作的应用程序。

把它想象成 创建反应应用程序，但适用于具有UI的MCP应用程序.

它解决的问题

创建带有UI的MCP应用程序需要：

  • 正确的节点版本（v20+ import.meta.dirname)
  • Vite配置 vite-plugin-singlefile 用于捆绑
  • 这 --stdio 克劳德桌面的标志
  • 正确的SDK导入和应用程序类设置
  • 构建实际有效的脚本

布鲁姆ui mcp 自动处理所有这些。

安装

# Clone the repository
git clone https://github.com/Rixmerz/bloom-ui-mcp.git
cd bloom-ui-mcp

# Install dependencies
npm install

# Build
npm run build

添加到克劳德桌面

将此添加到您的 claude_desktop_config.json:

{
  "mcpServers": {
    "bloom-ui-mcp": {
      "command": "/path/to/node/v22/bin/node",
      "args": [
        "/path/to/bloom-ui-mcp/dist/index.js",
        "--stdio"
      ]
    }
  }
}

注： 需要Node.js v20+（建议使用v22）。找到你的路 which node 或 nvm which 22.

用法

列出可用模板

"List the available MCP App templates"

退货： blank, calculator, form, chart

创建新的MCP应用程序

"Create a new MCP App called 'my-dashboard' with the form template in /Users/me/projects"

这将生成一个完整的项目，其中包括：

  • 所有配置文件（package.json、tsconfig、vite.config）
  • 带有工具和资源注册的服务器
  • 已正确捆绑SDK的UI模板
  • 构建开箱即用的脚本

验证现有项目

"Validate my MCP App project at /path/to/project"

检查：

  • ✅ 节点版本>=20
  • ✅ Bun已安装
  • ✅ 必需的依赖关系
  • ✅ 文件结构
  • ✅ 构建脚本正确性
  • ✅ 构建输出已存在

模板

模板 说明
空白 按钮的最小起点
计算器 将结果发送给代理的交互式计算器
形式 向代理提交数据的输入表单
图表 基于画布的条形图，包含示例数据

需求

  • Node.js v20+（建议使用v22）
  • 包子 （适用于建筑生成项目）
  • 克劳德桌面版 或兼容的MCP主机

运作原理

  1. 模板 通过正确的SDK设置嵌入生成器中
  2. 占位符 ({{NAME}}, {{DESCRIPTION}}等）被你的价值观所取代
  3. 验证 确保避免常见错误
  4. 构建脚本 使用适用于Claude Desktop的精确配置

高级模式和已知限制

将服务器数据传递给UI

如果您的MCP应用程序需要来自服务器的数据（API调用、数据库等）， 请勿使用 callServerTool 从UI。这会导致JSON-RPC错误。

相反，当资源加载时，直接将数据注入HTML：

在server.ts中：

registerAppResource(server, resourceUri, resourceUri, { mimeType: RESOURCE_MIME_TYPE },
  async (): Promise<ReadResourceResult> => {
    const data = await fetchMyData();  // Your server-side data
    let html = await fs.readFile(path.join(DIST_DIR, "mcp-app.html"), "utf-8");

    // Inject as global variable
    const dataScript = `<script>window.__MY_DATA__ = ${JSON.stringify(data)};</script>`;
    html = html.replace("</head>", `${dataScript}</head>`);

    return { contents: [{ uri: resourceUri, mimeType: RESOURCE_MIME_TYPE, text: html }] };
  },
);

在mcp-app.ts中：

declare global {
  interface Window {
    __MY_DATA__?: MyDataType[];
  }
}

// Use the injected data
const data = window.__MY_DATA__ || [];

已知限制

问题 原因 解决方案
克劳德桌面挂起 错误 registerAppResource args 使用 resourceUri 作为第二和第三个论点
UI未显示 URI方案错误 使用 ui://name/mcp-app.html （不是 name://ui/...)
JSON-RPC错误 调用 callServerTool 从UI 改为在HTML中嵌入数据
工具调用后隐藏UI 从工具返回JSON 返回简单文本，如 "App opened."
构建失败 注册顺序错误 先注册工具，再注册资源
外部图像被阻止 Claude Desktop中的CSP策略 在服务器上转换为base64（见下文）

加载外部图像

由于内容安全策略（CSP），Claude Desktop会阻止外部图像。为了显示来自外部API的图像， 在服务器上将它们转换为base64 并嵌入为数据URI：

在server.ts中：

async function fetchImageAsBase64(url: string): Promise<string | null> {
  try {
    const response = await fetch(url);
    if (!response.ok) return null;

    const arrayBuffer = await response.arrayBuffer();
    const base64 = Buffer.from(arrayBuffer).toString("base64");

    // Detect mime type from URL extension
    const ext = url.split(".").pop()?.toLowerCase();
    const mimeType = ext === "gif" ? "image/gif"
                   : ext === "png" ? "image/png"
                   : "image/jpeg";

    return `data:${mimeType};base64,${base64}`;
  } catch {
    return null;
  }
}

// Usage in registerAppResource:
const imageBase64 = await fetchImageAsBase64("https://example.com/image.png");
const dataScript = `<script>window.__IMAGE__ = ${JSON.stringify(imageBase64)};</script>`;

在mcp-app.ts中：

const imageData = window.__IMAGE__;
if (imageData) {
  document.getElementById("my-image")!.innerHTML =
    `<img src="${imageData}" alt="description" />`;
}

这绕过了CSP，将图像作为数据URI直接嵌入HTML中。

🌸 西班牙语

什么是Bloom-UI-MCP？

用于创建的生成器 MCP应用程序与UI交互 在几秒钟内。停止与BoilerPlate、捆绑配置和SDK设置的斗争-只需在功能应用程序中蓬勃发展您的想法。

认为他是 创建生殖但MCP应用程序con-UI.

它解决的问题

使用UI创建MCP应用程序需要：

  • 正确的节点版本（V20+for import.meta.dirname)
  • 快速配置 vite-plugin-singlefile 对位捆绑
  • El旗 --stdio 适用于Claude桌面
  • 从SDK和应用程序类安装程序中正确导入
  • 真正有效的构建脚本

布鲁姆ui mcp 它会自动处理这一切。

安装

# Clonar el repositorio
git clone https://github.com/Rixmerz/bloom-ui-mcp.git
cd bloom-ui-mcp

# Instalar dependencias
npm install

# Compilar
npm run build

添加到克劳德桌面

将此添加到您的 claude_desktop_config.json:

{
  "mcpServers": {
    "bloom-ui-mcp": {
      "command": "/ruta/a/node/v22/bin/node",
      "args": [
        "/ruta/a/bloom-ui-mcp/dist/index.js",
        "--stdio"
      ]
    }
  }
}

注： 需要Node.js V20+（推荐V22）。找到你的路线 which node 哦 nvm which 22.

使用

列出可用模板

"Lista los templates de MCP App disponibles"

返回 ： blank, calculator, form, chart

创建新的MCP应用程序

"Crea un nuevo MCP App llamado 'mi-dashboard' con el template form en /Users/yo/proyectos"

这产生了一个完整的项目：

  • 所有配置文件（package.json、tsconfig、vite.config）
  • 具有注册工具和资源的服务器
  • 正确绑定SDK的UI模板
  • 从一开始就运行的构建脚本

验证现有项目

"Valida mi proyecto MCP App en /ruta/al/proyecto"

检查 ：

  • ✅ 节点版本>=20
  • ✅ Bun instalado
  • ✅ 所需的依赖关系
  • ✅ 档案结构
  • ✅ 正确的生成脚本
  • ✅ 已存在重建输出

模板

模板 描述
空白 带有按钮的最小起点
计算器 向代理发送结果的交互式计算器
形式 带有向代理发送数据的输入的窗体
图表 画布上的条形图和示例数据

要求

  • Node.js V20+（推荐V22）
  • 包子 （用于编译生成的项目）
  • 克劳德桌面版 u主机MCP兼容

它是如何工作的

  1. 洛杉矶 模板 它们被嵌入到具有正确SDK设置的生成器中
  2. 洛杉矶 占位符 ({{NAME}}, {{DESCRIPTION}}等）被你的价值观所取代
  3. 啦 验证 确保避免常见错误
  4. 洛杉矶 脚本反构建 他们使用与Claude Desktop一起工作的精确设置

先进的模式和已知的限制

将数据从服务器传递到用户界面

如果您的MCP应用程序需要服务器数据（API调用、数据库等）， 无用途 callServerTool 从UI。这会导致JSON-RPC错误。

相反，当加载资源时，它直接将数据插入HTML：

En-server.ts：

registerAppResource(server, resourceUri, resourceUri, { mimeType: RESOURCE_MIME_TYPE },
  async (): Promise<ReadResourceResult> => {
    const data = await fetchMyData();  // Tus datos del servidor
    let html = await fs.readFile(path.join(DIST_DIR, "mcp-app.html"), "utf-8");

    // Inyectar como variable global
    const dataScript = `<script>window.__MY_DATA__ = ${JSON.stringify(data)};</script>`;
    html = html.replace("</head>", `${dataScript}</head>`);

    return { contents: [{ uri: resourceUri, mimeType: RESOURCE_MIME_TYPE, text: html }] };
  },
);

En mcp-app.ts：

declare global {
  interface Window {
    __MY_DATA__?: MyDataType[];
  }
}

// Usar los datos inyectados
const data = window.__MY_DATA__ || [];

已知限制

问题 原因 解决方案
Claude Desktop挂起 args不正确 registerAppResource 使用 resourceUri 作为第二和第三个论点。
UI未显示 URI架构不正确 使用 ui://nombre/mcp-app.html （没有 nombre://ui/...)
JSON-RPC错误 调用 callServerTool 从UI 将数据嵌入HTML
工具调用后隐藏的 UI 从工具返回 JSON 返回简单文本 "App abierta."
构建失败 注册命令不正确 首先注册工具，然后注册资源
外部图像被阻止 克劳德桌面上的CSP策略 在服务器上转换为Base64（见下文）

加载外部图像

Claude Desktop通过安全策略（CSP）阻止外部图像。要显示外部API的图像， 将它们转换为服务器上的Base64 并将其作为数据URI：

En-server.ts：

async function fetchImageAsBase64(url: string): Promise<string | null> {
  try {
    const response = await fetch(url);
    if (!response.ok) return null;

    const arrayBuffer = await response.arrayBuffer();
    const base64 = Buffer.from(arrayBuffer).toString("base64");

    // Detectar tipo MIME por extensión
    const ext = url.split(".").pop()?.toLowerCase();
    const mimeType = ext === "gif" ? "image/gif"
                   : ext === "png" ? "image/png"
                   : "image/jpeg";

    return `data:${mimeType};base64,${base64}`;
  } catch {
    return null;
  }
}

// Uso en registerAppResource:
const imageBase64 = await fetchImageAsBase64("https://ejemplo.com/imagen.png");
const dataScript = `<script>window.__IMAGE__ = ${JSON.stringify(imageBase64)};</script>`;

En mcp-app.ts：

const imageData = window.__IMAGE__;
if (imageData) {
  document.getElementById("mi-imagen")!.innerHTML =
    `<img src="${imageData}" alt="descripción" />`;
}

这通过将图像直接嵌入HTML作为数据URI来防止CSP。

许可证/执照

麻省理工学院

用做🌸 由社区|完成🌸 为了社区

相关 MCP