Basecoat UI

Name: Basecoat UI
Author: Sorbh

von SorbhVersion 2.0.1i★ 16iLäuft auf deinem Computer

Name in der Registryio.github.Sorbh/basecoat-ui-mcp

So installierst du es

What it does

Basecoat UI 1.0 components (shadcn/ui look in plain HTML + Tailwind) with usage docs and setup.

Connects Läuft auf deinem Computer
Account or key No key needed
Category Web & Browser

Installation

Wähle die KI-App, die du nutzt, und kopiere die Einstellungen.

2/3 Prüfungen bestanden · Läuft auf deinem Computer · ✓ Befehle geprüft am 13. Nov. 2026

Zuerst: Welche KI nutzt du?

ClaudeWeb · App · HandyChatGPTWebClaude CodeTerminalCursorCode-EditorVS CodeCode-EditorAndereAndere Apps

Wähle deine App, dann erscheinen die Schritte unten.

Klappt mit Claude, aber erst etwas vorbereiten

Installiere zuerst Node.js auf deinem Computer (nur einmal) · Nur in der Claude-App für den Computer (Windows oder Mac), nicht im Web oder auf dem Handy

Von der KI installieren lassen

Kopiere diese Nachricht in einen Claude-Chat. Die KI prüft deinen Rechner, sagt dir, welche Datei sie ändert, und wartet jedes Mal auf dein OK.

Installiere bitte den MCP server Basecoat UI für Claude auf diesem Rechner, in dieser Reihenfolge: 1) Prüfe Node.js mit node -v. Fehlt es, sag mir, dass ich es von https://nodejs.org/en/download installiere; installiere es nicht selbst. 2) Verwende nur diese Konfiguration (von PopNx MCP geprüft): { "mcpServers": { "basecoat-ui": { "command": "npx", "args": [ "-y", "basecoat-ui-mcp" ] } } } 3) Nenne mir den vollständigen Pfad der Datei, die du änderst, oder den Befehl, den du ausführst, und warte auf mein OK. 4) Kein Schlüssel nötig. 5) Führe das Vereinbarte aus und prüfe, dass die Tools von Basecoat UI wirklich erscheinen.

Diese Nachricht enthält keinen Schlüssel. Wird einer gebraucht, bittet dich die KI, ihn selbst in die Datei oder das Feld der App einzufügen.

1
Node.js installieren (falls noch nicht vorhanden)
Schon installiert? Zuerst prüfen · Öffne das Terminal, gib diesen Befehl ein und drücke Enter
node -v
- Eine Versionsnummer wie v26.13.1 = installiert, diesen Schritt überspringen
- "command not found" (unter Windows "is not recognized") = noch nicht installiert, oder gerade installiert und das Terminal muss neu geöffnet werden
So öffnest du das Terminal
Mac: ⌘ + Leertaste drücken, Terminal eingeben, Enter
Windows: Start öffnen, Windows PowerShell eingeben, dann Öffnen
Noch nicht installiert: Öffne die offizielle Download-Seite, wähle die LTS-Version und den Klick-Installer: .pkg auf dem Mac · .msi unter Windows. Doppelklicken und bis zum Ende durchklicken. Kein curl-Befehl nötig
Download-Seite von Node.js öffnen ↗
Danach das Terminal schließen, neu öffnen und denselben Befehl erneut ausführen. Es muss eine Versionsnummer erscheinen: node -v
Einmal installieren, gilt für alles, was Node.js braucht
Erledigt
Einstellungsdatei der Claude-Desktop-App öffnen
SettingsDeveloperEdit Config
Erledigt

Diese Einstellungen einfügen und speichern

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

Erledigt

Claude beenden und neu öffnen
Erledigt
Ausprobieren
Nutze Basecoat UI und sag mir, was du für mich tun kannst; zeig mir dann eine Sache
✓ Wenn Claude sagt, dass es Basecoat UI nutzt, oder ein Werkzeug von Basecoat UI in der Antwort zeigt, bist du verbunden

Menünamen am 11. Nov. 2026 mit der Hilfe von Anthropic abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen

ChatGPT kann Basecoat UI noch nicht verbinden

Basecoat UI läuft auf deinem Computer, aber ChatGPT verbindet nur Server, die im Web laufen

