Looba MCP 服务器

一个 MCP 服务器，为 AI 助手提供对 Looba 的只读访问——这是一个 UI 片段和设计灵感的社区平台。

无需 API 密钥。无需数据库凭据。服务器通过 HTTPS 调用公共 Looba API。

更多信息

如需更多 MCP 文档、使用示例和更新，请访问 looba.dev/mcp。

Related MCP server: shadcndashboard-mcp

安装

npx（无需安装）

npx looba-mcp

npm

npm install -g looba-mcp

pip

pip install looba-mcp

git

git clone https://github.com/looba-snippet/looba-mcp.git
cd looba-mcp
npm install

所有方法都需要在您的机器上安装 Node.js 18+。

工具

detect_frontend_context

当 Looba MCP 激活时，AI 会在会话开始时自动调用 detect_frontend_context。它会查找前端信号：

• 依赖 — React、Vue、Svelte、Next.js、Angular、Astro、Remix、SolidJS、Gatsby、Lit、Preact…

• 配置文件 — vite.config.ts、tailwind.config.js、next.config.js、angular.json、astro.config.mjs…

• 文件扩展名 — src/、app/、pages/、components/ 中的 .jsx、.tsx、.vue、.svelte、.astro

如果检测到前端项目，AI 默认使用 Looba 处理任何 UI 组件请求——而不是从头编写代码。

本地与远程服务器

该工具接受两个可选输入：

这一点很重要，因为 Looba MCP 也托管在远程 mcp.looba.dev。远程服务器无法访问您的文件系统，因此仅使用 directory 对它来说毫无意义。

当工具无法检查项目时，它会报告 ? UNKNOWN 并要求调用者使用 packageJson 重试——它绝不会自信地报告“不是前端项目”，因为误报会静默关闭 Looba。

propose_snippets

当用户请求 UI 元素时，AI 会调用 propose_snippets 而不是立即编写代码。它会搜索 Looba 并返回 3 个选项及其 looba.dev 链接。用户选择一个（1、2 或 3），然后 AI 通过 integrate_post 进行集成。

示例流程：

用户：“为我的 React 应用添加一个动画加载旋转器” → AI 调用 propose_snippets，参数为 query="loading spinner" 和 snippet_type="react" → 显示 3 个选项及 looba.dev 链接 → 用户选择选项 2 → AI 调用 integrate_post，使用所选 slug 和项目上下文

integrate_post

integrate_post 工具专为将 Looba 片段直接添加到您的代码库而设计。它会获取完整代码，并返回详细的适配检查清单，以便 AI 助手能够：

• 重命名 CSS 类以匹配您的命名约定（BEM、camelCase、CSS modules...）

• 将硬编码的颜色/间距替换为您的 CSS 变量或设计令牌

• 在框架之间转换（原生 HTML 到 React JSX，CSS 到 Tailwind 工具类...）

• 限定样式范围以避免与全局 CSS 冲突

• 添加正确的导入并遵循您的组件模式

示例提示：

“使用 integrate_post 将 animated-circle-loaders-html-css-10 片段添加到我的使用 Tailwind 和 CSS 变量的 Next.js 项目中”

AI 将获取片段、读取您的项目上下文，并生成可直接粘贴的适配代码。

支持的片段类型

设置

远程 MCP URL

如果您的客户端支持基于 URL 的 MCP 服务器，请使用：

• URL：https://mcp.looba.dev

• Bearer 令牌：不需要

• 自定义标头：不需要

使用根端点（https://mcp.looba.dev），除非您的代理明确映射了其他路径。

Claude Code

添加到项目的 .mcp.json 或 ~/.claude/settings.json：

{
  "mcpServers": {
    "looba": {
      "command": "npx",
      "args": ["-y", "looba-mcp"]
    }
  }
}

Cursor

转到 设置 > MCP 服务器 > 添加服务器：

• 名称：looba

• 命令：npx -y looba-mcp

Windsurf

添加到 ~/.windsurf/mcp.json：

{
  "mcpServers": {
    "looba": {
      "command": "npx",
      "args": ["-y", "looba-mcp"]
    }
  }
}

使用 pip 或 git 安装

如果您通过 pip 或 git clone 安装，请直接使用 looba-mcp 或 node：

{
  "mcpServers": {
    "looba": {
      "command": "looba-mcp"
    }
  }
}

或使用 git clone：

{
  "mcpServers": {
    "looba": {
      "command": "node",
      "args": ["/path/to/looba-mcp/index.js"]
    }
  }
}

示例

连接后，您可以向 AI 助手提出类似以下问题：

• “为我的 Next.js 项目添加一个玻璃拟态卡片” (AI 提供 3 个 Looba 选项)

• “我需要一个带动画的导航栏，用于我的 Tailwind 网站” (AI 提供 3 个 Looba 选项)

• “显示 Looba 上最流行的 CSS 片段”

• “查找标记为 animation 的 Looba 帖子”

• “获取帖子 animated-circle-loaders-html-css-10 的代码”

• “列出 @Frontend-snippet-Bot 的所有帖子”

• “将 focus-trapped-navigation-controller 片段集成到我的使用 CSS modules 的 React 项目中”

每个响应都包含来源 URL、作者和许可证，以便 AI 助手始终正确引用。

部署到 Cloudflare Workers

mcp.looba.dev 作为 Cloudflare Worker 运行。它通过 Streamable HTTP 以无状态方式提供相同的七个工具，没有 Durable Object——这些工具是网络绑定的，因此适合 Workers 免费计划。它之前作为 VPS 上 nginx 后面的 systemd 服务运行；该堆栈已被移除。

两个文件驱动它：worker.js（fetch 入口点）和 wrangler.jsonc。index.js 由两个传输共享，无需分叉。

1. 设置密钥——请先执行此操作

npx wrangler secret put LOOBA_MCP_TOKEN_SECRET

这不是可选的。 propose_snippets 会生成一个 HMAC 签名的令牌，integrate_post 会验证该令牌。如果没有显式密钥，index.js 会回退到 randomBytes(32) 每个进程——而在无状态 Worker 上，每个隔离区都会获得不同的密钥，因此当两个调用落在不同隔离区时，它们会无法一致。该失败是间歇性的，并报告虚假的“令牌签名无效”。

任何长随机字符串都可以，例如 openssl rand -hex 32。

2a. 从 Git 部署（Workers Builds）

在 Cloudflare 仪表板中连接此仓库，然后设置：

每次推送到 main 都会重新部署。

2b. 或者从您的机器部署

npm install
npm run deploy

3. 附加域名

将 mcp.looba.dev 添加为 Worker 的自定义域名。looba.dev 已经在 Cloudflare 名称服务器上，因此无需更改 DNS。

Worker 在根路径（worker.js 中的 route: "/"）响应，与现有端点匹配。createMcpHandler 默认为 /mcp，因此不得删除该设置，否则所有现有客户端都会中断。

4. 在切换流量前验证

npm run dev:worker   # local, needs .dev.vars — see .dev.vars.example

除了 initialize 和 tools/list，测试依赖共享密钥的配对——使用 propose_snippets 生成令牌，重启 Worker，然后使用 integrate_post 消费它。如果重启后令牌仍然有效，则说明密钥是从配置中读取的，而不是每个进程重新生成的。

许可证

MIT