ui-component-judgment-mcp

MCP-Server, der ein Tool bereitstellt, recommend_component, das beurteilt, ob ein UI-Komponentenbedarf mit einer bestehenden shadcn/ui- oder 21st.dev-Komponente gedeckt werden sollte oder einen individuellen Build erfordert, der von einer echten App-Referenz von Mobbin geleitet wird. Liefert ein strukturiertes Urteil, keine Liste von Suchergebnissen – gebaut für einen Agenten, der es mitten im Build konsumiert, nicht für einen Menschen zum Stöbern.

Dies implementiert die Urteilsebene, die im Produktbrief validiert wurde: Feld-/Anforderungsabdeckung, bewertet anhand echter Komponentenevidenz, schwellwertbasiert in use_existing / custom_build, mit einem no_candidates_found-Eimer, der von geringer Abdeckung getrennt bleibt, einer statischen Skip-Liste für triviale Primitive und einem computed_at-Zeitstempel, da Abdeckung eine Momentaufnahme ist, keine dauerhafte Tatsache.

So funktioniert es

Der Server scraped shadcn/21st.dev/Mobbin nicht selbst. Jeder Tool-Aufruf macht eine Anfrage an die Anthropic Messages API (claude-sonnet-4-6) mit dem serverseitigen web_search-Tool aktiviert und einem System-Prompt, der den gesamten Prozess kodiert: Skip-Listen-Prüfung, Anforderungsextraktion, Kandidatensuche, Evidenzabdeckungsbewertung, Schwellwert und – bei custom_build – eine Mobbin-Referenzsuche. Das Modell gibt strukturiertes JSON zurück, das der Server unverändert an den aufrufenden Agenten weitergibt.

Triviale Primitive (button, input, checkbox, label, badge, spinner, tooltip, avatar, icon) werden lokal abgefangen, bevor ein API-Aufruf erfolgt, sodass sie keine Anfrage verbrauchen.

Related MCP server: shadcn MCP Server

Einrichtung

npm install
npm run build

Erfordert ANTHROPIC_API_KEY, gesetzt in der Umgebung, in der der Server läuft.

Ausführen

ANTHROPIC_API_KEY=sk-ant-... npm start

Dies startet einen MCP-Server über stdio. Weisen Sie Ihren MCP-Client (Claude Code, Cursor, Claude Desktop usw.) darauf hin – die genaue Konfiguration hängt vom Client ab, sieht aber im Allgemeinen so aus:

{
  "mcpServers": {
    "ui-component-judgment": {
      "command": "node",
      "args": ["/path/to/ui-component-mcp/dist/index.js"],
      "env": { "ANTHROPIC_API_KEY": "sk-ant-..." }
    }
  }
}

Tool: recommend_component

Eingabe:

{
  "component_need": "price breakdown with fees and taxes",
  "domain": "Airbnb-style rental marketplace",
  "framework": "React + Tailwind",
  "existing_stack": "already using shadcn/ui"
}

component_need sollte spezifisch sein, keine Kategorie – „Preisaufschlüsselung mit Gebühren und Steuern“ nicht „Preisgestaltung“. Vage Kategorienamen sind das, was während der Validierung falsch-positive Übereinstimmungen erzeugt hat (eine generische SaaS-Preistabellen-Komponente, die als Übereinstimmung für einen Buchungs-Checkout gewertet wurde).

Ausgabe: JSON, das Folgendem entspricht:

{
  "verdict": "use_existing | custom_build",
  "confidence": "high | medium | low",
  "reason": "scored | no_candidates_found | skip_list",
  "computed_at": "2026-08-23",
  "requirements_checked": [ { "requirement": "...", "met": true, "evidence": "..." } ],
  "coverage": "5/7 (71%)",
  "recommendation": {
    "source": "21st.dev | shadcn | null",
    "install_command": "string | null",
    "reference": { "source": "Mobbin", "url": "...", "flow_name": "..." }
  }
}

Kosten

Jeder nicht-triviale Aufruf führt eine kurze mehrstufige Tool-Schleife aus (Suche → Bewertung → Antwort), die bei aktuellen Preisen mit Sonnet 5 ungefähr $0,06–$0,10 kostet ($2/M Eingabe, $10/M Ausgabe, $0,01 pro web_search-Aufruf) – skip-listed Primitive kosten $0, da sie nie die API erreichen. Drei Dinge halten das niedrig, ohne die Qualität zu beeinträchtigen:

• Prompt-Caching im System-Block (cache_control: ephemeral) – die Anweisungen sind bei jedem Aufruf identisch, sodass wiederholte Turns und wiederholte Aufrufe aus dem Cache lesen, anstatt den vollen Preis erneut zu berechnen.

• Ein 2-Suche-Budget für die Kandidatenfindung (1 mehr, wenn custom_build eine Mobbin-Suche auslöst), wobei shadcn und 21st.dev im selben Turn statt nacheinander durchsucht werden, sodass das wachsende Gespräch pro Aufruf weniger oft erneut gesendet wird.

• UI_JUDGMENT_MODEL-Umgebungsvariable (Standard: claude-sonnet-5) – ermöglicht den Wechsel zu einem günstigeren Modell (z. B. Haiku 4.5) ohne Codeänderung. Bevor Sie einem günstigeren Modell in der Produktion vertrauen, führen Sie die 5 validierten Testfälle aus dem Produktbrief erneut aus (Preisaufschlüsselung, Stornierungsrichtlinie, Einnahmen-Dashboard, Galerie, Messaging) und vergleichen Sie die Urteile mit denen von Sonnet – dies wurde nicht getestet, nur durchdacht.

Bekannte Einschränkungen (aus der Validierung übernommen)

• Kein Caching, bewusst. Jeder Aufruf sucht und bewertet von Grund auf neu. Ein custom_build-Urteil kann veralten, wenn Bibliotheken neue Komponenten veröffentlichen (validiert: shadcns Chat-Primitive vom Juni 2026 verwandelten eine wahrscheinlich individuelle Messaging-Komponente in eine nahezu perfekte Übereinstimmung). Wenn Sie Caching auf der Ebene des aufrufenden Agenten hinzufügen, halten Sie es nur sitzungsbezogen – persistieren Sie niemals ein Urteil über Sitzungen oder Builds hinweg.

• Die Skip-Liste ist ein Ausgangspunkt, noch nicht gegen reale Nutzung validiert. Protokollieren Sie jeden Aufruf und ob er die Skip-Liste getroffen hat; achten Sie auf Agenten, die das Tool trotzdem für skip-listed Elemente aufrufen (Liste zu eng) oder generische UI für etwas liefern, das hätte übersprungen werden sollen (Liste fehlt ein Eintrag).

• Nicht Ende-zu-Ende in einer vollständig sandboxed Umgebung testbar. Dieser Server benötigt ausgehenden Netzwerkzugriff auf api.anthropic.com plus das, was das web_search-Tool des Modells erreicht – er wird nicht an einem Ort laufen, der allgemeinen Internetzugriff blockiert.

• Anforderungsextraktion und Abdeckungsbewertung sind Ermessensentscheidungen des Modells in einem einzigen Durchgang, keine deterministischen Lookups. Überprüfen Sie frühe Ausgaben stichprobenartig gegen echte Komponenten, bevor Sie der Pipeline unbeaufsichtigt vertrauen, wie bei der manuellen Validierung.