Use with AI agents

Brilliant runs a local MCP server the whole time the app is open, so any coding agent that speaks MCP can design on your canvas: create elements, edit them, run commands, and export, all as native editable objects you can keep working by hand. This page explains the two ways to connect an agent and points you at the exact setup for your tool.

Two ways to work with an agent

There are two integration styles, and most designers end up using both:

• The built-in chat. Brilliant ships with an AI chat docked in the bottom toolbar. It reads your selection, streams edits onto the canvas, and gives you per-chat undo, color and position pickers, and progressive previews. Bring your own key (or your Claude Code login) and go. Start with Built-in AI.

• Your own external agent, over MCP. Keep working in Claude Code, Cursor, Codex, or another editor and let it drive Brilliant from there. You point the tool at Brilliant's local endpoint once, then ask it to design. This is the rest of this section.

Same canvas, same undo stack, either way. You can draw by hand while an agent runs and nothing collides.

MCP in one paragraph

MCP (Model Context Protocol) is a shared language that lets an AI tool call another app's features. Brilliant exposes its canvas as a small set of MCP tools and serves them over a local web address on your own machine. Any MCP-aware editor you connect can then create and edit designs in Brilliant by calling those tools. Nothing leaves your computer to make this work, and Brilliant has to be open for a connected tool to reach it.

The endpoint

http://127.0.0.1:3333/mcp

Localhost only, no authentication, running right now if Brilliant is open. If port 3333 is busy, Brilliant falls back to 3334, then 3335, so a second instance still gets its own address. Whenever you set a tool up through Brilliant's own settings, it writes the correct current address for you.

What an agent can do

Everything the built-in chat can do:

• Create designs as native editable elements: full UIs, pages, dashboards, illustrations, diagrams, and wireframes, via plain HTML/CSS or Brilliant's Blueprint format.

• Inspect and edit any canvas: read structure, change properties, reparent, rename, delete, and reorder.

• Search across canvases by name, text, type, color, or component.

• Run canvas commands the same way your keyboard does (align, group, auto layout, corner radius, create components, and more), each with full undo.

• Export selected elements to PNG, JPEG, WebP, SVG, or PDF.

• Generate images (raster) and vectors, and apply them to the canvas.

• Load design knowledge on demand: tokens, typography, effects, composition patterns.

Pick your tool

Setup is a one-time step per tool. If the tool is in Brilliant's built-in list, it is a single toggle; otherwise you paste one line of config. Each page below has the exact steps, prompts to try, and troubleshooting.

The in-app list under Settings → MCP Connections is the live source of truth for what Brilliant can connect to, and it grows over time. It also covers tools without a dedicated page here (Gemini CLI, Zed, OpenCode); the step is identical, just flip that tool's toggle.

The shortest path

If you use Claude Code, the fastest setup is no setup: open the built-in chat in Brilliant once and it registers the endpoint with claude for you. From then on, tell your agent to work in Brilliant.

"Design a pricing section in Brilliant."

"Add a hero to the dashboard canvas."

"Update the card component to match the new brand colors."

Brilliant hands the agent a short overview on its first call and serves deeper knowledge on demand, so you do not have to prompt-engineer it.

Next

• Set up your editor: pick your tool from the table above.

• Prefer the in-app chat? Built-in AI covers the docked chat, providers, and everything it can do.