🎯

a2ui-embed

🎯Skill

from yousufjoyian/claude-skills

What it does

Writes custom HTML visualizations or embeds web apps directly into the A2UI panel for interactive display.

📦

Part of

yousufjoyian/claude-skills(24 items)

a2ui-embed

Installation

PythonRun Python server

python3 /home/yousuf/GoogleDrive/PROJECTS/APPS/TriClaude/scripts/a2ui_sidecar.py \

PythonRun Python server

python3 /path/to/a2ui_sidecar.py --port PORT --log /path/to/a2ui_input.log &

📖 Extracted from docs: yousufjoyian/claude-skills

Need more details? View full documentation on GitHub →

2Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

Write HTML visualizations to the A2UI panel or embed running apps

Overview

# A2UI Visualization Skill

Write custom HTML visualizations or embed running web apps in the TriClaude A2UI panel.

Trigger Phrases

"open in a2ui", "show in a2ui", "embed", "a2ui"
"visualize", "show me", "display", "chart", "render"

How A2UI Works

```

┌─────────────────────────────────────────────────────────────┐

│ Claude writes HTML Sidecar watches UI displays │

│ to a2ui_input.log → log file and → via WebSocket │

│ broadcasts │

└─────────────────────────────────────────────────────────────┘

```

Components:

Log file: runtime/terminals//a2ui_input.log
Sidecar: Python WebSocket server that watches the log
UI: React connects to sidecar WebSocket, renders HTML in iframe

Step 1: Get Terminal Info

The A2UI log path is in your terminal startup message:

```

A2UI VISUALIZATION: Write HTML to /home/yousuf/GoogleDrive/PROJECTS/.triclaude/runtime/terminals//a2ui_input.log

```

To find terminal config (including sidecarPort):

```bash

cat /home/yousuf/GoogleDrive/PROJECTS/.triclaude/projects.json | python3 -m json.tool

```

Look for your terminal ID and note the sidecarPort.

Step 2: Ensure Sidecar is Running

Check if sidecar is running:

```bash

ss -tlnp | grep

```

If NOT running, start it:

```bash

python3 /home/yousuf/GoogleDrive/PROJECTS/APPS/TriClaude/scripts/a2ui_sidecar.py \

--port \

--log /home/yousuf/GoogleDrive/PROJECTS/.triclaude/runtime/terminals//a2ui_input.log &

```

Example:

```bash

python3 /home/yousuf/GoogleDrive/PROJECTS/APPS/TriClaude/scripts/a2ui_sidecar.py \

--port 7867 \

--log /home/yousuf/GoogleDrive/PROJECTS/.triclaude/runtime/terminals/term_1768665093_0ve1c1/a2ui_input.log &

```

Step 3: Write HTML to A2UI

Custom Visualization

```bash

cat << 'A2UI_EOF' >> $A2UI_LOG

A2UI_EOF

```

Embed Running App (iframe)

```bash

cat << 'A2UI_EOF' >> $A2UI_LOG

A2UI_EOF

```

Critical Requirements

Markers required: and
Append to log: Use >> not >
Sidecar must be running on the terminal's sidecarPort
A2UI panel must be open in the UI (purple button)
Terminal must be visible/selected in UI

For iframes:

sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals"
allow="*"
No padding/margin on html/body
overflow: hidden on body

Project Registry (for embedding apps)

| Project | Path | Port |

|---------|------|------|

| tesseract | /home/yousuf/local_workspaces/tesseract | 3000 |

| triclaude | /home/yousuf/local_workspaces/triclaude | 3001 |

Troubleshooting

Panel shows nothing:

Check sidecar is running: ss -tlnp | grep
Start sidecar if not running (see Step 2)
Toggle A2UI panel off/on to force WebSocket reconnect
Check log file has content: tail -20 $A2UI_LOG

Find terminal's sidecar port:

```bash

cat /home/yousuf/GoogleDrive/PROJECTS/.triclaude/projects.json | grep -A5 ""

```

Quick diagnostic:

```bash

# 1. Get terminal ID from startup message

# 2. Find sidecar port

cat /home/yousuf/GoogleDrive/PROJECTS/.triclaude/projects.json | python3 -m json.tool | grep -A10 "term_XXXXX"

# 3. Check if sidecar running

ss -tlnp | grep 786

# 4. Start sidecar if needed

python3 /path/to/a2ui_sidecar.py --port PORT --log /path/to/a2ui_input.log &

```

Example: Full Flow

```bash

# 1. Note terminal ID from startup: term_1768665093_0ve1c1

# 2. Check config - sidecarPort is 7867

# 3. Check sidecar: ss -tlnp | grep 7867 → not running

# 4. Start sidecar:

python3 /home/yousuf/GoogleDrive/PROJECTS/APPS/TriClaude/scripts/a2ui_sidecar.py \

--port 7867 \

--log /home/yousuf/GoogleDrive/PROJECTS/.triclaude/runtime/terminals/term_1768665093_0ve1c1/a2ui_input.log &

# 5. Write visualization:

cat << 'A2UI_EOF' >> /home/yousuf/GoogleDrive/PROJECTS/.triclaude/runtime/terminals/term_1768665093_0ve1c1/a2ui_input.log

Hello A2UI!

A2UI_EOF

```

More from this repository10

🎯

folder🎯Skill

folder skill from yousufjoyian/claude-skills

🎯

video-downloader🎯Skill

Downloads YouTube and other platform videos with customizable quality, format, and batch options for offline viewing and editing.

🎯

context-manager🎯Skill

Compiles and maintains context artifacts for stateless agent onboarding, enabling fast, token-efficient project understanding without full repo scanning.

🎯

context-extract🎯Skill

context-extract skill from yousufjoyian/claude-skills

🎯

youtube-transcript🎯Skill

Extracts and downloads transcripts or captions from YouTube videos using yt-dlp, supporting multiple subtitle formats and languages.

🎯

human-extractor🎯Skill

I apologize, but I cannot generate a description without seeing the actual code or having more context about the "human-extractor" skill. Could you provide more details about what the skill does, i...

🎯

image-enhancer🎯Skill

Enhances and upscales low-resolution images to higher quality using advanced image processing techniques.

🎯

csv-data-summarizer🎯Skill

Extracts key insights, statistical summaries, and meaningful patterns from CSV files by analyzing their data columns and overall structure.

🎯

playwright-skill🎯Skill

Automates web browser testing and interaction using Playwright, enabling cross-browser scripting and web automation tasks.

🎯

dashcam-frame-extraction🎯Skill

dashcam-frame-extraction skill from yousufjoyian/claude-skills