Das kannst du stattdessen tun

A · Eine App nutzen, die Basecoat UI verbinden kann

Schritte für Claude →Installiere zuerst Node.js auf deinem Computer (nur einmal) · Nur in der Claude-App für den Computer (Windows oder Mac), nicht im Web oder auf dem Handy
Schritte für Claude Code →Installiere zuerst Node.js auf deinem Computer (nur einmal)
Schritte für Cursor →Installiere zuerst Node.js auf deinem Computer (nur einmal)
Schritte für VS Code →Installiere zuerst Node.js auf deinem Computer (nur einmal)

B · Andere in Web & Browser, die mit ChatGPT funktionieren

Aus den meistgenutzten derselben Kategorie, nur solche, die per Adresse ohne Schlüssel verbinden

Firecrawl MCP Server✓ ChatGPT
webclaw✓ ChatGPT
Oxylabs MCP✓ ChatGPT

Klappt mit Claude Code, aber erst etwas vorbereiten

Installiere zuerst Node.js auf deinem Computer (nur einmal)

Von der KI installieren lassen

Kopiere diese Nachricht in einen Claude Code-Chat. Die KI prüft deinen Rechner, sagt dir, welche Datei sie ändert, und wartet jedes Mal auf dein OK.

Installiere bitte den MCP server Basecoat UI für Claude Code auf diesem Rechner, in dieser Reihenfolge: 1) Prüfe Node.js mit node -v. Fehlt es, sag mir, dass ich es von https://nodejs.org/en/download installiere; installiere es nicht selbst. 2) Verwende nur diese Konfiguration (von PopNx MCP geprüft): claude mcp add --scope user basecoat-ui -- npx -y basecoat-ui-mcp 3) Nenne mir den vollständigen Pfad der Datei, die du änderst, oder den Befehl, den du ausführst, und warte auf mein OK. 4) Kein Schlüssel nötig. 5) Führe das Vereinbarte aus und prüfe, dass die Tools von Basecoat UI wirklich erscheinen.

Diese Nachricht enthält keinen Schlüssel. Wird einer gebraucht, bittet dich die KI, ihn selbst in die Datei oder das Feld der App einzufügen.

1
Node.js installieren (falls noch nicht vorhanden)
Schon installiert? Zuerst prüfen · Öffne das Terminal, gib diesen Befehl ein und drücke Enter
node -v
- Eine Versionsnummer wie v26.13.1 = installiert, diesen Schritt überspringen
- "command not found" (unter Windows "is not recognized") = noch nicht installiert, oder gerade installiert und das Terminal muss neu geöffnet werden
So öffnest du das Terminal
Mac: ⌘ + Leertaste drücken, Terminal eingeben, Enter
Windows: Start öffnen, Windows PowerShell eingeben, dann Öffnen
Noch nicht installiert: Öffne die offizielle Download-Seite, wähle die LTS-Version und den Klick-Installer: .pkg auf dem Mac · .msi unter Windows. Doppelklicken und bis zum Ende durchklicken. Kein curl-Befehl nötig
Download-Seite von Node.js öffnen ↗
Danach das Terminal schließen, neu öffnen und denselben Befehl erneut ausführen. Es muss eine Versionsnummer erscheinen: node -v
Einmal installieren, gilt für alles, was Node.js braucht
Erledigt
Terminal öffnen
Mac: Command+Leertaste drücken und Terminal tippen · Windows: PowerShell öffnen
Erledigt

Diesen Befehl einfügen und Enter drücken

claude mcp add --scope user basecoat-ui -- npx -y basecoat-ui-mcp

Erledigt

/mcp in Claude Code eingeben
Basecoat UI sollte in der Liste als verbunden erscheinen
Erledigt
Ausprobieren
Nutze Basecoat UI und sag mir, was du für mich tun kannst; zeig mir dann eine Sache
✓ Wenn Claude Code sagt, dass es Basecoat UI nutzt, oder ein Werkzeug von Basecoat UI in der Antwort zeigt, bist du verbunden

Menünamen am 11. Nov. 2026 mit der Hilfe von Anthropic abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen

Klappt mit Cursor, aber erst etwas vorbereiten

Installiere zuerst Node.js auf deinem Computer (nur einmal)

