MCP Server

AI assistants can generate component code quickly, but they often guess on library-specific details like exact attribute names, defaults, and events. @loomidev/mcp-server solves this by exposing LoomiUI docs through an MCP server your assistant can query directly.

Think of it as a live docs lookup for your AI tool: instead of guessing, it can ask for the exact API for components like <loomi-datepicker>.

All component docs are bundled inside the package. That means:

• no network requests to fetch docs
• no filesystem access beyond the package itself

You do not import this package into your app code. Your editor/assistant launches it in the background only when needed.

What it exposes

Tool	What it does
list_components	Returns all components, with optional category filtering (standalone, forms, content, navigation).
search_components	Searches components by keyword across name, description, and category.
get_component_docs	Returns full docs for a single component (usage, attributes, events) by name or tag.

There is also a readable resource per component at loomi://docs/<name> (for example, loomi://docs/button) for clients that prefer resource reads over tool calls.

Setup

Before starting, install Node.js. The examples below use npx, which comes with npm.

Add this server entry to your AI tool config:

// add this config to Claude Code/Desktop and Cursor

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

"command": "npx" tells the client to download and run the package. -y skips the install confirmation prompt.

Where to put the config

Choose your editor below and paste in the matching config (above).

• If the config file does not exist, create it.
• Save the file, then fully restart the editor/assistant.
• After restart, it should launch the loomiui MCP server automatically.

Note: VS Code uses servers instead of mcpServers.

Claude Code

Add the server configuration to your Claude Code MCP settings.

• Project-level: .claude/settings.json
• Interactive setup: Run /mcp from within a Claude Code session.

Cursor

Add the configuration to one of the following files:

• Global (all projects): ~/.cursor/mcp.json
• Project-only: .cursor/mcp.json

VS Code

VS Code uses servers (not mcpServers).

For one project, create: .vscode/mcp.json:

{
  "servers": {
    "loomiui": {
      "command": "npx",
      "args": ["-y", "@loomidev/mcp-server"]
    }
  }
}

For all projects, open the Command Palette (Cmd+Shift+P on macOS or Ctrl+Shift+P on Windows and Linux), run MCP: Open User Configuration, and add the same JSON configuration.

The first time Visual Studio Code starts the server, it will prompt you to trust it. Click Approve, then select LoomiUI Tools from the Chat tool picker.

Claude Desktop

Add the config to claude_desktop_config.json.

Verify the server from the terminal

Before configuring Claude Code, Cursor, or Visual Studio Code, you can verify that the MCP server starts correctly by running it directly from a terminal.

Use any terminal application, such as Terminal, iTerm, or your editor’s integrated terminal. The command can be run from any directory.

npx -y @loomidev/mcp-server

 

If the server starts successfully, the terminal may appear idle. This is expected. MCP servers communicate over standard input and output (stdio), so the process waits for an MCP client, such as Claude Code, Cursor, or Visual Studio Code, to connect.

Press Ctrl+C to stop the server and return to the command prompt.

Working from source

Most teams can skip this section.

Use a local source build only when you:

• are developing LoomiUI itself
• want to test MCP server changes before publishing

Build the MCP server from your LoomiUI workspace

If your LoomiUI repo is at ~/Projects/loomiui:

cd ~/Projects/loomiui/components
pnpm --filter @loomidev/mcp-server build

Point your MCP config to the built file

Use an absolute path to dist/index.js:

{
  "mcpServers": {
    "loomiui": {
      "command": "node",
      "args": ["/Users/your-name/Projects/loomiui/components/packages/mcp-server/dist/index.js"]
    }
  }
}

(Optional) Run it manually from another project

You can also start the built server directly from a consuming app:

cd ~/Projects/my-app
node /Users/your-name/Projects/loomiui/components/packages/mcp-server/dist/index.js

This still runs the server code from your local LoomiUI workspace. It does not install @loomidev/mcp-server into my-app.

Using it in your assistant

Once connected, your assistant can look up LoomiUI docs in real time before writing code. That means fewer guessed props, fewer wrong event names, and less back-and-forth.

Use prompts like these:

Add a LoomiUI date range picker with a max date of today.

Create a LoomiUI button that shows a loading state while saving and emits an event when clicked.

Build a form with LoomiUI inputs and validation messages for email and password.

What are all available attributes for loomi-datepicker? Show a quick usage example.

How it works

When connected to the LoomiUI MCP server, the assistant retrieves information directly from the current LoomiUI documentation instead of relying on its training data.

A typical request follows this flow:

1. Use search_components to find the most relevant component.
2. Call get_component_docs to retrieve the component’s documentation, including its attributes, events, slots, methods, and usage examples.
3. Generate code using the retrieved documentation.

 

For example, when you ask for a date picker:

1. Find the Date Picker component with search_components.
2. Retrieve its documentation with get_component_docs.
3. Generate code using the documented API, including attributes such as range, max-date, and format.

Related

• CLI → — scaffold Pro starter kits, apply themes, and manage blocks with loomi-pro.
• Components → — browse every LoomiUI component the MCP server exposes.