Claw2UI - Agent-to-UI Bridge

Generate interactive web pages from TypeScript DSL specs and serve them via a public URL. Pages include Tailwind CSS, Alpine.js, and Chart.js out of the box, with pluggable themes, type checking, and mobile-responsive layouts.

Source: GitHub · npm · HF Space · License: MIT

Data Safety & User Confirmation

Every published page is accessible via a public URL. Never publish without explicit user approval.

• Always confirm with the user before publishing — describe what will be published and wait for explicit "yes"/"go ahead". Silent publishing is never acceptable
• Never include secrets, credentials, API keys, tokens, PII, or internal endpoints in page content
• Sanitize all user-provided data before embedding — the html component is sanitized server-side, but avoid passing raw untrusted input to other components
• Use TTL for ephemeral or sensitive data so pages auto-expire: --ttl 3600000 (1 hour)
• Review content before publishing — check that no sensitive information leaks through table rows, stat values, or chart labels

Setup

Claw2UI uses the public server at https://0xsegfaulted-claw2ui.hf.space by default. No local server needed.

npm install -g claw2ui
claw2ui register --server https://0xsegfaulted-claw2ui.hf.space
# Done! Token saved to ~/.claw2ui.json automatically.

Self-hosting: To run your own Claw2UI server (local, Docker, or HF Space), see the self-hosting guide.

Workflow

Step 1: Ensure Connection

# Register once (token saved to ~/.claw2ui.json)
claw2ui register --server https://0xsegfaulted-claw2ui.hf.space

Step 2: Write a TypeScript DSL Spec

Write a .ts file. Always wrap content in a container. The file is type-checked automatically.

cat > /tmp/claw2ui_page.ts << 'SPECEOF'
import { page, container, header, row, stat, card, chart, dataset } from "claw2ui/dsl"

export default page("Page Title", [
  container(
    header("Title", "Description"),
    row(3,
      stat("Metric 1", "100", { change: 5.2, icon: "trending_up" }),
      stat("Metric 2", "200"),
      stat("Metric 3", "300"),
    ),
    card("Trend",
      chart("line", {
        labels: ["Jan", "Feb", "Mar"],
        datasets: [dataset("Value", [10, 20, 15], { borderColor: "#3b82f6", tension: 0.3 })],
      }),
    ),
  ),
], { style: "anthropic" })
SPECEOF

Step 3: Confirm with User

Before publishing, tell the user what will be published and confirm they want to proceed. The page will be accessible via a public URL. Example:

"I've prepared a dashboard with [summary of content]. Ready to publish it to a public URL? (Use --ttl 3600000 for auto-expiry in 1 hour.)"

Step 4: Publish

Only after user confirmation: