MCP-Server

manniche-ui

Von der Idee zur Komponente.

Gib deinem Coding-Agenten Zugriff auf Manniche UI. Er findet die passende Komponente, liest Code und Beispiel und installiert sie in deinem Projekt.

Öffentlicher Zugang
Kein API-Schlüssel
Streamable HTTP

Claude Code

$ claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp

Codex

$ codex mcp add manniche-ui --url https://mikkelmanniche.dk/api/mcp

Cursor

{
  "mcpServers": {
    "manniche-ui": {
      "url": "https://mikkelmanniche.dk/api/mcp"
    }
  }
}

Führe den Befehl im Terminal aus und starte eine neue Agentensitzung. Cursor liest das JSON aus .cursor/mcp.json.

Die Adresse für andere MCP-Clients

https://mikkelmanniche.dk/api/mcp

Beispiel ansehen

Wählen Sie eine Frage und sehen Sie, was passiert: die Frage, der Aufruf an den Server und die Antwort. Die Antworten sind echte Antworten des Servers, vorab aufgezeichnet.

Komponente finden

Hat Manniche UI ein Chat-Eingabefeld für meinen Agenten?

search_components{ "query": "chat input" }Läuft …Fertig

Antwort des Servers (JSON, gekürzt)

{
  "content": [
    {
      "type": "text",
      "text": "- prompt-input (agent): A chat input that grows with the text, takes files, and turns into a stop button while the agent writes."
    }
  ],
  "isError": false
}

Ja, Prompt input passt. Soll ich es installieren?

prompt-inputKI-OberflächenEin Chatfeld, das mit dem Text wächst, Dateien annimmt und zur Stopp-Taste wird, während der Agent schreibt.

Zwei installieren

Installiere prompt-input und tool-approval in meiner App.

get_install_plan{ "names": ["prompt-input", "tool-approval"] }Läuft …Fertig

Antwort des Servers (JSON, gekürzt)

{
  "content": [
    {
      "type": "text",
      "text": "Install plan for: prompt-input, tool-approval …"
    }
  ],
  "isError": false
}

Der Plan hat vier Schritte. Ich führe sie in deinem Projekt aus:

Nur wenn das Projekt keine components.json hatnpx shadcn@latest init
Beide Komponenten hinzufügennpx shadcn@latest add @manniche/prompt-input @manniche/tool-approval
Aus components/ importierenimport { PromptInput } from '@/components/prompt-input'
In der laufenden App prüfen

Code lesen

Wie verwende ich hold-to-confirm?

get_component{ "name": "hold-to-confirm" }Läuft …Fertig

Antwort des Servers (JSON, gekürzt)

{
  "content": [
    {
      "type": "text",
      "text": "# Hold to confirm (`hold-to-confirm`) …"
    }
  ],
  "isError": false
}

Der Button füllt sich, solange er gehalten wird, und ruft onConfirm auf, wenn er voll ist:

import { HoldToConfirm } from '@/components/hold-to-confirm'

<HoldToConfirm onConfirm={() => console.log('store closed')} doneLabel="Store closed">
  Hold to close the store
</HoldToConfirm>

Abhängigkeiten: lucide-react, utils

Der Server liest nur die Bibliothek. Dein Agent installiert lokal und sollte prüfen, ob die Komponente in deiner App funktioniert.

Werkzeuge 4

list_components
Alle Komponenten mit Kategorie und einer Zeile zu jeder.
search_components
Durchsucht Namen, Beschreibungen und Kategorien.
get_component
Beschreibung, Abhängigkeiten, Installationsbefehl, Beispiel und der ganze Quellcode.
get_install_plan
Die Schritte, um eine oder mehrere Komponenten in einem Projekt zu installieren.

Oder den MCP von shadcn nutzen

Hat dein Projekt schon eine components.json, findet auch der lokale MCP-Server von shadcn die Komponenten, sobald die Registry eingetragen ist.

{
  "registries": {
    "@manniche": "https://mikkelmanniche.dk/lab/r/{name}.json"
  }
}

$ npx shadcn@latest mcp init --client claude