xfstudio 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/<terminal_id>/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/<terminal_id>/a2ui_input.log
To find terminal config (including sidecarPort):
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:
ss -tlnp | grep <sidecarPort>
If NOT running, start it:
python3 /home/yousuf/GoogleDrive/PROJECTS/APPS/TriClaude/scripts/a2ui_sidecar.py \
--port <sidecarPort> \
--log /home/yousuf/GoogleDrive/PROJECTS/.triclaude/runtime/terminals/<terminal_id>/a2ui_input.log &
Example:
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
cat << 'A2UI_EOF' >> $A2UI_LOG
<!-- A2UI:START -->
<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #0f172a;
color: #e2e8f0;
font-family: system-ui;
padding: 16px;
}
/* Your styles here */
</style>
</head>
<body>
<!-- Your content here -->
</body>
</html>
<!-- A2UI:END -->
A2UI_EOF
Embed Running App (iframe)
cat << 'A2UI_EOF' >> $A2UI_LOG
<!-- A2UI:START -->
<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; width: 100%; overflow: hidden; background: #0f172a; }
iframe { width: 100%; height: 100%; border: none; display: block; }
</style>
</head>
<body>
<iframe src="http://localhost:3000" allow="*" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals"></iframe>
</body>
</html>
<!-- A2UI:END -->
A2UI_EOF
Critical Requirements
- Markers required:
<!-- A2UI:START -->and<!-- A2UI:END --> - 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: hiddenon 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 <sidecarPort> - 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:
cat /home/yousuf/GoogleDrive/PROJECTS/.triclaude/projects.json | grep -A5 "<terminal_id>"
Quick diagnostic:
# 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
# 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
<!-- A2UI:START -->
<html><body style="background:#0f172a;color:white;padding:20px;">
<h1>Hello A2UI!</h1>
</body></html>
<!-- A2UI:END -->
A2UI_EOF