Everything in Lunagraph.

Every feature, grouped by what you are doing. Cards with an arrow open a page with the full demo. Features without a picture yet are listed under the cards.

01

Design with agents

  • Chat on the canvasSelect an element, describe the change. The selection goes with your message and the agent edits that element.
  • Bring your own agentUse the coding agent you already have, on the plan you already pay for: Claude Code, Codex, Cursor or OpenCode run inside Lunagraph.
  • Choose your agentWork with Claude Code, Codex, Cursor or OpenCode. Choose the agent, model and settings for each chat.
  • Start and steer chats from any MCP clientConnect any MCP-capable tool to Lunagraph's local MCP server and it can open a chat, pick the agent, send canvas context, read the transcript and send feedback. The chat shows up in the sidebar like any other.
  • Agent commentsPin a comment, mention @Agent, and the edit and reply land in the same thread.
  • TabsKeep projects open while their agents work. The strip shows who finished.
Also in Design with agents
  • Your skills and MCP, in the chatType / for the skills your agent has installed and attach its MCP servers as connections. They are the selected agent's own, so that agent has to be set up and signed in. File the issues in Linear, or have it open the pull request with the GitHub CLI, from the canvas.
  • See where the agent is workingA live cursor in the chat's colour shows what the agent is doing on the canvas. Follow it, or keep working.
  • Start chats from your own toolsA chat opened from Claude Code, Codex, Cursor or OpenCode over MCP shows up in the sidebar with canvas context attached.
02

Bring designs in

  • Import your design systemOpen a folder or connect GitHub. Tokens, icons and components arrive on a reference page and in Assets.
  • Copy from ChromeCapture a page or one element with the extension and paste it as layers.
  • Copy from FigmaPaste a frame. Auto layout, text, vectors and effects stay editable.
  • Paste HTML or SVGPaste markup from anywhere, a snippet, an email, an SVG file. It lands as real layers you can select and edit.
Also in Bring designs in
  • Live preview on the canvasPut a browser frame on the canvas, point it at localhost or production, and pick any element as layers.
  • Images and videoDrop images or video onto the canvas. Crop and adjust images right there.
  • Icon librariesLucide, Phosphor, Heroicons, or any icon package from npm.
  • Drag from a live siteSwitch a live preview to Capture, then press and drag any element out of the page. It lands on the canvas as editable layers; no modifier key needed.
  • Option-drag from a componentOption-drag any part of a component instance to pull a snapshot of it onto the canvas, ready to restyle.
03

Canvas

  • A full design canvasFrames, stacks, grid and text. Layout is real CSS, and the inspector covers everything from gradients to filters.
  • Local fontsUse fonts from your Mac. Lunagraph adds them to the project for your team.
  • Custom controlsComponents you make show their props as controls in the inspector: a slider, a palette, a toggle.
Also in Canvas
  • Tailwind classesEdit classes with suggestions from your own config, or read the CSS in the Inspect tab.
  • Layers and pagesA layers tree with search and drag reorder, and a page per exploration inside a file.
  • CommentsThreads pinned to elements, with mentions and resolve. Guests can comment without an account if you allow it.
  • Version historyEvery canvas and file keeps its versions. Open one, compare, restore.
  • Export and copyPNG, JPG, WebP, AVIF and PDF at any scale. Copy as React, copy CSS, or copy to Figma as layers.
  • Keyboard shortcutsTools, zoom, present, preview, insert and export all have shortcuts. Smart guides and nudge keep things aligned.
  • Edit on the canvas or in codeChange a style in the inspector or open the file in the code window. Both edit the same source.
04

React components

  • Button.tsx, as a componentYour shadcn Button on the canvas with its real variants, sizes and icons. Change a prop in the inspector, the component re-renders.
  • Animation, as it runsFramer Motion and CSS transitions play on the canvas. Hover the song card and the spring is the real one from your code.
  • Three.js, liveA brushed-metal card rendered by three.js, right on the canvas. Drag it to turn it. WebGL components are components too.
Also in React components
  • Interact modePress I and click the component. Hover, open and loading states come from its code, not from a copy you drew.
  • Start from shadcnAdd the shadcn set to an empty project in one click and design on it right away.
  • Templates from your codeA compositions file next to a component turns its examples into drag-in templates in Assets.
  • Create a component from a selectionTurn any selection into a component file in your project, then reuse it as an instance.
  • Make prototypesWire real components into a flow and present it. Every state is the component's own.
  • Hand off complete componentsCopy a frame as React with its nested components, or turn a selection into a component file. The handoff is the design.
  • Pull a component out, send the edit backOption-drag a snapshot of a component instance, restyle it on the canvas, then ask the agent to implement the change in the component's source.
05

Prototyping

  • Ask chat to prototype the flowSelect the screens in a flow and ask your agent to connect them. It writes the real navigation into the components.
  • Present it, then send the linkPresent steps through the frames full screen. Share the file link and your team opens the same player.
Also in Prototyping
  • View or comment linksInvite people as editors or viewers, or set the file link to view or comment.
06

To codebase and back

  • Implement to your codebaseAsk the agent to implement the design. It edits the files in your repo and opens a pull request.
  • Getting startedConnect your agent and codebase, then import your design system. Three short guides.
Also in To codebase and back
  • The code lands in your repoThe agent edits the real files in your project. Your file tree and diff show exactly what changed, ready to review.
  • Connect GitHubLink a repository, keep the project's files in sync, and commit, push and pull from the Git panel.
  • Agents edit your repoGive your agent a local folder and it reads and edits the real files, from the canvas or from your terminal.
  • Component scanningNew components in the repo show up in Assets, ready to drag onto the canvas.
  • Live preview at any viewportPoint a live preview at localhost and set it to iPhone, iPad or Desktop, or any size. Keep several on the canvas side by side.