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.

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "agentviewer" with this command: npx skills add pengelbrecht/agentviewer/pengelbrecht-agentviewer-agentviewer

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_x86_64.rpm
sudo rpm -i agentviewer_x86_64.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

TypeDescriptionFeatures
markdownRendered markdownGFM, Mermaid diagrams, LaTeX math, code blocks
codeSource codeSyntax highlighting for 180+ languages
diffFile comparisonSide-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

  1. Start server once at the beginning of a session
  2. Use file paths when showing existing files (enables auto-reload)
  3. Use meaningful titles - they appear in the tab bar
  4. Clean up - delete tabs when no longer needed
  5. Use markdown for complex documents - renders beautifully with diagrams
  6. 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

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

General

ticks

No summary provided by upstream source.

Repository SourceNeeds Review
General

lucida

No summary provided by upstream source.

Repository SourceNeeds Review
General

frontend-design

No summary provided by upstream source.

Repository SourceNeeds Review