Claude Code
CLI & editor extensionConnect Flowkit
Run this in your project folder. Claude Code reads the project’s MCP configuration.
flowkit init --client claude-code
CONFIGURATION.mcp.json
Open your agent
Start Claude Code in this folder with the command below, or reopen the folder in your editor and start its Claude Code session.
claude
Start the conversation
Send this message in your agent’s chat. Allow its Flowkit tool calls when prompted, then open the canvas URL it returns.
Open new Flowkit project. Let's design something.
You’re connected when…Your agent can create a Flowkit project and you can see its canvas in your browser. Keep the conversation going — describe a screen, then refine it together.
Prefer to review the config first?
This command prints the configuration and its destination without changing any files.
flowkit config claude-code
Codex
Desktop · CLI · IDEConnect Flowkit
This writes the shared global Codex configuration. Run it from the folder where you want your Flowkit designs.
flowkit init --client codex
CONFIGURATION~/.codex/config.toml
Open your agent
Restart your Codex app or session, open your project, and check that Flowkit is available among its MCP tools. For the CLI, start with the command below.
codex
Start the conversation
Send this message in your agent’s chat. Allow its Flowkit tool calls when prompted, then open the canvas URL it returns.
Open new Flowkit project. Let's design something.
You’re connected when…Your agent can create a Flowkit project and you can see its canvas in your browser. Keep the conversation going — describe a screen, then refine it together.
Prefer to review the config first?
This command prints the configuration and its destination without changing any files.
flowkit config codex
Cursor
Editor agentConnect Flowkit
This registers Flowkit for the current project. Open the same folder in Cursor.
flowkit init --client cursor
CONFIGURATION.cursor/mcp.json
Open your agent
Reload Cursor, enable Flowkit in its MCP settings if prompted, and start an Agent conversation.
Start the conversation
Send this message in your agent’s chat. Allow its Flowkit tool calls when prompted, then open the canvas URL it returns.
Open new Flowkit project. Let's design something.
You’re connected when…Your agent can create a Flowkit project and you can see its canvas in your browser. Keep the conversation going — describe a screen, then refine it together.
Prefer to review the config first?
This command prints the configuration and its destination without changing any files.
flowkit config cursor
Antigravity
CLI & IDEConnect Flowkit
This writes Antigravity’s project configuration. Its CLI and IDE share this setup.
flowkit init --client antigravity
CONFIGURATION.agents/mcp_config.json
Open your agent
Reopen the project in Antigravity and start an agent session with Flowkit enabled.
Start the conversation
Send this message in your agent’s chat. Allow its Flowkit tool calls when prompted, then open the canvas URL it returns.
Open new Flowkit project. Let's design something.
You’re connected when…Your agent can create a Flowkit project and you can see its canvas in your browser. Keep the conversation going — describe a screen, then refine it together.
Prefer to review the config first?
This command prints the configuration and its destination without changing any files.
flowkit config antigravity
Claude Desktop
Desktop MCP connectionConnect Flowkit
This updates Claude Desktop’s global configuration in its application-data folder.
flowkit init --client claude-desktop
CONFIGURATIONclaude_desktop_config.json
Open your agent
Fully quit and reopen Claude Desktop so it loads the new server. Start a conversation with Flowkit’s tools available. For a Claude Code session, use the Claude Code instructions.
Start the conversation
Send this message in your agent’s chat. Allow its Flowkit tool calls when prompted, then open the canvas URL it returns.
Open new Flowkit project. Let's design something.
You’re connected when…Your agent can create a Flowkit project and you can see its canvas in your browser. Keep the conversation going — describe a screen, then refine it together.
Prefer to review the config first?
This command prints the configuration and its destination without changing any files.
flowkit config claude-desktop
OpenCode
Terminal agentConnect Flowkit
This adds an enabled local MCP server to the current project’s OpenCode configuration.
flowkit init --client opencode
CONFIGURATIONopencode.json
Open your agent
Launch OpenCode from this project folder, then start a conversation.
opencode
Start the conversation
Send this message in your agent’s chat. Allow its Flowkit tool calls when prompted, then open the canvas URL it returns.
Open new Flowkit project. Let's design something.
You’re connected when…Your agent can create a Flowkit project and you can see its canvas in your browser. Keep the conversation going — describe a screen, then refine it together.
Prefer to review the config first?
This command prints the configuration and its destination without changing any files.
flowkit config opencode