Von der KI installieren lassen

Kopiere diese Nachricht in einen Cursor-Chat. Die KI prüft deinen Rechner, sagt dir, welche Datei sie ändert, und wartet jedes Mal auf dein OK.

Installiere bitte den MCP server Basecoat UI für Cursor auf diesem Rechner, in dieser Reihenfolge: 1) Prüfe Node.js mit node -v. Fehlt es, sag mir, dass ich es von https://nodejs.org/en/download installiere; installiere es nicht selbst. 2) Verwende nur diese Konfiguration (von PopNx MCP geprüft): { "mcpServers": { "basecoat-ui": { "command": "npx", "args": [ "-y", "basecoat-ui-mcp" ] } } } 3) Nenne mir den vollständigen Pfad der Datei, die du änderst, oder den Befehl, den du ausführst, und warte auf mein OK. 4) Kein Schlüssel nötig. 5) Führe das Vereinbarte aus und prüfe, dass die Tools von Basecoat UI wirklich erscheinen.

Diese Nachricht enthält keinen Schlüssel. Wird einer gebraucht, bittet dich die KI, ihn selbst in die Datei oder das Feld der App einzufügen.

1
Node.js installieren (falls noch nicht vorhanden)
Schon installiert? Zuerst prüfen · Öffne das Terminal, gib diesen Befehl ein und drücke Enter
node -v
- Eine Versionsnummer wie v26.13.1 = installiert, diesen Schritt überspringen
- "command not found" (unter Windows "is not recognized") = noch nicht installiert, oder gerade installiert und das Terminal muss neu geöffnet werden
So öffnest du das Terminal
Mac: ⌘ + Leertaste drücken, Terminal eingeben, Enter
Windows: Start öffnen, Windows PowerShell eingeben, dann Öffnen
Noch nicht installiert: Öffne die offizielle Download-Seite, wähle die LTS-Version und den Klick-Installer: .pkg auf dem Mac · .msi unter Windows. Doppelklicken und bis zum Ende durchklicken. Kein curl-Befehl nötig
Download-Seite von Node.js öffnen ↗
Danach das Terminal schließen, neu öffnen und denselben Befehl erneut ausführen. Es muss eine Versionsnummer erscheinen: node -v
Einmal installieren, gilt für alles, was Node.js braucht
Erledigt
Mit diesem Button Cursor öffnen
In Cursor öffnen
Cursor fragt nach einer Bestätigung; klicke Install
Erledigt
KI-Chat in Cursor im Agent-Modus öffnen
Erledigt
Ausprobieren
Nutze Basecoat UI und sag mir, was du für mich tun kannst; zeig mir dann eine Sache
✓ Wenn Cursor sagt, dass es Basecoat UI nutzt, oder ein Werkzeug von Basecoat UI in der Antwort zeigt, bist du verbunden

Menünamen am 11. Nov. 2026 mit der Hilfe von Cursor abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen

Klappt mit VS Code, aber erst etwas vorbereiten

Installiere zuerst Node.js auf deinem Computer (nur einmal)

Von der KI installieren lassen

Kopiere diese Nachricht in einen VS Code-Chat. Die KI prüft deinen Rechner, sagt dir, welche Datei sie ändert, und wartet jedes Mal auf dein OK.

Installiere bitte den MCP server Basecoat UI für VS Code auf diesem Rechner, in dieser Reihenfolge: 1) Prüfe Node.js mit node -v. Fehlt es, sag mir, dass ich es von https://nodejs.org/en/download installiere; installiere es nicht selbst. 2) Verwende nur diese Konfiguration (von PopNx MCP geprüft): { "servers": { "basecoat-ui": { "type": "stdio", "command": "npx", "args": [ "-y", "basecoat-ui-mcp" ] } } } 3) Nenne mir den vollständigen Pfad der Datei, die du änderst, oder den Befehl, den du ausführst, und warte auf mein OK. 4) Kein Schlüssel nötig. 5) Führe das Vereinbarte aus und prüfe, dass die Tools von Basecoat UI wirklich erscheinen.

Diese Nachricht enthält keinen Schlüssel. Wird einer gebraucht, bittet dich die KI, ihn selbst in die Datei oder das Feld der App einzufügen.

