@florexlabs/ui-mcp

MCP (Model Context Protocol) server for the @florexlabs/ui component library.

Lets AI assistants (Claude, Cursor, Windsurf, etc.) understand and generate code using Florex UI's 49 components, design tokens, and patterns.

Install & Run

npx @florexlabs/ui-mcp

Configure

Claude Desktop

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "florex-ui": {
      "command": "npx",
      "args": ["-y", "@florexlabs/ui-mcp"]
    }
  }
}

Cursor

Add to .cursor/mcp.json in your project:

{
  "mcpServers": {
    "florex-ui": {
      "command": "npx",
      "args": ["-y", "@florexlabs/ui-mcp"]
    }
  }
}

Available Tools

| Tool | Description | |------|-------------| | list_components | List all 49 components organized by category | | get_component_docs | Get props, description, and examples for a specific component | | generate_component_code | Generate TSX code for a described use case | | get_design_tokens | Get all CSS variables (colors, spacing, radius, shadows) | | get_setup_instructions | Get install commands, CSS import, and peer dependencies |

Component Categories

• Forms (10): Button, IconButton, Input, Textarea, Select, Checkbox, RadioGroup, Switch, Label, FormMessage
• Data Display (11): Card, Badge, Tag, Avatar, Table, Code, CodeBlock, Kbd, Status, Stat, DataList
• Typography (5): Heading, Text, Blockquote, Highlight, List
• Feedback (5): Alert, EmptyState, Spinner, Skeleton, Progress
• Navigation (6): Tabs, Accordion, Breadcrumb, Pagination, Steps, Menu
• Overlays (4): Modal, Drawer, Popover, Tooltip
• Layout (7): Container, Section, Navbar, Stack, Divider, Timeline, TreeView
• Utility (3): VisuallyHidden, CopyCommand, cn()

License

MIT © Florex Labs