Looba MCP Server

Ein MCP-Server, der KI-Assistenten schreibgeschützten Zugriff auf Looba bietet – eine Community-Plattform für UI-Snippets und Design-Inspirationen.

Es ist kein API-Schlüssel erforderlich. Keine Datenbank-Anmeldedaten. Der Server ruft die öffentliche Looba-API über HTTPS auf.

Installation

npx (keine Installation nötig)

npx looba-mcp

npm

npm install -g looba-mcp

pip

pip install looba-mcp

git

git clone https://github.com/looba-snippet/looba-mcp.git
cd looba-mcp
npm install

Alle Methoden erfordern Node.js 18+ auf deinem Rechner.

Related MCP server: shadcndashboard-mcp

Tools

detect_frontend_context

Wenn Looba MCP aktiv ist, ruft die KI detect_frontend_context automatisch zu Beginn einer Sitzung auf. Dabei werden folgende Frontend-Signale erkannt:

• Abhängigkeiten — React, Vue, Svelte, Next.js, Angular, Astro, Remix, SolidJS, Gatsby, Lit, Preact …

• Konfigurationsdateien — vite.config.ts, tailwind.config.js, next.config.js, angular.json, astro.config.mjs …

• Dateierweiterungen — .jsx, .tsx, .vue, .svelte, .astro in src/, app/, pages/, components/

Wenn ein Frontend-Projekt erkannt wird, verwendet die KI standardmäßig Looba für jede UI-Komponenten-Anfrage – anstatt Code von Grund auf neu zu schreiben.

Das Tool akzeptiert zwei optionale Eingaben:

Das ist wichtig, weil Looba MCP auch remote unter mcp.looba.dev gehostet wird. Ein Remote-Server hat keinen Zugriff auf dein Dateisystem, daher sagt directory allein ihm nichts.

Wenn das Tool das Projekt nicht untersuchen kann, meldet es ? UNKNOWN und fordert den Aufrufer auf, es mit packageJson erneut zu versuchen – es meldet niemals selbstbewusst „kein Frontend-Projekt“, denn ein falsch negatives Ergebnis würde Looba stillschweigend deaktivieren.

propose_snippets

Wenn der Benutzer nach einem UI-Element fragt, ruft die KI propose_snippets auf, anstatt sofort Code zu schreiben. Sie durchsucht Looba und liefert 3 Optionen mit ihren looba.dev-Links. Der Benutzer wählt eine Option (1, 2 oder 3) aus, und die KI integriert sie über integrate_post.

Beispielablauf:

Benutzer: „Füge meiner React-App einen animierten Lade-Spinner hinzu“ → KI ruft propose_snippets mit query="loading spinner" und snippet_type="react" auf → Zeigt 3 Optionen mit looba.dev-Links → Benutzer wählt Option 2 → KI ruft integrate_post mit dem gewählten Slug und Projektkontext auf

integrate_post

Das Tool integrate_post ist dafür gedacht, wenn du ein Looba-Snippet direkt in deine Codebasis einfügen möchtest. Es ruft den vollständigen Code ab und liefert ihn zusammen mit einer detaillierten Anpassungs-Checkliste, damit die KI:

• CSS-Klassen umbenennen kann, damit sie zu deiner Namenskonvention passen (BEM, camelCase, CSS-Module …)

• Hartkodierte Farben/Abstände durch deine CSS-Variablen oder Design-Tokens ersetzen kann

• Zwischen Frameworks konvertieren kann (Vanilla-HTML zu React-JSX, CSS zu Tailwind-Utilities …)

• Styles eingenzen kann, um Konflikte mit deinem globalen CSS zu vermeiden

• Passende Imports hinzufügen und deinen Komponenten-Konventionen folgen kann

Beispielaufforderung:

„Verwende integrate_post, um das Snippet animated-circle-loaders-html-css-10 zu meinem Next.js-Projekt hinzuzufügen, das Tailwind und CSS-Variablen verwendet“

Die KI ruft das Snippet ab, liest den Projektkontext und erzeugt angepassten Code, der bereit zum Einfügen ist.

Unterstützte Snippet-Typen

Einrichtung

Remote-MCP-URL

Wenn dein Client URL-basierte MCP-Server unterstützt, verwende:

• URL: https://mcp.looba.dev

• Bearer-Token: nicht erforderlich

• Custom-Header: nicht erforderlich

