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.
/plugin marketplace add pengelbrecht/agentviewer/plugin install agentviewer@agentviewer-marketplaceThis skill is limited to using the following tools:
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 tap pengelbrecht/agentviewer
brew install 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.amd64.rpm
sudo rpm -i agentviewer.amd64.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
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.