MCP Server

Let AI assistants install and manage FlAI components in your project. The MCP server exposes FlAI's full component registry and CLI as tools that Claude, Cursor, and other MCP-compatible agents can call directly.

What is MCP?

The Model Context Protocol (MCP) is an open standard that lets AI assistants interact with external tools and data sources. The FlAI MCP server turns your FlAI CLI into a set of tools that any MCP-compatible AI agent can use.

This means you can tell your AI assistant things like:

• "Add the chat screen component to my Flutter project"
• "What components does FlAI have?"
• "Set up a dark-themed chat app with Anthropic"
• "Check if my FlAI project is healthy"

The AI agent calls the MCP tools behind the scenes, running the FlAI CLI and returning results — no manual terminal commands needed.

Installation

Run the MCP server directly with npx — no global install required:

Claude Code Setup

Add the FlAI MCP server to your Claude Code configuration. Edit your settings.json (or .claude/settings.json in your project):

{
  "mcpServers": {
    "flai": {
      "command": "npx",
      "args": ["@getflai/mcp"]
    }
  }
}

Once configured, Claude Code can use all FlAI tools automatically when you ask about Flutter chat components.

Cursor Setup

In Cursor, open Settings and navigate to the MCP section. Add a new server:

{
  "mcpServers": {
    "flai": {
      "command": "npx",
      "args": ["@getflai/mcp"]
    }
  }
}

Available Tools

The MCP server exposes 8 tools that cover the full FlAI workflow:

Tool	Description
list_components	Lists all available FlAI components with descriptions, grouped by category: Chat Essentials, AI Widgets, Conversation, and Providers.
add_component	Installs a FlAI component into the project. Validates the component exists, resolves dependencies, and runs flai add <name>.
get_component_info	Gets detailed info about a specific component including props with types, dependencies, pub dependencies, and a usage code example.
init_project	Initializes FlAI in a Flutter project. Runs flai init to set up the core theme system, data models, and provider interface.
doctor	Checks the health of a FlAI project. Verifies initialization, checks installed components, validates dependencies, and identifies issues.
get_theme_info	Returns detailed theming information: the 4 theme presets, all design tokens (colors, typography, radius, spacing), and customization examples.
scaffold_chat_app	Generates a complete main.dart code snippet for a full chat app with the specified AI provider and theme preset. Returns code to copy — does not run commands.
get_starter_template	Returns complete starter code for common patterns: basic_chat, multi_model, tool_calling, or custom_theme.

Tool Details

list_components

No parameters. Returns the full component registry grouped by category.

// Example output:
## Chat Essentials
- chat_screen — Full-page chat composition
- message_bubble — User, assistant, and system messages
- input_bar — Text input with send button
- streaming_text — Token-by-token text rendering
- typing_indicator — Animated loading dots

## AI Widgets
- tool_call_card — Function call display
- code_block — Syntax-highlighted code with copy
- thinking_indicator — Expandable AI reasoning panel
- citation_card — Source attribution card
- image_preview — Image thumbnail with zoom

## Conversation
- conversation_list — Conversation history with search
- model_selector — AI model picker
- token_usage — Token count and cost display

## Providers
- openai_provider — OpenAI API integration
- anthropic_provider — Anthropic API integration

add_component

Parameter	Type	Required	Description
component_name	string	required	Name of the component (e.g., 'message_bubble', 'chat_screen')
project_path	string	optional	Absolute path to the Flutter project. Defaults to current working directory.

scaffold_chat_app

Parameter	Type	Required	Description
provider	"openai" | "anthropic"	required	AI provider to use in the generated code
theme	"light" | "dark" | "ios" | "premium"	"dark"	Theme preset to apply

get_starter_template

Parameter	Type	Required	Description
template	"basic_chat" | "multi_model" | "tool_calling" | "custom_theme"	required	Which starter template to generate

Example Workflow

Here is what a typical conversation looks like when an AI agent uses the MCP server:

User: "Add AI chat to my Flutter app with a dark theme and Anthropic"

Agent calls: init_project()
→ Creates lib/flai/ with core theme, models, and provider interface

Agent calls: add_component("chat_screen")
→ Installs chat screen, message bubble, input bar, typing indicator

Agent calls: add_component("anthropic_provider")
→ Installs the Anthropic provider

Agent calls: scaffold_chat_app(provider: "anthropic", theme: "dark")
→ Returns complete main.dart code for the user to copy

Requirements

• Node.js 18+ — Required to run the MCP server
• FlAI CLI — Must be installed (dart pub global activate flai_cli)
• Flutter project — The target project must have a pubspec.yaml