Verwende den Root-Endpunkt (https://mcp.looba.dev), es sei denn, dein Proxy bildet einen anderen Pfad ab.

Claude Code

Füge zu deinem Projekt .mcp.json oder ~/.claude/settings.json hinzu:

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

Cursor

Gehe zu Einstellungen > MCP-Server > Server hinzufügen:

• Name: looba

• Befehl: npx -y looba-mcp

Windsurf

Füge zu ~/.windsurf/mcp.json hinzu:

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

Installation über pip oder git

Wenn du über pip oder git clone installiert hast, verwende looba-mcp oder node direkt:

{
  "mcpServers": {
    "looba": {
      "command": "looba-mcp"
    }
  }
}

Oder mit git clone:

{
  "mcpServers": {
    "looba": {
      "command": "node",
      "args": ["/path/to/looba-mcp/index.js"]
    }
  }
}

Beispiele

Sobald die Verbindung steht, kannst du deinen KI-Assistenten zum Beispiel Folgendes fragen:

• „Füge meinem Next.js-Projekt eine Glassmorphism-Karte hinzu“ (KI schlägt 3 Looba-Optionen vor)

• „Ich brauche eine Navigationsleiste mit Animationen für meine Tailwind-Seite“ (KI schlägt 3 Looba-Optionen vor)

• „Zeig mir die beliebtesten CSS-Snippets auf Looba“

• „Finde Looba-Beiträge mit dem Tag animation“

• „Hol den Code für den Beitrag animated-circle-loaders-html-css-10“

• „Liste alle Beiträge von @Frontend-snippet-Bot auf“

• „Integriere das Snippet focus-trapped-navigation-controller in mein React-Projekt mit CSS-Modulen“

Jede Antwort enthält Quell-URL, Autor und Lizenz, damit KI-Assistenten immer korrekt zitieren.

Bereitstellung auf Cloudflare Workers

mcp.looba.dev läuft als Cloudflare Worker. Er stellt dieselben sieben Tools über Streamable HTTP bereit, zustandslos und ohne Durable Object – die Tools sind netzwerkgebunden, daher passt das in den kostenlosen Workers-Plan. Zuvor lief der Dienst als systemd-Service hinter nginx auf einem VPS; dieser Stack wurde entfernt.

Zwei Dateien steuern ihn: worker.js (der fetch-Einstiegspunkt) und wrangler.jsonc. index.js wird von beiden Transports gemeinsam genutzt und benötigt keinen Fork.

1. Das Secret setzen – zuerst erledigen

npx wrangler secret put LOOBA_MCP_TOKEN_SECRET

Das ist nicht optional. propose_snippets erstellt ein HMAC-signiertes Token, das integrate_post verifiziert. Ohne explizites Secret greift index.js auf randomBytes(32) pro Prozess zurück – und bei einem zustandslosen Worker erhält jede Isolate ein anderes, sodass die beiden Aufrufe sich nicht einig werden, sobald sie auf verschiedenen Isolates landen. Der Fehler tritt intermittierend auf und meldet eine falsche „Token-Signatur ist ungültig“.

Jede beliebige lange Zufallszeichenkette funktioniert, z. B. openssl rand -hex 32.

2a. Bereitstellung über Git (Workers Builds)

Verbinde dieses Repository im Cloudflare-Dashboard und setze dann:

Jeder Push auf main stellt dann erneut bereit.

2b. Oder Bereitstellung von deinem Rechner aus

npm install
npm run deploy

3. Domain anhängen

Füge mcp.looba.dev als Custom Domain zum Worker hinzu. looba.dev befindet sich bereits auf Cloudflare-Nameservern, daher ist keine DNS-Änderung nötig.

Der Worker antwortet am Root-Pfad (route: "/" in worker.js), passend zum bestehenden Endpunkt. createMcpHandler standardmäßig auf /mcp, daher darf diese Einstellung nicht entfernt werden, sonst brechen alle bestehenden Clients.

4. Vor dem Umschalten des Datenverkehrs verifizieren

npm run dev:worker   # local, needs .dev.vars — see .dev.vars.example

Über initialize und tools/list hinaus solltest du das Paar testen, das vom gemeinsamen Secret abhängt – erstelle ein Token mit propose_snippets, starte den Worker neu und verwende es dann mit integrate_post. Wenn das Token nach einem Neustart weiterhin verifiziert wird, wird das Secret aus der Konfiguration gelesen und nicht pro Prozess neu generiert.

Lizenz

MIT