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.
Agentviewer
Display rich content in a browser-based tabbed viewer. Perfect for showing users:
- Markdown documents with rendered formatting
- Code with syntax highlighting (180+ languages)
- Git diffs with side-by-side comparison
- Mermaid diagrams and LaTeX math
Prerequisites
The agentviewer CLI must be installed and available in your PATH.
Installation Options
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.amd64.rpm
sudo rpm -i agentviewer.amd64.rpm
Go:
go install github.com/pengelbrecht/agentviewer@latest
Binary: Download from GitHub Releases
Verify Installation
agentviewer --version
Quick Start
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..."}'
API Reference
Base URL: http://localhost:3333
Create/Update Tab
# 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": "..."}'
Tab Management
# 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
Server Status
# Check if server is running
curl localhost:3333/api/status
Content Types
| 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 |
Markdown Features
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!")
\`\`\`
Common Workflows
Show Analysis Results
# 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 Code with Live Reload
# Show a code file (changes reload automatically)
curl -X POST localhost:3333/api/tabs -d '{
"title": "main.go",
"file": "./main.go"
}'
Show Git Diff
# 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"
}'
Create Architecture Diagram
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```"
}'
Best Practices
- Start server once at the beginning of a session
- Use file paths when showing existing files (enables auto-reload)
- Use meaningful titles - they appear in the tab bar
- Clean up - delete tabs when no longer needed
- Use markdown for complex documents - renders beautifully with diagrams
- Use explicit IDs when updating content to avoid creating duplicate tabs
Error Handling
# Check if server is running
if ! curl -s localhost:3333/api/status > /dev/null 2>&1; then
agentviewer serve --open &
sleep 1
fi
CLI Reference
# Start server
agentviewer serve [--port 3333] [--open]
# Show version
agentviewer --version
agentviewer -v
You Might Also Like
Related Skills

cache-components
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
vercel
component-refactoring
Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component --json` shows complexity > 50 or lineCount > 300, when the user asks for code splitting, hook extraction, or complexity reduction, or when `pnpm analyze-component` warns to refactor before testing; avoid for simple/well-structured components, third-party wrappers, or when the user explicitly wants testing without refactoring.
langgenius
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
anthropics
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
anthropics
react-modernization
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
wshobson
tailwind-design-system
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
wshobson