使用说明
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）。
克劳德桌面版
-
找到您的配置文件：
- macOS：
~/Library/Application Support/Claude/claude_desktop_config.json - 窗户：
%APPDATA%\Claude\claude_desktop_config.json
- macOS：
-
编辑文件。 如果它不存在，请创建它。添加您的服务器配置：
{ "mcpServers": { "flowbite-svelte": { "command": "node", "args": ["/ABSOLUTE/PATH/TO/flowbite-svelte-mcp/build/server.js"] } } } -
重新启动克劳德桌面。
-
测试一下！问克劳德：
- “在flowbite瘦文档中搜索如何使用According，然后给我组件的详细信息。”
- “如何使用flowbite瘦复选框组件？”
- “flowbite瘦版有哪些组件？”
可用工具
| 工具名称 | 描述 |
|---|---|
findComponent |
查找Flowbite Svelte组件及其文档路径 |
getComponentList |
返回所有可用组件及其类别的列表 |
getComponentDoc |
返回特定组件的完整文档（markdown） |
searchDocs |
对所有Flowbite Svelte文档进行全文搜索 |
发展
项目结构
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中无法工作
解决：
- 检查路径是否正确
claude_desktop_config.json是正确和绝对的 - 更改配置后重新启动Claude Desktop
- 检查Claude Desktop日志是否有错误
贡献
欢迎投稿！请随时提交拉取请求。
