Use Loora as a design tool in Claude Code.

Claude Code has first-class support for remote MCP servers over streamable HTTP, including the OAuth handshake, so nothing has to be bridged and no token is pasted anywhere. The default scope is local to the project you run the command in; --scope user makes the server available everywhere, and --scope project writes a checked-in .mcp.json your teammates pick up on their next run.

Configuration

Written by the CLI: .mcp.json in the project for --scope project, ~/.claude.json for --scope user.

terminal

claude mcp add --transport http loora https://mcp.loora.design/mcp

The equivalent written out, if you would rather edit it by hand:

.mcp.json (project scope, checked in)

{
  "mcpServers": {
    "loora": {
      "type": "http",
      "url": "https://mcp.loora.design/mcp"
    }
  }
}

Steps

Run the command above in the repository you want the design attached to.
Run /mcp inside Claude Code, pick loora, and choose Authenticate.
A browser opens on loora.design; approve the connection and return to the terminal.
Run /mcp again — loora should read connected, with its tools listed underneath.
Ask for listDesigns to confirm the tools reach your account.

Worth knowing

Add --scope user to register the server once for every project on the machine.
--scope project writes .mcp.json into the repository, so a teammate is prompted to trust it rather than to configure it.
Tokens are stored by Claude Code, not by Loora; claude mcp remove loora drops both the entry and the grant.
The design guide skill is worth adding alongside the server — the tools say what an agent can do, not how to design.

What you can ask for

Once the server is connected, Claude Code has the same vocabulary as every other client. Every call commits a validated canvas transaction, so it is inspectable, undoable, and safe to make on a branch.

Group	Tools
Read	listDesigns, getDesignContext, readNode, readTree, searchNodes, listAssets, listVersions
Write	createPage, insertNodes, patchNodes, moveNodes, deleteNodes
Reuse	createComponent, createInstance, setTokens
Motion	setAnimations, animateNodes
Look	viewCanvas, viewPage, viewNode, getScreenshot
Branches	listBranches, createBranch, proposeBranch, compareBranch, applyBranch, reopenBranch, closeBranch
Designs	createDesign, renameDesign, deleteDesign, exportCode

A good first prompt: ask for listDesigns, then getDesignContext on the one you want, then have it call setTokens before it draws anything. Why that order matters →

Claude Code and Loora: questions

Do I need an API key to use Loora with Claude Code?

No. The Loora MCP server authenticates with OAuth 2.1 and PKCE. Running /mcp and choosing Authenticate opens a browser, you approve the connection with your normal Loora login, and Claude Code stores the resulting token itself.

Can Claude Code edit a design I have open in the browser?

Yes. The MCP server writes through the same validated transaction path the editor uses, and the canvas is pushed over realtime, so an edit made from the terminal appears in an open tab without a reload.

How do I share the Loora server with my team?

Use claude mcp add --scope project, which writes .mcp.json into the repository. Everyone still signs in as themselves — the file carries the endpoint, never a credential.

Other clients

Open a design to connect to →

← All MCP setup guides

|Use Loora as a design tool in Claude Code.