Power your agent
Perintah milik penerbit sendiri. Bukan endpoint PlugMCP.
Host a copy with our keys and logs.
npx -y [email protected]Claude Code tidak punya tautan instal untuk perintah lokal. Salin perintah di bawah dan jalankan di terminal.
claude mcp add create-truecanvas -- npx -y create-truecanvas@0.7.2Jalankan di terminal.
{ "mcpServers": { "create-truecanvas": { "command": "npx", "args": [ "-y", "[email protected]" ] } }}claude_desktop_config.json
URL remote atau perintah di mesin Anda? Perbedaan kedua cara instal
Jalankan di PlugMCP
A new server you create. It is not this listing's official endpoint. Use the publisher install when you want their URL and their credentials.
BukaDari penerbit
A Figma-like canvas for your real React components. The code is the document.
Truecanvas renders your actual components on an infinite canvas and writes every change back to plain TSX in your repo. It has no built-in AI: it is agent-first through , so Claude Code, Cursor, Codex or any MCP client can read your design system, edit frames and take screenshots while you watch and steer.
Create a Next.js or Vite app with Truecanvas set up: npm create truecanvas
.tsx
.canvas.tsx file. Edits are minimal patches that keep your formatting, so diffs stay reviewable.page.tsx and its layouts.In a Next.js (App Router, 15.3+) or Vite + React (5+) app:
npx truecanvas
The first run sets the project up: the dev dependency, the plugin in next.config or vite.config, a canvas script and a first canvas. It then starts your app and opens the editor. After that, use npm run canvas.
Start a new app instead:
npm create truecanvas@latest my-app # asks Next.js or Vite
npm create truecanvas@latest my-app -- --vite
Run npx truecanvas doctor if anything looks off: it checks every requirement and prints a fix for each problem.
npx truecanvas connect
This adds Truecanvas to the project's .mcp.json. Commit it and every teammate's agent is connected.
Then select something and ask: "Make my selection denser" or "Show every status of SessionRow in a variants frame".
"use client";
import { Canvas, Frame } from "truecanvas";
import { SessionRow } from "@/components/session-row";
export default function ChatCanvas() {
return (
<Canvas>
<Frame name="Sessions" x={0} y={0} width={320}>
<SessionRow title="Review release readiness" status="working" />
</Frame>
<Frame name="Sessions dark" x={360} y={0} width={320} theme="dark">
<SessionRow title="Draft the changelog" status="review" />
</Frame>
</Canvas>
);
}
<Frame> takes name, x, y, width, and optionally height, theme, device, page (a linked page) or component (a main component). Each frame renders in its own iframe at its own width, so media queries, portals and position: fixed behave as in your app. Literal props are editable in the inspector; expressions still render but are read-only.
/truecanvas/<canvas> from your dev server, where a small runtime maps what's under the pointer back to that position.Node ids are the JSX tag's line:col and change after edits; every write returns the fresh ids. Catalog components are imported automatically.
Canvases, comments and linked pages are files in your repo, so design changes are branched, reviewed and merged like code. From the Git panel you can branch, commit with a per-frame summary, open a pull request with before/after images, and compare against any branch or commit. Comments are saved with the canvas and agents can read and resolve them.
The Truecanvas window (npx truecanvas open) manages several projects in tabs, clones from GitHub and reviews pull requests on the canvas.
The desktop app (Linux AppImage and deb, from the releases) is the same window, installed: it runs in the tray, starts each project's dev server with your own Node when you open it and stops it after 30 minutes unused, notifies you when a client comments on a share link, can start at login, and updates itself.
Share (top right in the editor), npx truecanvas share <canvas>, or your agent's share_canvas renders every frame through your app and freezes it into static HTML and CSS: no scripts, so a link can never call your API or leak a session. It's published to your own review site as a new version of that page's link. Clients open it in any browser, with an optional password, and pin comments on the frames. Their threads sync into the canvas's comments while Truecanvas runs; your replies and your agent's (reply_comment, resolve_comment) go back to the link, under your studio's name. Comments you start in Truecanvas stay internal. --revoke takes a link down and --delete removes it with its comments.
On a review site that hosts live sites (the Cloudflare one), each share also includes the real site: Truecanvas builds your app as static pages (a copy, so your dev server keeps running), and page frames show the actual page, scrollable and clickable, animations included. Clients click a page to interact with it, and Full screen opens it at a real screen size. Sharing again only uploads the files that changed. Pages that need a server (API routes, middleware) can't be built this way: the share then keeps frozen frames and says why. --frozen leaves the real site out; --live <dir|url> uses another build folder or the URL where the app runs.
On the Cloudflare review site, Live session in the Share dialog, npx truecanvas share <canvas> --session or your agent's start_session opens a live session: everyone with access to the link sees the canvas live from your app, updating as you edit, with each other's cursors and comments arriving as they're written. Stop it and the link shows the latest published version again.
On the Cloudflare review site with sign-in, --invite [email protected] emails your client an invitation: they sign in with a link, no password, and comment under their name. New links are for invited people and your studio; --access password|public changes that, and --link-only invites or changes access without a new version.
You deploy the review site once, on your own domain:
packages/review-worker, recommended): Workers, D1 and R2 on the free plan, hosts live sites. See its README.packages/review): create a project with Root Directory packages/review, add a private Blob store and Upstash for Redis, set REVIEW_TOKEN (a long random string) and optionally BRAND_NAME and BRAND_LOGO, then add your domain. Frozen frames and comments only.Then connect Truecanvas: npx truecanvas share setup https://review.your-studio.com.
Without a review site, Share still makes a local preview of what clients would see.
Select a frame, then Make a shot in its panel. The frame, as your app renders it, is staged on a backdrop for posting:
Copy image puts it on the clipboard to paste into a post; Export PNG downloads it. Shots are saved in canvas/<page>.shots.json, so they're versioned with the repo and can be exported again after design changes:
npx truecanvas shot home # the home page's latest shot, to shots/
npx truecanvas shot home --frame Pricing --format 1:1
npx truecanvas shot home --all # every saved shot again
Video: switch the dialog to Video and the frame is your page itself, live: Reveal (it rises into place while its own animations play), Scroll (it scrolls like a visitor would, scroll animations included: it eases in, cruises at one speed and eases out, and its distance, speed and length stay linked) or Drift (a slow push in), 3 to 15 seconds, with the shader backdrop moving gently. The preview plays in the dialog; Export video records it frame by frame on a virtual clock, so every frame is exact however busy the machine is, and encodes a 60 fps MP4 at the format's size (30 fps renders twice as fast; about 10 to 20 seconds of rendering per second of video). It needs ffmpeg (npx truecanvas doctor checks); without one with H.264, Playwright's ffmpeg writes WebM.
npx truecanvas shot home --frame Home --video --motion scroll --duration 8
Agents use make_shot ("make a LinkedIn image of the hero on a navy gradient", or with video for an MP4): it saves the shot, exports it to shots/ and looks at a preview (a frame of the video) to adjust.
Everything is optional. Add a truecanvas.config.json at the project root:
{
"appUrl": "http://localhost:3000",
"port": 4800,
"canvasDir": "canvas",
"components": ["components/**/*.tsx"],
"darkMode": { "strategy": "class", "value": "dark" },
"css": ["/src/index.css"],
"editor": "code"
}
darkMode describes how your app switches themes (a class, or { "strategy": "attribute", "attribute": "data-theme", "value": "dark" }). css (Vite only) lists the stylesheets frames load; by default, the ones your entry module imports.
npx playwright install chromium-headless-shellgh auth login)Linked page frames need Next.js file-based routes. Everything else works the same in Vite apps.
pnpm install
pnpm build # library and editor
pnpm --filter truecanvas test # tests
pnpm dev # playground app and editor
pnpm --filter truecanvas dev:editor # editor with HMR on :4801
Releases: pnpm release <version> bumps both packages and tags; git push --follow-tags publishes to npm from GitHub Actions with provenance.
Create a Next.js or Vite app with Truecanvas set up: npm create truecanvas
{ "mcpServers": { "create-truecanvas": { "command": "npx", "args": [ "-y", "[email protected]" ] } }}Tool
Belum ada daftar tool. Server remote mendapatkannya setelah pemeriksaan kesehatan pertama.
FAQ
Salin konfigurasi stdio untuk Cursor, Claude Desktop, Claude Code, atau VS Code di halaman ini. Konfigurasi ini memakai instalasi dari penerbit, bukan proxy PlugMCP.
Tidak ada variabel lingkungan wajib yang tercantum di catatan ini.
Create Truecanvas berjalan secara lokal melalui stdio.
Terakhir diperiksa 2026-11-13. Create a Next.js or Vite app with Truecanvas set up: npm create truecanvas