generate_component

generate_component

Create Tailwind CSS components with AI-driven precision. Specify type, framework, variant, size, and theme to generate responsive, accessible designs for React, Vue, Angular, Svelte, or HTML.

Instructions

Generate Tailwind CSS components with AI assistance using Gemini

Input Schema

Name	Required	Description	Default
`accessibility`	No	Include accessibility features
`description`	Yes	Description of the component to generate
`framework`	No	Target framework	react
`responsive`	No	Make component responsive
`size`	No	Component size	md
`theme`	No	Theme preference	light
`type`	Yes	Type of component
`useShadcn`	No	Use shadcn/ui components as base
`variant`	No	Component variant	primary

Input Schema (JSON Schema)

{
  "properties": {
    "accessibility": {
      "default": true,
      "description": "Include accessibility features",
      "type": "boolean"
    },
    "description": {
      "description": "Description of the component to generate",
      "type": "string"
    },
    "framework": {
      "default": "react",
      "description": "Target framework",
      "enum": [
        "html",
        "react",
        "vue",
        "svelte",
        "angular"
      ],
      "type": "string"
    },
    "responsive": {
      "default": true,
      "description": "Make component responsive",
      "type": "boolean"
    },
    "size": {
      "default": "md",
      "description": "Component size",
      "enum": [
        "xs",
        "sm",
        "md",
        "lg",
        "xl"
      ],
      "type": "string"
    },
    "theme": {
      "default": "light",
      "description": "Theme preference",
      "enum": [
        "light",
        "dark",
        "auto"
      ],
      "type": "string"
    },
    "type": {
      "description": "Type of component",
      "enum": [
        "button",
        "card",
        "form",
        "navigation",
        "modal",
        "table",
        "custom"
      ],
      "type": "string"
    },
    "useShadcn": {
      "default": true,
      "description": "Use shadcn/ui components as base",
      "type": "boolean"
    },
    "variant": {
      "default": "primary",
      "description": "Component variant",
      "enum": [
        "primary",
        "secondary",
        "outline",
        "ghost",
        "link"
      ],
      "type": "string"
    }
  },
  "required": [
    "description",
    "type"
  ],
  "type": "object"
}

MCP Tailwind Gemini Server

Instructions

Input Schema

Input Schema (JSON Schema)

Other Tools from MCP Tailwind Gemini Server

Related Tools

MCP directory API