Skip to content
Index730 resources
Loora

Loora

Canvas design tool with a remote MCP server your coding agent edits live

Tier S · Best in classAI ToolMCP ServerApploora.design

(Visit loora.design ↗)(Docs)(Repository)
Preview image from loora.design

An infinite-canvas design tool by lassejlv where pages, components and tokens are stored as structured nodes, and every edit — yours or an agent's — goes through the same validated, undoable, conflict-aware transaction. It runs a remote MCP server at https://mcp.loora.design/mcp over streamable HTTP with OAuth 2.1 (PKCE, dynamic client registration, no API key), and exposes roughly 30 typed tools grouped as 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) and Designs (createDesign, renameDesign, deleteDesign, exportCode). Designs have git-style branches and version history; export is one-way to HTML/CSS, React TSX, plain JSX, Tailwind utilities, raw JSON or PNG. There is no built-in chat agent — you bring Claude Code, the Claude app, Codex, Cursor, VS Code Copilot, opencode, Windsurf, Cline, Zed, Gemini CLI, Goose or Warp.

Install
npx skills add https://github.com/lassejlv/loora/tree/main/skills/loora-design-guide

For an agent

Add the endpoint once, then work the documented order: listDesigns → getDesignContext → setTokens before you draw anything → createPage and insertNodes → patchNodes to refine → getScreenshot to actually look at what you made → exportCode. Install the loora-design-guide skill alongside the server, because the tools tell you what you can do and not how to design. Two traps: a 401 means the OAuth token lapsed, so re-run the client's login step rather than editing config, and export is one-way — code you change afterwards never returns to the canvas, so branch inside Loora for anything speculative instead of regenerating.

Why it is here. It answers the real complaint about prompting an agent for React — regenerated files have no stable identity for their parts — by giving both you and the agent addressable nodes in one document, with branches and history around it.

Install command, framework, licence and component list.

Facts

License
AGPL
Pricing
Freemium, Subscription, Open source, Free but account required
Framework
React, Vanilla JS
Styling
Tailwind CSS, Vanilla CSS
Distribution
Web app / online tool, MCP server, Agent skill / rules pack, Desktop application, GitHub repository
Platform
Web, Desktop
Content type
Design tokens / theme files, Code, Images / textures / backgrounds
Agent readiness
MCP server, Agent skill or rules pack, Readable open source, Login required, Structured documentation
Accessibility
Unknown
Maturity
Actively maintained
Pricing detail
Free $0/month: 50 design files, 100 Agent Calls per week, 1 GB asset storage, 2 days of version history, one open branch per design. Pro $20/month: unlimited files and branches, 50 GB assets, 1,000,000 Agent Calls per week, 90 days of history.
GitHub stars
122

Notable for

  • Remote MCP server, OAuth 2.1, no API key
  • About 30 typed canvas tools including getScreenshot
  • Branches, merge and version history on designs
  • Exports HTML, React TSX, JSX, Tailwind, JSON, PNG
  • AGPL-3.0 source, self-hostable
  • Ships its own design-guide agent skill

Provenance

Verified 2026-08-15. HTTP 200. https://loora.design/ (WebFetch + raw HTML via curl), https://loora.design/mcp (raw HTML, full tool list), https://github.com/lassejlv/loora. docs.loora.design does not resolve.

Also in Agent Design Tooling

6
loora.designTier S