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 => {
    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 = `window.__MY_DATA__ = ${JSON.stringify(data)};`;
    html = html.replace("", `${dataScript}`);

    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__ || [];

已知限制

加载外部图像

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

在server.ts中：

async function fetchImageAsBase64(url: string): Promise {
  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("");
const dataScript = `window.__IMAGE__ = ${JSON.stringify(imageBase64)};`;

在mcp-app.ts中：

const imageData = window.__IMAGE__;
if (imageData) {
  document.getElementById("my-image")!.innerHTML =
    ``;
}

这绕过了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 => {
    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 = `window.__MY_DATA__ = ${JSON.stringify(data)};`;
    html = html.replace("", `${dataScript}`);

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

En-server.ts：

async function fetchImageAsBase64(url: string): Promise {
  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("");
const dataScript = `window.__IMAGE__ = ${JSON.stringify(imageBase64)};`;

En mcp-app.ts：

const imageData = window.__IMAGE__;
if (imageData) {
  document.getElementById("mi-imagen")!.innerHTML =
    ``;
}

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

______________________________________________________________________

许可证/执照

麻省理工学院

______________________________________________________________________

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