1
Node.js installieren (falls noch nicht vorhanden)
Schon installiert? Zuerst prüfen · Öffne das Terminal, gib diesen Befehl ein und drücke Enter
node -v
- Eine Versionsnummer wie v26.13.1 = installiert, diesen Schritt überspringen
- "command not found" (unter Windows "is not recognized") = noch nicht installiert, oder gerade installiert und das Terminal muss neu geöffnet werden
So öffnest du das Terminal
Mac: ⌘ + Leertaste drücken, Terminal eingeben, Enter
Windows: Start öffnen, Windows PowerShell eingeben, dann Öffnen
Noch nicht installiert: Öffne die offizielle Download-Seite, wähle die LTS-Version und den Klick-Installer: .pkg auf dem Mac · .msi unter Windows. Doppelklicken und bis zum Ende durchklicken. Kein curl-Befehl nötig
Download-Seite von Node.js öffnen ↗
Danach das Terminal schließen, neu öffnen und denselben Befehl erneut ausführen. Es muss eine Versionsnummer erscheinen: node -v
Einmal installieren, gilt für alles, was Node.js braucht
Erledigt
Mit diesem Button VS Code öffnen
In VS Code öffnen
VS Code fragt nach einer Bestätigung; klicke Install
Erledigt
KI-Chat in VS Code im Agent-Modus öffnen
Erledigt
Ausprobieren
Nutze Basecoat UI und sag mir, was du für mich tun kannst; zeig mir dann eine Sache
✓ Wenn VS Code sagt, dass es Basecoat UI nutzt, oder ein Werkzeug von Basecoat UI in der Antwort zeigt, bist du verbunden

Menünamen am 11. Nov. 2026 mit der Hilfe von VS Code abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen

Andere Apps mit MCP, etwa Windsurf, Zed oder Gemini CLI, fügen Server unterschiedlich hinzu. Sieh in der App-Liste nach

Alle Apps mit MCP ansehen →

JSON-Einstellungen stehen unten unter „Für Entwickler“

Hängst du fest? Frag Leute, die Basecoat UI nutzen💬 Diskussion →

Für Entwickler: Terminal-Befehle und JSON-Einstellungen

Auf deinem Computer installiert

Claude Code

claude mcp add --scope user basecoat-ui -- npx -y basecoat-ui-mcp

Claude Desktop (claude_desktop_config.json)

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

Cursor (~/.cursor/mcp.json)

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

VS Code (mcp.json)

{
  "servers": {
    "basecoat-ui": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "basecoat-ui-mcp"
      ]
    }
  }
}

Diese Einstellungen werden aus dem Registry-Eintrag des Entwicklers erzeugt. Wenn in der README etwas anderes steht, folge der README.

Auf einen Blick

GitHub-Sterne i: 16
Downloads pro Wochei: 86/Wo.
Lizenz i: Keine Lizenz angegeben
Verbindung: Läuft auf deinem Computer
Transport: stdio
Neueste Versioni: 2.0.1
Kategoriei: Web & Browser
In der Registry veröffentlichti: 23. Okt. 2026
Code zuletzt geänderti: 23. Okt. 2026
Entwickler: Sorbh
Pakete: npm: basecoat-ui-mcp
Repo: Sorbh/basecoat-ui-mcp
Website: github.com
Registry-Status: Aktiv

Welche Apps ihn nutzen können

Basierend darauf, wie sich dieser Server verbindet, und auf der eigenen Doku jeder App, geprüft am 10. Nov. 2026.

Laufen auf deinem Computer in

Claude Goose LM Studio Msty Studio Cherry Studio Cursor VS Code + GitHub Copilot Visual Studio Windsurf (Devin Desktop)Zed Kiro Cline Continue JetBrains AI Assistant Claude Code Codex CLI Gemini CLI OpenCode nodecode Warp LibreChat Raycast

Alle Apps, mit Vor- und Nachteilen →

Was er kann

Läuft auf deinem Computer; die Tool-Liste erscheint nach der Installation in deiner KI-App.

Basischecksi

Wir prüfen Informationen, die jeder sehen kann; den Code haben wir nicht gelesen. Checks, die nicht zutreffen, werden nicht mitgezählt. · Geprüft am 15. Nov. 2026

