🚀 Visualization Deployment

Complete Guide for Val Diaz

📍 YOUR LIVE SITE
https://pwatson-mybambu.github.io/visualizations/
✨ Easiest Way: Configure Claude Desktop once, then just say "Create a sales dashboard and give me a public link" - Claude handles everything automatically!

1One-Time Setup (5 minutes)

Configure Claude Desktop to automatically deploy your visualizations:

  1. Open your Claude Desktop config file:
    open ~/Library/Application\ Support/Claude/claude_desktop_config.json
  2. Copy the instructions from CLAUDE_INSTRUCTIONS.txt (in your visualizations folder)
  3. Restart Claude Desktop

📖 View Detailed Setup Guide

2Using Claude Desktop (After Setup)

Simply tell Claude what you want:

"Create a Q4 sales dashboard and give me a public link"

Claude will automatically:

  • ✅ Create the HTML visualization
  • ✅ Save it to the correct folder with a descriptive name
  • ✅ Deploy it to GitHub Pages
  • ✅ Give you the public URL to share

3Share Your Link

Wait 1-2 minutes for deployment, then share your link with anyone:

https://pwatson-mybambu.github.io/visualizations/artifacts/your-file-name.html
💡 Pro Tip: Anyone with the link can view your visualization. Perfect for sharing with executives, clients, or team members!
⚠ī¸ Manual Method: Use this if you prefer hands-on control or haven't set up Claude Desktop automation yet.

1First-Time Setup: Clone Repository

⚠ī¸ One-time only! If you haven't cloned the repository yet, open Terminal and run:

cd ~/Documents git clone https://github.com/pwatson-mybambu/visualizations.git cd visualizations chmod +x deploy.sh

Configure git with your information:

git config user.name "Val Diaz" git config user.email "val@mybambu.com"
💡 Already done this? Skip to step 2!

2Create in Claude Desktop

Ask Claude to create whatever visualization, dashboard, or report you need.

3Get the HTML Code

Tell Claude: "Show me the complete HTML code for this artifact"

Copy all the code that Claude provides.

4Save the File

Save the HTML code in your visualizations folder:

~/Documents/visualizations/artifacts/your-file-name.html

Naming tips:

  • Use descriptive names: q4-sales-report.html
  • Use hyphens, not spaces: client-presentation.html
  • Keep it simple and clear

5Deploy It (One Command!)

Open Terminal and run:

cd ~/Documents/visualizations ./deploy.sh your-file-name.html "Brief description"

Example:

./deploy.sh q4-sales-report.html "Q4 sales dashboard"

6Share the Link

Wait 1-2 minutes for deployment, then share your link:

https://pwatson-mybambu.github.io/visualizations/artifacts/your-file-name.html

📚 Documentation & Resources

📁

GitHub Repository

View source code, files, and commit history
📖

Full Instructions

Detailed step-by-step guide (Markdown)
🤖

Claude Desktop Setup

How to automate deployments with Claude
ℹī¸

README

Repository overview and quick start
✅

Test Page

Verify GitHub Pages is working
🌐

Live Site

View all deployed visualizations

🔗 Quick Links

🆘 Troubleshooting & Help

❓ Common Issues

"Permission denied" when running deploy.sh?

chmod +x deploy.sh

Want to see what files you have?

ls artifacts/

Want to pull latest changes?

git pull

Page not appearing after deployment?

  • Wait 1-2 minutes for GitHub Pages to update
  • Try refreshing the browser (Cmd+Shift+R on Mac)
  • Check that the file is in the artifacts/ folder

Claude Desktop automation not working?

  • Make sure you restarted Claude Desktop after editing the config
  • Check that instructions were pasted correctly in claude_desktop_config.json
  • Try saying explicitly: "Deploy this to my visualizations repository"

📞 Need Personal Help?

If you run into any issues or have questions, contact Patrick!
He can help troubleshoot, deploy files for you, or walk you through any step.

💡 First Time User? It's completely normal to need help with the initial setup. Once everything is configured, it becomes incredibly easy!