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

Once you have fluxo-ui installed in your project, enable the integration with a single command:

Enable Fluxo UI MCP

claude mcp add fluxo-ui -- npx fluxo-ui-mcp

That's it. Ask Claude anything about Fluxo UI — "how do I show a toast?", "build me a kanban board", "what themes are available?" — and it will answer with real components and real props.

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