Documentation / The service

Connecting an AI agent

Connect Claude, or any program that speaks the Model Context Protocol, to one project. It reads the design, looks at pictures of the screens, and changes the design while you watch.

An AI agent connected to a project works on the same design you have open. You describe what you want in the agent's own window. The agent reads the screens, makes the change, and the change appears on your canvas with the agent's name beside it. You can undo anything it did.

Connecting an agent is part of Pro. Making a connection key asks for Pro. Listing the keys a project has and switching one off never does, so you can always revoke a key.

What an agent can do, and what it never does

You choose one of two kinds of key when you make it.

KeyWhat the agent can do
Look onlyRead the design, see a picture of any screen, look things up in the catalogue and run the design check. It changes nothing.
May change the designEverything above, and change anything in the design that you can change in the designer.

A key that may change the design reaches these parts of a project.

Three limits apply to every key.

An agent also cannot import a font file. It uses the fonts in the library and the fonts the project already has.

Check the address before you type a key. When an agent makes a web source or sets up the MQTT broker, it leaves the key or password empty and tells you so. You type it on the Data tab. Read the address the source asks first. Your key goes to that address.

Make a key

  1. Save the project to your account. An agent connects to a saved project.
  2. Choose File > Connect an AI agent.
  3. Give the connection a name you will recognise later, such as "Claude Code on the laptop".
  4. Choose Look only or May change the design.
  5. Press the button that makes the key.

The dialog shows the key once, with the server's address and the text to paste. Copy it then. The server keeps a hash of the key and cannot show it again. If you lose a key, revoke it and make another.

A key connects to the project that was open when you made it and to no other project. A project holds up to five keys. A key that nobody uses for 90 days stops working.

Connect Claude Code

The dialog gives one command. Run it once in a terminal.

claude mcp add --transport http lcdwizard <address> --header "Authorization: Bearer <your key>"

Start Claude Code and ask it about the project. A first request such as "look at my LCD Wizard project and tell me what you would fix" makes it read the design and render each screen.

Connect Claude Desktop or another MCP client

A program that reads an MCP settings file takes the block the dialog shows under For a program with an MCP settings file. It names the server's address, the transport http and an Authorization header that carries the key.

{
  "mcpServers": {
    "lcdwizard": {
      "type": "http",
      "url": "<address>",
      "headers": { "Authorization": "Bearer <your key>" }
    }
  }
}

Any client that speaks MCP over Streamable HTTP and can send a header works the same way. The hosted Claude apps on the web and on a phone connect by signing in and approving, not with a header. LCD Wizard does not offer that sign-in yet, so those apps cannot connect.

Working with an agent

Keep the project open in the designer while the agent works. A project with a key that may change it is worked on live, as a project shared with a client is. It saves itself, and each change the agent makes appears as the agent makes it.

The client offers four prompts that start a piece of work. Review this design lists what is worth fixing and changes nothing. Design a new screen, Wire this screen up and Add a settings screen are for a key that may change the design.

Undoing what an agent did

Ctrl+Z takes back what you did and never what the agent did. The agent's undo works the other way round. If you changed a value after the agent set it, undoing the agent's change leaves your value alone.

The server holds an agent's last fifty changes for six hours. After that, or after the server restarts, use the version history.

Pro features and plans

An agent acts for the project's owner, so the owner's plan decides what it can make. What needs Pro when you make it yourself needs Pro when an agent makes it for you. That covers creating a component, adding a named colour or a theme, adding a language, marking text for translation and saving a board. An agent can always use what a design already has.

Ready-made widgets and actions follow the usual rule. An agent can add one on any plan, and generating code for a design that uses one is part of Pro.

A plan's screen limit applies to screens an agent adds.

Switching an agent off

Stop it on the title bar revokes the key the agent is using. The dialog lists every key the project has, with when each was last used and how many changes it made, and a Revoke button beside each. A revoked key stops working at once. Deleting a project deletes its keys.

Limits