@flikk/mcp

MCP (Model Context Protocol) server for the Flikkui component library — provides component lookup, search, theme tokens, and code generation for AI-powered development.

Setup

Add to your MCP client configuration (e.g. Claude Code settings.json):

{
  "mcpServers": {
    "flikkui": {
      "command": "npx",
      "args": ["-y", "@flikk/mcp"]
    }
  }
}

What It Provides

• Component lookup and search
• Theme token reference (CSS variables, colors, spacing)
• Code generation with correct import paths
• Prop documentation and usage examples
• Auto-install — framework-tailored action plan (commands + file edits) via the install_flikkui tool

Auto-install

Ask your agent "install Flikkui" and it will call install_flikkui, which returns a concrete step-by-step plan:

1. Shell command to install @flikk/ui + required peer deps
2. <edit> block to add import "@flikk/ui/styles.css"; to the JS entry file
3. <edit> block to ensure @import "tailwindcss"; exists in the global CSS file
4. Warnings (e.g. never import theme.css directly) and verification steps

Inputs:

• framework — next-app | next-pages | vite-react | cra | remix | unknown (agent detects)
• scope — core (default) | ai | 3d | all
• package_manager — npm (default) | yarn | pnpm | bun

The MCP does not execute commands or write files directly — it returns instructions the agent applies with your approval, preserving the normal review flow.

Requirements

• Node.js >= 20.0.0

Flikkui Library Dependencies

When using the generated code from this MCP server, your project needs the Flikkui library and its dependencies installed. See below for the full list.

Required (Core)

These are needed for all Flikkui components:

| Package | Version | Purpose | |---------|---------|---------| | react | >= 18.0.0 | Core framework | | react-dom | >= 18.0.0 | DOM rendering | | flikkui | latest beta | Component library | | @heroicons/react | >= 2.0.0 | Icon system (all component icons) | | motion | >= 12.0.0 | Animations (Framer Motion) | | tailwindcss | ^4.0.9 | Styling engine |

Note: clsx and tailwind-merge are bundled with Flikkui — you do not need to install them separately.

Optional

Only needed if you use specific components:

| Package | Version | Used By | |---------|---------|---------| | react-markdown | ^9.0.1 || ^10.0.0 | AI Message component (markdown rendering) | | react-syntax-highlighter | ^15.5.0 || ^16.0.0 | AI Message component (code blocks) | | remark-gfm | ^4.0.0 | AI Message component (GitHub-flavored markdown) | | three | >= 0.170.0 | AIOrb Liquid variant, 3D components | | @react-three/fiber | >= 9.0.0 | AIOrb DotSphere variant, R3F canvas | | @react-three/drei | >= 10.0.0 | 3D helpers and utilities | | gsap | >= 3.12.0 | Advanced animations (specific components) |

Quick Install

# Required dependencies
npm install flikkui@beta @heroicons/react motion tailwindcss

# All dependencies (including optional)
npm install flikkui@beta @heroicons/react motion tailwindcss react-markdown react-syntax-highlighter remark-gfm three @react-three/fiber @react-three/drei gsap

Or use the CLI for automatic setup:

npx flikkui init

License

MIT