gui.new
/install gui-new
gui.new
HTML in, URL out. One API call turns HTML into a shareable link.
Create a Canvas
curl -X POST https://gui.new/api/canvas \
-H "Content-Type: application/json" \
-d '{"html": "\x3Ch1>Hello\x3C/h1>", "title": "My Canvas"}'
Response: {"id": "abc123", "url": "https://gui.new/abc123", "edit_token": "...", "expires_at": "..."}
Always share the url with the user after creating.
Update a Canvas
curl -X PUT https://gui.new/api/canvas/CANVAS_ID \
-H "Authorization: Bearer EDIT_TOKEN" \
-H "Content-Type: application/json" \
-d '{"html": "\x3Ch1>Updated\x3C/h1>"}'
Extend Expiry
curl -X POST https://gui.new/api/canvas/CANVAS_ID/extend \
-H "Authorization: Bearer EDIT_TOKEN"
Mermaid Diagrams
curl -X POST https://gui.new/api/flow \
-H "Content-Type: application/json" \
-d '{"mermaid": "graph TD\
A[Start] --> B[End]"}'
Pro API Key (optional)
For extended expiry and higher limits, pass x-api-key header + "expires": "7d" body field (1h, 24h, 7d, 30d). No API key is needed for free tier usage.
Security Note
This skill sends HTML content to https://gui.new, a third-party hosted service. Do not send sensitive, private, or confidential data. Canvases are publicly accessible via their URL. Links expire (24h free, up to 30d Pro).
Built-in Components (auto-injected)
Use these tags directly — no script imports needed:
\x3Cgui-chart type="bar" data='[{"label":"Q1","value":42}]'>\x3Cgui-table data='[{"name":"Alice","role":"Eng"}]'>\x3Cgui-card title="Metric" value="1,247" change="+12%">\x3Cgui-code language="javascript">code\x3C/gui-code>\x3Cgui-timeline data='[{"date":"Mar 1","title":"Launch"}]'>\x3Cgui-kanban columns='[{"title":"Todo","items":["Task 1"]}]'>\x3Cgui-form fields='[{"name":"email","type":"email","label":"Email"}]'>\x3Cgui-grid columns="3">content\x3C/gui-grid>
Real-Time Sync
All form inputs (text, range, select, checkbox) sync across viewers automatically. No setup needed.
Design Defaults
Dark background (#09090b), light text (#fafafa), system-ui font. Self-contained HTML with inline styles/scripts. Responsive.
Limits
Free: 2MB max, 24h expiry, 3 edits, 5 creates/hour. Pro: 10MB max, up to 30d expiry, unlimited edits, 100 creates/hour.
SDKs
- npm:
npm install gui-new - pip:
pip install gui-new - Full docs: https://gui.new/docs
- llms.txt: https://gui.new/docs/llms.txt
- 确保已安装 OpenClaw(本地或 Docker 部署)
- 在对话框中输入安装命令:
/install gui-new - 安装完成后,直接呼叫该 Skill 的名称或使用
/gui-new触发 - 根据 Skill 的参数说明提供必要输入,即可获得结构化输出
gui.new 是什么?
Create shareable HTML canvases via the gui.new API. Use when: (1) generating visual output (dashboards, charts, forms, tables, diagrams, landing pages, inter... 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件,目前累计下载 309 次。
如何安装 gui.new?
在 OpenClaw 或 Claude Code 对话框中运行命令「/install gui-new」即可一键安装,无需额外配置。
gui.new 是免费的吗?
是的,gui.new 完全免费,采用 MIT-0 许可证,可自由下载、安装和使用。
gui.new 支持哪些平台?
gui.new 跨平台运行,可在任意部署了 OpenClaw / Claude Code 的环境中使用(cross-platform)。
谁开发了 gui.new?
由 Dylan Feltus(@dylanfeltus)开发并维护,当前版本 v1.0.1。