接入你的智能体
發布者自己的指令。不是 PlugMCP 端點。
用我們的金鑰與日誌託管一份副本。
npx -y [email protected]Claude Code 沒有本機指令的安裝連結。複製下方指令並在終端機中執行。
claude mcp add create-truecanvas -- npx -y create-truecanvas@0.7.2在終端機中執行。
{ "mcpServers": { "create-truecanvas": { "command": "npx", "args": [ "-y", "[email protected]" ] } }}claude_desktop_config.json
遠端 URL 還是本機指令？ 兩種安裝方式的差異
來自發布者
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]" ] } }}工具
尚無工具清單。遠端伺服器會在首次健康檢查後取得工具清單。
常見問題
在本頁複製適用於 Cursor、Claude Desktop、Claude Code 或 VS Code 的 stdio 設定。它使用發布者的安裝方式，而不是 PlugMCP 代理伺服器。
這筆記錄未列出必要的環境變數。
Create Truecanvas 透過 stdio 在本機執行。
上次檢查時間：2026-11-13。 Create a Next.js or Vite app with Truecanvas set up: npm create truecanvas