| name | artifact-publishing |
| description | Workflow for publishing HTML artifacts (demos, visualizations, interactive content) to the web.
Enables agents to share work products publicly via GitHub Pages or similar hosting.
|
| license | MIT |
| compatibility | Requires git and GitHub Pages or similar hosting |
| metadata | {"author":"bob","version":"1.0.0","tags":["publishing","artifacts","html","demos","visualization","github-pages"],"requires_tools":["git","gh"],"requires_skills":[]} |
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:
model: "anthropic/claude-sonnet-4-5"
harness: "gptme"
orchestration: null
- 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"
orchestration: "gptodo spawn"
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