✓ Bestanden
Entwickler passt zum Repo
Der Registry-Name wurde mit dem GitHub-Konto Sorbh bestätigt, dem das Repo gehört
✓ Bestanden
Wird noch gepflegt
Code zuletzt geändert: vor 23 Tagen
✕ Nicht bestanden
Hat eine Lizenz
Keine Lizenzdatei im Repo gefunden
– Nicht zutreffend
Endpunkt antwortet
Dieser Server läuft auf deinem Computer; es gibt keinen Endpunkt im Internet
– Nicht zutreffend
Anmeldung mit OAuth
Läuft auf deinem Computer und nutzt stattdessen lokale Einstellungen
… Noch nicht geprüft
Keine versteckten Anweisungen in Tool-Beschreibungen
Läuft auf deinem Computer; Tool-Listen können wir nur von Endpunkten im Internet lesen

Veröffentlichte Schwachstellen (OSV.dev)

Keine Einträge auf OSV.dev für basecoat-ui-mcp@2.0.1

Prüft nur diese Paketversion, nicht alle Abhängigkeiten · geprüft 15. Nov. 2026

Was wir prüfen → · JSON

Entwickler: neue Prüfung anfordern oder falsche Angaben melden

Anmelden

Diskussion

Fragen, Tipps teilen oder melden, dass etwas nicht geht. Sortiert nach „hilfreich“.

Noch keine Beiträge. Stell die erste Frage oder teile einen Tipp.

Beiträge hier stammen von Nutzern, nicht vom PopNx-Team.

Anmelden, um zu posten

Nutzerbewertungen

Noch keine Bewertungen

Anmelden, um eine Bewertung zu schreiben

Im Vergleich mit anderen in Web & Browseri

Mehr Sterne als 93 % der anderen 1523 Server in dieser Kategorie
Neuer in der Registry veröffentlicht als 59 % der anderen 1523 Server in dieser Kategorie
Basischecks gleich gut wie oder besser als bei 53 % der anderen 1523 Server in dieser Kategorie

Verglichen mit allen aktiven Servern dieser Kategorie in der Registry. Sterne zählen nur, wenn dem Herausgeber das Repo gehört.

Häufige Fragen

Ist Basecoat UI sicher?

Er hat 2 von 3 zutreffenden Basischecks bestanden. Den Code haben wir nicht gelesen. Bevor du einen Schlüssel oder Token hinzufügst, sieh nach, welche Zugriffe der Server verlangt, und nutze einen Schlüssel, der nur die Berechtigungen hat, die du brauchst.

Welche Schlüssel oder Codes braucht er?

Die Registry nennt keinen erforderlichen Schlüssel, manche Server bitten dich aber bei der ersten Nutzung, dich anzumelden.

Läuft er auf meinem Computer oder in der Cloud?

Er läuft auf deinem Computer. Deine KI-App startet ihn bei Bedarf, und die Daten laufen nicht über die Server des Entwicklers (außer der Server ruft selbst einen Onlinedienst auf).

Wird er noch gepflegt?

Das GitHub-Repo wurde zuletzt vor 23 Tagen geändert, und die neueste Version (2.0.1) kam vor 23 Tagen in die Registry.

Welche Apps können ihn nutzen?

Apps, die MCP unterstützen, etwa Claude Desktop, Claude Code, Cursor und VS Code. Außerdem brauchst du Node.js auf deinem Computer.

Was kann ich stattdessen nutzen?

In derselben Kategorie: Browser Use, changedetection.io (official), Apify MCP Server, Actionbook, Flowershow

README vom Entwickler

README öffnen

Unverändert aus dem Repo des Entwicklers übernommen. PopNx MCP hat den Inhalt weder geprüft noch empfiehlt es ihn. HTML, Bilder und Skripte wurden entfernt. Links führen von dieser Website weg.

Basecoat MCP Server

Give your AI assistant the full Basecoat UI component library (the shadcn/ui look in plain HTML + Tailwind, no React), so it writes correct Basecoat markup instead of guessing class names.

Kept in sync with Basecoat releases. Basecoat 1.0.2 shipped with breaking API changes; this MCP was updated to it the same day.

Story

