AI Integration

Code Fluxo UI with Your AI Assistant

Claude Code, GitHub Copilot, and Cursor can now generate Fluxo UI code that actually works — correct component names, real props, and real examples. No hallucinated APIs. No guessing. Ship features faster.

Why This Matters

⚡

First-try correctness

Your AI assistant stops guessing prop names. You stop fixing hallucinated code. Features ship sooner.

🎯

Real examples, real props

The AI sees the actual components you have installed — never suggestions from a version you don't use.

🔌

Nothing extra to install

It comes bundled with fluxo-ui. If you have the library, you already have it. One command to enable.

🔒

Private and local

Runs entirely on your machine. No accounts, no network calls, no telemetry. Your code stays yours.

See How It Helps

Same prompt, same assistant — here's the difference when your AI can actually read the Fluxo UI catalog.

Your Prompt

"Add a save button with an icon using Fluxo UI"

Add a save button with an icon using Fluxo UI

Checking Fluxo UI components...

Found Button with variant and icon props

Generating code with correct API

Done — ready to paste

Without MCP — looks right, breaks at runtime

// Hallucinated API — looks plausible, but wrong
import { Button } from 'fluxo-ui';

<Button
  type="primary"
  icon="save"
  label="Save"
  onPress={handleSave}
/>

With MCP — correct on the first try

// Real Fluxo UI API — first try, no guessing
import { Button } from 'fluxo-ui';
import { SaveIcon } from 'fluxo-ui/icons';

<Button
  variant="primary"
  icon={<SaveIcon />}
  onClick={handleSave}
>
  Save
</Button>

Claude Code

Install Fluxo UI MCP at the project scope so every developer on the team uses the exact version of fluxo-ui that's pinned in this repository — not whatever happens to be installed globally on each machine. This avoids version drift between the AI's suggestions and your actual installed components.

Run from your project root

claude mcp add fluxo-ui --scope project -- npx fluxo-ui-mcp

This creates a .mcp.json file at the root of your project:

.mcp.json (auto-generated)

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

Commit .mcp.json to git

Check .mcp.json into your repository. When teammates clone the project and open it in Claude Code, they'll be prompted to approve the MCP server and instantly get the same Fluxo UI integration — pointed at the version of fluxo-ui installed in this project's node_modules, not a global one.

Why not user scope?

A user-scoped MCP install (--scope user) is shared across every project you open. That risks the AI reading components from one version of Fluxo UI while you're editing a project pinned to a different version — leading to suggestions with props that don't exist in your installed copy. Project scope keeps the integration tied to node_modules/fluxo-ui in this repo, so the AI always sees what you actually have installed.

After approving the server in Claude Code, ask anything about Fluxo UI — "how do I show a toast?", "build me a kanban board", "what themes are available?" — and it will answer with the real components and real props from your installed version.

GitHub Copilot (VS Code)

Create a .vscode/mcp.json file at the root of your workspace with the following contents, then reload the window:

.vscode/mcp.json

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

Copilot Chat will automatically pick up the integration and start answering Fluxo UI questions with accurate code.

Cursor, Windsurf & Other AI Editors

Any AI editor that supports MCP works with Fluxo UI. Add this to your Cursor MCP config (or the equivalent file for your editor):

Cursor / Windsurf MCP config

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

The config file location depends on the editor, but the command stays the same everywhere: npx fluxo-ui-mcp.

FAQ

Do I need to install anything extra?

No. The integration comes bundled with the fluxo-ui package. If you have Fluxo UI, you already have it.

Is any of my code sent to a server?

No. Everything runs locally on your machine. There are no accounts, no network calls, and no telemetry.

How does it stay up to date?

Upgrading the fluxo-ui package upgrades the integration automatically. There's nothing separate to sync.

Is it optional?

Completely. If you don't enable it in any AI editor, it has zero impact on your project.

← Back to Installation