Flowbite-Svelte MCP Server

This is a Model Context Protocol (MCP) server for Flowbite-Svelte documentation.
It exposes tools to find components, query component docs, list components, and do full-text search, via stdio transport.

Features

• 🔍 Find Components - Search for components by name or category
• 📚 Get Documentation - Retrieve full component documentation
• 📋 List All Components - Get a complete list of available components
• 🔎 Full-Text Search - Search across all documentation

Getting Started

Installation

git clone [email protected]:shinokada/flowbite-svelte-mcp.git
cd flowbite-svelte-mcp
pnpm install

Setup

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

Usage

This server uses stdio transport, so it's compatible with MCP clients that launch via stdin/stdout (e.g. Claude Desktop, ChatGPT Desktop, MCP Inspector).

Claude Desktop

1. Locate your configuration file:

   • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
   • Windows: %APPDATA%\Claude\claude_desktop_config.json

2. Edit the file. If it doesn't exist, create it. Add your server configuration:

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

3. Restart Claude Desktop.

4. Test it! Ask Claude:

   • "Search the flowbite-svelte docs for how to use an Accordion, then give me the component details."
   • "How do I use the flowbite-svelte checkbox component?"
   • "What components are available in flowbite-svelte?"

Available Tools

Development

Project Structure

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

Scripts

# 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

Technical Details

Architecture

• Framework: Built with tmcp (TypeScript MCP SDK)
• Transport: Stdio transport for MCP client communication
• Schema Validation: Zod with JSON Schema adapter
• Documentation Source: Local files copied from flowbite-svelte.com

Data Flow

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

Why Local Files?

We store documentation files locally (instead of fetching remotely) for:

• ⚡ Performance - No network latency
• 🔌 Offline Support - Works without internet
• 🎯 Reliability - No external service dependencies
• 📦 Self-Contained - Everything bundled together
• 🔒 Security - Reduces external attack surface and eliminates need for runtime network permissions/calls.

Testing

The project includes a comprehensive test suite using Vitest:

# Run all tests
pnpm test

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

# Coverage report
pnpm test:coverage

See tests/README.md for more details on the test suite.

Troubleshooting

Build fails with missing modules

Solution: Run pnpm install to ensure all dependencies are installed.

Tools not working in Claude Desktop

Solutions:

1. Check that the path in claude_desktop_config.json is correct and absolute
2. Restart Claude Desktop after making configuration changes
3. Check Claude Desktop logs for errors

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT

Links

• Flowbite-Svelte Documentation
• MCP Protocol Specification
• tmcp TypeScript SDK

Made with ❤️ for the Flowbite-Svelte community