MCP protocol icon

Looba MCP Server

Give your AI assistant read-only access to the entire Looba library. Browse snippets, search by tag, and pull ready-to-use components — all from your IDE.

View on GitHub

No API key required. Node.js 18+

Installation

Remote URL

https://mcp.looba.dev

npx recommended

npx looba-mcp

npm

npm install -g looba-mcp

pip

pip install looba-mcp

Use the remote MCP URL if your client supports URL-based (Streamable HTTP) servers.

Available Tools

list_posts

Search and browse snippets with tag, type, and sort filters.

get_post

Retrieve full HTML/CSS/JS code with author attribution.

integrate_post

Fetch snippets with adaptation guidance for your project — CSS naming, design tokens, framework conversion, and more.

search_by_author

List all posts by a specific author.

get_popular_tags

Discover trending tags across the platform.

Supported Snippet Types

Classic

HTML, CSS, JavaScript

React

JSX, Styles (CSS), HTML (host)

Tailwind

HTML (with Tailwind classes), CSS, JavaScript

Configuration

Add to .mcp.json or ~/.claude/settings.json:

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

Go to Settings > MCP Servers > Add Server:

  • Name: looba
  • Command: npx -y looba-mcp

Add to ~/.windsurf/mcp.json:

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

Try It

Ask your AI assistant:

"Show me the most popular CSS snippets on Looba"
"Find Looba posts tagged with animation"
"Get the code for animated-circle-loaders-html-css-10"
"Integrate focus-trapped-navigation-controller into my React project"

All responses include source URL, author, and license — so AI assistants always cite properly.