Flowbite Svelte MCP

Flowbite Svelte MCP服务器

这是一个 模型上下文协议（MCP） Flowbite Svelte文档服务器。\ 它提供了通过stdio传输查找组件、查询组件文档、列出组件和进行全文搜索的工具。

特性

• 🔍 查找组件 -按名称或类别搜索组件
• 📚 获取文档 -检索完整的组件文档
• 📋 列出所有组件 -获取可用组件的完整列表
• 🔎 全文检索 -搜索所有文档

入门指南

安装

git clone git@github.com:shinokada/flowbite-svelte-mcp.git
cd flowbite-svelte-mcp
pnpm install

设置

# Build the project (TypeScript compilation + data copy)
pnpm run build

用法

此服务器使用stdio传输，因此它与通过stdin/stdout启动的MCP客户端兼容（例如Claude Desktop、ChatGPT Desktop、MCP Inspector）。

克劳德桌面版

1. 找到您的配置文件：

- macOS： ~/Library/Application Support/Claude/claude_desktop_config.json - 窗户： %APPDATA%\Claude\claude_desktop_config.json

1. 编辑文件。 如果它不存在，请创建它。添加您的服务器配置：

   {
     "mcpServers": {
       "flowbite-svelte": {
         "command": "node",
         "args": ["/ABSOLUTE/PATH/TO/flowbite-svelte-mcp/build/server.js"]
       }
     }
   }

1. 重新启动克劳德桌面。

1. 测试一下！问克劳德：

- “在flowbite瘦文档中搜索如何使用According，然后给我组件的详细信息。” - “如何使用flowbite瘦复选框组件？” - “flowbite瘦版有哪些组件？”

可用工具

发展

项目结构

flowbite-svelte-mcp/
├── src/
│   ├── data/
│   │   ├── components.json      # Component registry
│   │   └── llm/                 # Documentation files (generated)
│   ├── tools/                   # MCP tool implementations
│   └── server.ts                # MCP server entry point
├── build/                       # Compiled output (generated)
├── scripts/
│   ├── copyLlmData.ts          # Copy docs from flowbite-svelte.com
│   ├── postbuild.ts            # Copy data to build directory
│   └── generateComponentRegistry.ts
└── package.json

脚本

# Copy LLM documentation from flowbite-svelte.com.
pnpm run copy:llm

# Generate component registry
pnpm run gen:registry

# Build the project (TypeScript compilation + data copy)
pnpm run build

# Start the server (for manual testing/debugging) (Executed by Claude, rarely by developer)
pnpm run start 

# Testing
pnpm test              # Run all tests
pnpm test:watch        # Run tests in watch mode
pnpm test:coverage     # Run tests with coverage report

# Linting and formatting
pnpm run lint
pnpm run lint:fix
pnpm run format
pnpm run format:check

技术细节

建筑

• 框架： 内置于 tmcp （TypeScript MCP SDK）
• 运输： MCP客户端通信的标准传输
• 架构验证： 带JSON模式适配器的Zod
• 文件来源： 从flowbite-velte.com复制的本地文件

数据流

https://flowbite-svelte.com/llm/
          ↓ (copy:llm script)
src/data/llm/
          ↓ (build → postbuild)
build/data/llm/
          ↓ (runtime)
MCP Tools → Claude/Client

为什么是本地文件？

我们在本地存储文档文件（而不是远程获取），用于：

• ⚡ 演出 -无网络延迟
• 🔌 离线支持 -在没有互联网的情况下工作
• 🎯 可靠性 -无外部服务依赖关系
• 📦 独立 -一切都捆绑在一起
• 🔒 安全 -减少外部攻击面，消除对运行时网络权限/调用的需求。

测试

该项目包括一个使用Vitest的全面测试套件：

# Run all tests
pnpm test

# Watch mode (auto-rerun on changes)
pnpm test:watch

# Coverage report
pnpm test:coverage

看 测试/README.md 有关测试套件的更多详细信息。

故障排除

构建失败，缺少模块

解决方案： 跑 pnpm install 以确保安装了所有依赖项。

工具在Claude Desktop中无法工作

解决：

1. 检查路径是否正确 claude_desktop_config.json 是正确和绝对的
2. 更改配置后重新启动Claude Desktop
3. 检查Claude Desktop日志是否有错误

贡献

欢迎投稿！请随时提交拉取请求。

许可证

麻省理工学院

链接

• Flowbite Svelte文档
• MCP协议规范
• tmcp TypeScript SDK

______________________________________________________________________

由...制作❤️ Flowbite Svelte社区