Komponenten auflisten | MCP Server | CODEFLUSS

Listet alle Komponenten-Styles des Design Systems auf: Button Styles und Card Styles.

Tool Name

list_components

Beschreibung

Das list_components Tool gibt alle im Design System definierten Komponenten-Stile zurück. Diese vorgefertigten Stile können direkt auf UI-Komponenten angewendet werden und gewährleisten konsistentes Design.

Parameter

Dieses Tool benötigt keine Parameter.

Beispiel Request

{
  "jsonrpc": "2.0",
  "method": "tools/call",
  "params": {
    "name": "list_components",
    "arguments": {}
  },
  "id": 1
}

Beispiel Response

{
  "jsonrpc": "2.0",
  "result": {
    "content": [
      {
        "type": "text",
        "text": "{\"buttonStyles\":[{\"id\":\"btn_001\",\"name\":\"primary\",\"backgroundColor\":\"var(--color-primary-500)\",\"textColor\":\"#FFFFFF\",\"borderRadius\":\"8px\",\"padding\":\"12px 24px\",\"fontWeight\":500},{\"id\":\"btn_002\",\"name\":\"secondary\",\"backgroundColor\":\"transparent\",\"textColor\":\"var(--color-primary-500)\",\"borderRadius\":\"8px\",\"padding\":\"12px 24px\",\"fontWeight\":500,\"border\":\"1px solid var(--color-primary-500)\"},{\"id\":\"btn_003\",\"name\":\"ghost\",\"backgroundColor\":\"transparent\",\"textColor\":\"var(--color-gray-700)\",\"borderRadius\":\"8px\",\"padding\":\"12px 24px\",\"fontWeight\":500}],\"cardStyles\":[{\"id\":\"card_001\",\"name\":\"elevated\",\"backgroundColor\":\"#FFFFFF\",\"borderRadius\":\"12px\",\"padding\":\"24px\",\"shadow\":\"var(--shadow-md)\"},{\"id\":\"card_002\",\"name\":\"outlined\",\"backgroundColor\":\"#FFFFFF\",\"borderRadius\":\"12px\",\"padding\":\"24px\",\"border\":\"1px solid var(--color-gray-200)\"},{\"id\":\"card_003\",\"name\":\"filled\",\"backgroundColor\":\"var(--color-gray-50)\",\"borderRadius\":\"12px\",\"padding\":\"24px\"}]}"
      }
    ]
  },
  "id": 1
}

Response Format

Objekt mit zwei Arrays:

buttonStyles

Feld	Typ	Beschreibung
id	string	Eindeutige ID
name	string	Stil-Name
backgroundColor	string	Hintergrundfarbe
textColor	string	Textfarbe
borderRadius	string	Eckenradius
padding	string	Innenabstand
fontWeight	number	Schriftgewicht
border	string	Rahmen (optional)

cardStyles

Feld	Typ	Beschreibung
id	string	Eindeutige ID
name	string	Stil-Name
backgroundColor	string	Hintergrundfarbe
borderRadius	string	Eckenradius
padding	string	Innenabstand
shadow	string	Box-Shadow (optional)
border	string	Rahmen (optional)

Button Stile

Name	Beschreibung
primary	Hauptaktion, gefüllter Hintergrund
secondary	Sekundäre Aktion, umrandet
ghost	Tertiäre Aktion, nur Text

Card Stile

Name	Beschreibung
elevated	Schwebend mit Schatten
outlined	Mit Rahmen, ohne Schatten
filled	Gefüllter Hintergrund, ohne Rahmen