gptme Artifact Publishing
Publish rich work products (HTML demos, visualizations, interactive tools) to make agent work visible and shareable.
When to Use
- Created an interactive HTML demo or visualization
- Built a tool that others should be able to try
- Want to share work beyond just code commits
- Need a public URL for a deliverable
Core Workflow
1. Choose Publishing Target
Option A: Personal GitHub Pages site (recommended for agents with their own identity)
# Clone or navigate to your .github.io repository
cd ~/agent-name.github.io
# Create demo in demos/ directory
mkdir -p demos/my-demo
Option B: Gist with HTML preview
# For single-file artifacts
gh gist create --public demo.html
# Use rawcdn.githack.com or similar for preview
2. Structure the Artifact
Place artifacts in a predictable location: demos/ ├── my-demo/ │ └── index.html # Main entry point ├── visualization/ │ ├── index.html │ └── data.json # Supporting data └── index.html # Optional: demo listing page
3. Create Demo Index (Recommended)
Use a data-driven approach for automatic demo listing:
_data/demos.yml (if using Jekyll):
- url: /demos/game-of-life/
title: "Conway's Game of Life"
description: "Interactive cellular automaton"
date: 2026-01-29
tags: [simulation, canvas]
generator:
# Technical specs for reproducibility and attribution
model: "anthropic/claude-sonnet-4-5" # Model identifier
harness: "gptme" # Agent harness/framework
orchestration: null # e.g., "gptodo spawn", "consortium"
- url: /demos/particle-system/
title: "Particle Physics"
description: "Interactive particle visualizer"
date: 2026-01-29
tags: [physics, interactive]
generator:
model: "moonshotai/kimi-k2.5"
harness: "gptme" # Options: gptme, claude-code, cursor, codex
orchestration: "gptodo spawn" # If sub-agent was spawned
The generator field captures technical provenance:
- model: The specific model used (provider/model format)
- harness: The agent framework (gptme, claude-code, cursor, codex, etc.)
- orchestration: Any multi-agent coordination tool used (gptodo spawn, consortium, null if direct)
demos.html or demos.pug template reads from data and renders the list automatically.
4. Commit and Push
# Stage artifact files
git add demos/my-demo/
# Commit with descriptive message
git commit -m "feat(demos): add interactive game of life"
# Push to trigger GitHub Pages deployment
git push origin main
5. Verify Deployment
# Wait for GitHub Pages to deploy (usually < 2 minutes)
# Then verify the live URL
curl -I https://username.github.io/demos/my-demo/
Best Practices
Self-Contained Artifacts
- Single HTML file with embedded CSS/JS when possible
- No external dependencies that might break
- Works offline after loading
Responsive Design
- Mobile-friendly layouts
- Touch support for interactive elements
- Reasonable file sizes
Metadata & Attribution
- Include generator info (model, harness) in UI or HTML comments
- Date of creation
- Link back to source repository if applicable
Accessibility
- Semantic HTML
- Keyboard navigation for interactive elements
- Reasonable color contrast
Example: Complete Publishing Flow
# 1. Create the artifact directory
mkdir -p ~/myagent.github.io/demos/visualization/
# 2. Save the HTML artifact
cat > ~/myagent.github.io/demos/visualization/index.html << 'EOF'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Data Visualization</title>
<!-- Generated by: gptme + claude-sonnet-4-5 -->
</head>
<body>
<!-- Interactive content -->
</body>
</html>
EOF
# 3. Update demo index with technical generator info
cat >> ~/myagent.github.io/_data/demos.yml << EOF
- url: /demos/visualization/
title: "Data Visualization"
description: "Interactive data explorer"
date: $(date +%Y-%m-%d)
generator:
model: "anthropic/claude-sonnet-4-5"
harness: "gptme"
orchestration: null
EOF
# 4. Commit and push
cd ~/myagent.github.io
git add demos/visualization/ _data/demos.yml
git commit -m "feat(demos): add data visualization"
git push
# 5. Report completion
echo "✅ Published at: https://myagent.github.io/demos/visualization/"
Communication Pattern
After publishing, close the loop with stakeholders:
## ✅ Artifact Published
**URL**: https://agent.github.io/demos/my-demo/
**Type**: Interactive visualization
**Generator**: gptme + claude-sonnet-4-5
**Features**: [Brief feature list]
The demo is now live and publicly accessible.
Integration with Workflow
- During work: Create artifact as you build
- On completion: Publish to hosting target
- In response: Include live URL in PR/issue comments
- For visibility: Link from blog posts, social media, or documentation
Alternatives
| Method | Pros | Cons |
|---|---|---|
| GitHub Pages | Free, reliable, custom domain | Requires repo |
| CodePen/JSFiddle | Instant sharing | External dependency |
| Vercel/Netlify | Full features | More setup |
Related
- Progressive Disclosure - Documentation patterns
- Code Review Helper - For reviewing artifact code