From agentviewer
Display rich content (markdown, code, diffs, mermaid diagrams) to users in a browser viewer. Use when you need to show complex content that benefits from rich rendering - reports, documentation, code with syntax highlighting, git diffs, or diagrams.
How this skill is triggered — by the user, by Claude, or both
Slash command
/agentviewer:agentviewerThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Display rich content in a browser-based tabbed viewer. Perfect for showing users:
Display rich content in a browser-based tabbed viewer. Perfect for showing users:
The agentviewer CLI must be installed and available in your PATH.
macOS/Linux (Homebrew):
brew install pengelbrecht/tap/agentviewer
Windows (Scoop):
scoop bucket add agentviewer https://github.com/pengelbrecht/scoop-agentviewer
scoop install agentviewer
Windows (Winget):
winget install pengelbrecht.agentviewer
Linux (deb - Debian/Ubuntu):
curl -LO https://github.com/pengelbrecht/agentviewer/releases/latest/download/agentviewer_amd64.deb
sudo dpkg -i agentviewer_amd64.deb
Linux (rpm - Fedora/RHEL):
curl -LO https://github.com/pengelbrecht/agentviewer/releases/latest/download/agentviewer_x86_64.rpm
sudo rpm -i agentviewer_x86_64.rpm
Go:
go install github.com/pengelbrecht/agentviewer@latest
Binary: Download from GitHub Releases
agentviewer --version
Start the server (runs in background, opens browser):
agentviewer serve --open &
Create a tab with content:
curl -X POST localhost:3333/api/tabs \
-d '{"title": "Report", "type": "markdown", "content": "# Hello\n\nContent here..."}'
Base URL: http://localhost:3333
# Markdown (renders GFM with diagrams and math)
curl -X POST localhost:3333/api/tabs \
-d '{"title": "Notes", "type": "markdown", "content": "# My Notes\n\n- Item 1\n- Item 2"}'
# Code with syntax highlighting
curl -X POST localhost:3333/api/tabs \
-d '{"title": "main.go", "type": "code", "content": "package main\n\nfunc main() {}", "language": "go"}'
# From file path (auto-detects type, enables live reload)
curl -X POST localhost:3333/api/tabs \
-d '{"title": "Config", "file": "/path/to/config.yaml"}'
# Git diff (side-by-side comparison)
curl -X POST localhost:3333/api/tabs \
-d '{"type": "diff", "diff": {"left": "old.go", "right": "new.go"}}'
# With explicit ID (for updates)
curl -X POST localhost:3333/api/tabs \
-d '{"id": "my-report", "title": "Report", "type": "markdown", "content": "..."}'
# List all tabs
curl localhost:3333/api/tabs
# Get tab content
curl localhost:3333/api/tabs/{id}
# Delete specific tab
curl -X DELETE localhost:3333/api/tabs/{id}
# Delete all tabs
curl -X DELETE localhost:3333/api/tabs
# Activate (switch to) tab
curl -X POST localhost:3333/api/tabs/{id}/activate
# Check if server is running
curl localhost:3333/api/status
| Type | Description | Features |
|---|---|---|
| markdown | Rendered markdown | GFM, Mermaid diagrams, LaTeX math, code blocks |
| code | Source code | Syntax highlighting for 180+ languages |
| diff | File comparison | Side-by-side view with line numbers |
Agentviewer renders GitHub-flavored markdown with extensions:
# Mermaid Diagrams
\`\`\`mermaid
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Action]
B -->|No| D[End]
\`\`\`
# LaTeX Math
Inline: $E = mc^2$
Block:
$$
\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$
# Code Blocks (with syntax highlighting)
\`\`\`python
def hello():
print("Hello, world!")
\`\`\`
# Start server
agentviewer serve --open &
# Show a markdown report
curl -X POST localhost:3333/api/tabs -d '{
"title": "Analysis",
"type": "markdown",
"content": "# Code Analysis\n\n## Summary\n- 10 files analyzed\n- 2 issues found\n\n## Issues\n\n### Issue 1\n```go\n// problematic code\nfunc foo() {}\n```\n"
}'
# Show a code file (changes reload automatically)
curl -X POST localhost:3333/api/tabs -d '{
"title": "main.go",
"file": "./main.go"
}'
# Get current changes
git diff HEAD > /tmp/changes.diff
# Display in viewer
curl -X POST localhost:3333/api/tabs -d '{
"title": "Changes",
"type": "diff",
"file": "/tmp/changes.diff"
}'
curl -X POST localhost:3333/api/tabs -d '{
"title": "Architecture",
"type": "markdown",
"content": "# System Architecture\n\n```mermaid\ngraph TB\n subgraph Frontend\n A[React App]\n end\n subgraph Backend\n B[API Server]\n C[Database]\n end\n A --> B\n B --> C\n```"
}'
# Check if server is running
if ! curl -s localhost:3333/api/status > /dev/null 2>&1; then
agentviewer serve --open &
sleep 1
fi
# Start server
agentviewer serve [--port 3333] [--open]
# Show version
agentviewer --version
agentviewer -v
Guides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.
npx claudepluginhub pengelbrecht/agentviewer --plugin agentviewer