While building my hobby project — turning old devices into a Digital Photo Frame — I struggled with UI components. I wanted to use Basecoat CSS, the HTML port of ShadCN UI, but there was no MCP server to easily pull components and docs into AI-assisted coding.

So I built one. This is my first MCP server, and it’s here to make working with Basecoat (and ShadCN-style components) effortless for everyone. Feedback and contributions are welcome!

A Model Context Protocol (MCP) server that provides programmatic access to Basecoat CSS components and their usage documentation. This server allows AI assistants to help developers build HTML interfaces using the Basecoat CSS framework.

Features

Basecoat 1.0.2: All markup follows the 1.0 API (class="btn" data-variant="outline", .field, method-based JS).
90+ Component Variants: Buttons, fields, input groups, cards, dialogs, command menus, drawers, charts and more.
Usage Documentation: Implementation guides for 30 components, including JS requirements and 0.x migration notes.
Setup Scripts: CDN links for any style pack (Vega, Nova, Maia, Lyra, Mira, Luma, Sera, Rhea) and the theme script.
Search & Discovery: Find components by name or category.
Accessibility Ready: All components include ARIA attributes and semantic HTML.

Quick Start

No install needed: every client runs the server with npx.

Claude Code

claude mcp add basecoat-ui -- npx -y basecoat-ui-mcp

Claude Desktop

Add to claude_desktop_config.json:

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

Cursor

Click Install in Cursor above, or add to ~/.cursor/mcp.json:

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

VS Code (GitHub Copilot)

Click Install in VS Code above, or add to .vscode/mcp.json:

"servers": { "basecoat-ui": { "command": "npx", "args": ["-y", "basecoat-ui-mcp"] } } }

Windsurf

Add to ~/.codeium/windsurf/mcp_config.json:

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

Codex CLI

Add to ~/.codex/config.toml:

[mcp_servers.basecoat-ui]

command = "npx" args = ["-y", "basecoat-ui-mcp"]

Other MCP clients

Run npx -y basecoat-ui-mcp as a stdio server.

Try it

Ask your assistant something like:

Build a sign-up page with Basecoat: a card with GitHub/Google buttons, email and password fields, and a dark mode toggle.

It will call get_setup, pull the matching components and usage docs, and return HTML that uses the real Basecoat 1.0 API.

Local Development

git clone https://github.com/Sorbh/basecoat-ui-mcp.git

cd basecoat-ui-mcp npm install

Point your client at the local copy:

"mcpServers": { "basecoat-ui": { "command": "node", "args": ["/path/to/basecoat-ui-mcp/server.js"] } } }

Available Tools

Tool	Description	Parameters
`get_component`	Get HTML code for a specific component variant	`name`: Component name (e.g., "button-outline", "field", "command"). Prefix with a category to disambiguate (e.g., "layout/pagination")
`list_components`	List all available components organized by category	None
`get_usage`	Get usage documentation for a component	`component`: Component name (e.g., "button", "combobox"). Variant names fall back to their base doc ("button-primary" → "button")
`get_setup`	Get Basecoat CSS setup code with CDN links	`style` (optional): vega (default), nova, maia, lyra, mira, luma, sera, rhea
`get_theme_script`	Get theme switcher script for dark/light mode	None
`search_components`	Search for components by name or category	`query`: Search term (e.g., "button", "form", "navigation")
`get_category`	Get all components in a specific category	`category`: combine, feedback, forms, interactive, layout, navigation

Component Categories

Forms

Button: default, secondary, outline, ghost, link, destructive, sizes, icon, with-icon, loading
Button Group: horizontal, vertical
Field / Fieldset: label, description, invalid state, grouped fields
Input / Input Group: basic, with-label, invalid, with icon, with button
Select: native select, JS select
Checkbox, Radio Group, Switch: with labels and descriptions
Slider, Textarea, Label, Form container

Navigation

Tabs, Accordion, Breadcrumb, Sidebar

Feedback

Alert: default, success, error
Alert Dialog, Dialog: confirmation and modal forms
Badge: primary, secondary, destructive, outline
Toast, Empty, Progress, Spinner

Interactive

Command: inline and dialog palettes
Combobox: input-first searchable select
Dropdown Menu, Popover, Tooltip
Drawer (beta): bottom and side
Theme Switcher

Layout

