Lightswind MCP Server 🤖

The world's first UI component library with native MCP support.
Gives AI coding agents (Cursor, Claude, Windsurf, Copilot) direct access to 150+ Lightswind UI components.

What is this?

When you add this MCP server to your AI coding tool, you can say:

"Build a landing page using Lightswind components"

...and the AI will automatically:

1. Query the Lightswind component catalog
2. Find the best matching components
3. Return ready-to-use React/JSX code

Quick Start

1. Add to Cursor IDE

Edit ~/.cursor/mcp.json (or Settings → MCP):

{
  "mcpServers": {
    "lightswind": {
      "command": "npx",
      "args": ["-y", "@lightswind/mcp-server"]
    }
  }
}

2. Add to Claude Desktop

Edit ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "lightswind": {
      "command": "npx",
      "args": ["-y", "@lightswind/mcp-server"]
    }
  }
}

3. Add to Windsurf

Edit ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "lightswind": {
      "command": "npx",
      "args": ["-y", "@lightswind/mcp-server"]
    }
  }
}

Available MCP Tools

| Tool | Description | |------|-------------| | list_all_components | Browse the full Lightswind component catalog | | get_component | Get full HTML + React code for any component | | search_components | Fuzzy search by natural language | | list_categories | List all component categories | | get_block | Get Pro template blocks (Hero, Pricing, etc.) | | list_blocks | List all Pro template blocks | | get_installation_guide | Setup guide for Next.js / React / Vite | | get_usage_example | Full page section examples |

Example Prompts

Once connected, try these in your AI tool:

"Use Lightswind to create a hero section with a neon button"
"Find me a Lightswind glassmorphism sidebar"
"Build a pricing page using Lightswind Pro blocks"
"Show me all Lightswind card components"
"Get the Lightswind animated marquee component"

Component Categories

buttons · cards · navbars · sidebars · tabs · alerts · breadcrumbs · dropdowns · loaders · marquees · texts · modals · forms

Links

• 🌐 Website: https://lightswind.com
• ⚡ Pro: https://pro.lightswind.com
• 📦 NPM: https://npmjs.com/package/lightswind
• 🤖 MCP Docs: https://modelcontextprotocol.io

Made with ❤️ by @codewithmuhilan