A high-performance skill that transforms raw HTML or Mermaid syntax into shareable, interactive web canvases via a single API call.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install gui-new
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install gui-new using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is gui-new?
The gui-new skill is a powerful bridge between code generation and visual deployment for AI agents. It allows users to instantly generate shareable HTML canvases, dashboards, and interactive tools without managing hosting or complex deployments. By leveraging the gui.new API, this skill enables Openclaw Skills to provide immediate visual feedback through live URLs that support real-time input synchronization and state persistence.
Beyond simple static hosting, gui-new provides a suite of auto-injected web components like charts, kanban boards, and forms. This allows developers and AI agents to create sophisticated, data-driven interfaces with minimal boilerplate. Whether you are visualizing a data trend or building a quick internal tool, gui-new turns code output into a collaborative experience.
gui-new Use Cases
- Creating live-preview links for generated dashboards, charts, and data tables.
- Sharing interactive forms and tools with team members for real-time collaboration.
- Generating and hosting shareable Mermaid diagrams for documentation or planning.
- Providing instant visual prototypes of frontend components and landing pages.
- Transforming AI-generated code snippets into viewable, persistent web assets.
How gui-new Works
- The AI agent identifies a request for visual output or a shareable link.
- The skill constructs a JSON payload containing the HTML content or Mermaid syntax.
- A POST request is sent to the gui-new API endpoint.
- The API returns a unique canvas ID, a public URL, and an edit token for future updates.
- The skill provides the live link to the user, allowing for immediate viewing and interaction.
gui-new Setup
To use the gui-new skill within your Openclaw Skills environment, ensure you have the necessary SDKs installed for your preferred language.
# Install via npm
npm install gui-new
# Install via pip
pip install gui-new
No API key is required for the free tier, but for extended persistence, you can configure an optional Pro API key in your environment variables.
gui-new Data Schema & Taxonomy
The skill manages data through a structured API response and supports specific custom HTML components for data visualization.
| Component | Attribute | Data Format |
|---|---|---|
| gui-chart | data | JSON array of label/value objects |
| gui-table | data | JSON array of row objects |
| gui-kanban | columns | JSON array of title/items objects |
| gui-form | fields | JSON array of field definitions |
All canvases include metadata such as edit_token for lifecycle management and expires_at for cleanup tracking.
gui-new Advanced Features
- Real-time sync: All form inputs (checkboxes, ranges, text) synchronize across all active viewers automatically.
- Auto-injected components: Use high-level tags like
<gui-timeline>and<gui-grid>without manual script imports. - State persistence: Built-in handling for user interactions within the generated canvas.
- Pro Tier extensions: Support for up to 10MB payloads and 30-day link expiration via x-api-key headers.
- Mermaid integration: Dedicated endpoint for converting flowchart syntax directly into visual assets.
SKILL.md
Loading
Related Openclaw Skills
Arithym
Arithym is an exact math engine for AI agents that provides 62 specialized tools to ensure zero-hallucination arithmetic, calculus, and scientific computations.
Image to PDF
A powerful utility to intelligently merge multiple images and screenshots into professionally formatted, paginated A4 PDF documents.
TaskQueue — Async Task Queue for AI Agents
A production-ready task orchestrator for AI agents featuring priority queuing, retry logic, and dependency management.
SkillTree Learning Progress Tracker
A gamified learning path tracker that organizes educational goals into a visual, prerequisite-based RPG skill tree.
Sweden Pollen Forecast
A specialized AI agent skill that retrieves real-time pollen levels and allergy forecasts for 24 regions across Sweden.
Feishu Voice Loop
A professional voice interaction pipeline that transcribes audio input and delivers AI-generated speech responses directly to Feishu or web players.
Featured*