Card, Avatar, Item, Kbd, Scroll Area
Skeleton, Table, Pagination
Chart (beta)

Combine

Composed examples: chat, login, settings, interactive pagination.

Upgrading from 1.x of this MCP

Version 2.0.0 of this MCP targets Basecoat 1.0.2, which has breaking changes from Basecoat 0.3.x:

Variant classes became data attributes: btn-outline → class="btn" data-variant="outline", btn-sm-icon → data-size="icon-sm".
The .form wrapper was removed; wrap each label and control in .
Document events (basecoat:toast, basecoat:sidebar, basecoat:theme) were replaced by methods: toaster.toast(), sidebar.toggle(), window.basecoat.theme.toggle().
dialog-alert was renamed to alert-dialog.

If your project still has 0.x markup, load Basecoat's compatibility stylesheet after Basecoat while you migrate (@import "basecoat-css/compat";). See style-guide.md for the full migration guide.

Directory Structure

basecoat-mcp/

├── components/ # HTML component files │ ├── combine/ # Composed page examples │ ├── feedback/ # Alerts, badges, dialogs, toasts │ ├── forms/ # Buttons, fields, inputs, selects │ ├── interactive/ # Command, combobox, dropdowns, tooltips │ ├── layout/ # Cards, tables, avatars, items │ └── navigation/ # Tabs, accordion, sidebar ├── usage/ # Usage documentation (same categories) ├── scripts/ # Setup and theme scripts ├── style-guide.md # Full Basecoat 1.0 style and migration guide ├── server.js # MCP server implementation ├── package.json └── README.md

Categories are read from disk, so adding a folder under components/ or usage/ is enough to expose it.

About Basecoat CSS

Basecoat CSS is a comprehensive CSS framework that provides:

Accessible, semantic components
Dark/light theme support
Tailwind CSS integration
JavaScript-enhanced interactions
Mobile-responsive design

Learn more at basecoatui.com

License

MIT License - see LICENSE file for details.

Contributing

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Make your changes following our coding standards
Test your changes thoroughly
Commit with clear messages: git commit -m 'Add amazing feature'
Push to your branch: git push origin feature/amazing-feature
Open a Pull Request

Support

Issues: GitHub Issues

Built with ❤️ by Claude Code - Monitored & Prompted by Saurabh K. Sharma

Basecoat UI

What it does

Installation

Node.js installieren (falls noch nicht vorhanden)

Einstellungsdatei der Claude-Desktop-App öffnen

Diese Einstellungen einfügen und speichern

Claude beenden und neu öffnen

Ausprobieren

Das kannst du stattdessen tun

Node.js installieren (falls noch nicht vorhanden)

Terminal öffnen

Diesen Befehl einfügen und Enter drücken

/mcp in Claude Code eingeben

Ausprobieren

Node.js installieren (falls noch nicht vorhanden)

Mit diesem Button Cursor öffnen

KI-Chat in Cursor im Agent-Modus öffnen

Ausprobieren

Node.js installieren (falls noch nicht vorhanden)

Mit diesem Button VS Code öffnen

KI-Chat in VS Code im Agent-Modus öffnen

Ausprobieren

Auf deinem Computer installiert

Auf einen Blick

Welche Apps ihn nutzen können

Was er kann

Basischecksi

Entwickler passt zum Repo

Wird noch gepflegt

Hat eine Lizenz

Endpunkt antwortet

Anmeldung mit OAuth

Keine versteckten Anweisungen in Tool-Beschreibungen

Veröffentlichte Schwachstellen (OSV.dev)

Diskussion

Nutzerbewertungen

Im Vergleich mit anderen in Web & Browseri

Häufige Fragen

Ähnliche Alternativen

Browser Use

changedetection.io (official)

Apify MCP Server

Actionbook

Flowershow

README vom Entwickler

Basecoat MCP Server

Story

Features

Quick Start

Claude Code

Claude Desktop

Cursor

VS Code (GitHub Copilot)

Windsurf

Codex CLI

Other MCP clients

Try it

Local Development

Available Tools

Component Categories

Forms

Navigation

Feedback

Interactive

Layout

Combine

Upgrading from 1.x of this MCP

Directory Structure

About Basecoat CSS

License

Contributing

Support