Lightswind UI MCP Server: React Component Library

What is the Lightswind UI MCP server?

Lightswind UI is a source-code React component library in the same copy-paste style as shadcn/ui. Components are installed into your own project with a CLI, so you own and edit the code. The README lists more than 160 animated, accessible components.

The MCP server ships inside the same package and starts with lightswind mcp. It gives an AI coding agent a way to browse the library and install components without guessing names or import paths.

What it changes in your workflow

• The agent searches components by keyword or use case and lists categories before it writes custom markup.
• It reads the installation guide and a usage example for a component, then fetches the full source.
• Components land in a local components/lightswind/ folder, and the agent imports from there, not from the package name.
• With a Pro license key set, it can also browse and fetch Pro page blocks.
• The agent stops suggesting a provider component or imports from the package root, which the README says do not exist.

What is in the library

The README groups components into 3D elements, backgrounds, advanced components, buttons, text effects, cursor effects, UI core, form controls and layout and navigation. It mentions 3D and WebGL shader components and integrated Framer Motion and GSAP animation.

The CLI asks for a color theme on init, with options such as default, deep-ocean, crimson, emerald, amber, amethyst and mono. It needs React 18 or 19, Tailwind CSS v3 or v4 and Node.js 18 or newer.

Who it suits

Best for

• React and Next.js teams that want animated marketing sections and effects as owned source.
• Agents that keep inventing component names. Compare the registry approach in the shadcn MCP server or the Starwind UI MCP server.
• Landing pages that need motion components, alongside the Magic UI MCP server.

Where to be careful

• It targets React with Tailwind only. It is not a design-file reader like the Figma MCP server.
• Pro blocks need a license key. The README does not state prices here, so check the pricing page before relying on them.
• Animated 3D and shader components add weight, so test performance on real devices.

Use it with UiChemy

This server is for React apps. If your site is on WordPress, UiChemy Composer writes real HTML, CSS and JS inside Elementor or Gutenberg instead. Click Get Started on uichemy.com to try it.

Connect Lightswind UI MCP Server: React Component Library to your AI client

npx lightswind@latest mcp init

1. Check requirements

   The README lists Node.js 18+, React 18 or 19, Tailwind CSS v3 or v4, and a Next.js, Vite, Remix or CRA project.

2. Initialize the library

   Run the init command from your project root. It detects the framework, finds the components folder, installs shared utilities and registers the Tailwind plugin.

3. Auto-configure MCP

   Run npx lightswind mcp init. The README says it detects your editor and writes the right config file.

4. Or configure by hand

   Add the block above to ~/.cursor/mcp.json for Cursor or Windsurf, or to the equivalent MCP settings file for another editor.

5. Add a Pro key if you have one

   Set the LIGHTSWIND_LICENSE_KEY environment variable in the server's env block to reach Pro blocks. Skip this for free components.

6. Restart and try a prompt

   Reload the client, then ask the agent to find a hero background component and install it.

Client configuration

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

Endpoints and ports

What you can do with it

• Source-code ownershipComponents are copied into your project, so you edit them freely and nothing ships as a runtime dependency.
• Component searchsearch_components and list_categories let the agent find parts by keyword, use case or category.
• Docs and usage on demandInstallation guides and usage snippets come back through the server, so the agent does not rely on remembered APIs.
• CLI-based installComponents install with npx lightswind add, and prerequisites such as a required progress component resolve automatically.
• Pro blocksPro page sections and premium components are reachable through the same server when a license key is configured.
• Editor auto-setupnpx lightswind mcp init writes the config for the editor it detects.
• Built-in themesInit offers seven color themes, including default, deep-ocean, crimson and mono.
• Agent guardrailsThe README has a section for AI agents that says to import from the local components folder and not from the package root.

Tools it exposes

Frequently asked questions