TOYBOX

You can publish Claude Desktop artifacts to a personal GitHub Pages portfolio with zero setup using the Toybox MCP Server. It provides a quick, zero-friction way to turn your artifacts into a professional, live portfolio you control through simple conversational commands.

How to use

You interact with the Toybox MCP Server through Claude Desktop to initialize a TOYBOX, publish artifacts, and manage your collection. Start by initializing a new TOYBOX to create a dedicated repository and GitHub Pages site. Then publish each artifact from Claude Desktop and you’ll receive a live URL for your portfolio. You can also adjust your portfolio’s appearance and organization over time.

Practical usage patterns you can follow:

• Initialize your TOYBOX to set up a new repository and enable GitHub Pages.
• Publish each artifact to your TOYBOX to automatically commit, push, and generate a live URL.
• Manage your collection by listing artifacts, updating the theme, or changing the title and layout to fit your branding.

How to install

Prerequisites you must have before installing:
- A GitHub account created at github.com
- GitHub CLI installed from cli.github.com
- Authentication completed with gh auth login following the browser flow
- Node.js and npm installed on your machine (Node.js provides npm) so you can run npx commands.

Step-by-step setup and configuration:
1) Ensure Node and npm are installed and available in your terminal

node -v npm -v

2) Create or edit your Claude Desktop MCP configuration file depending on your OS
- macOS: `~/Library/Application Support/Claude/claude_desktop_config.json`
- Windows: `%APPDATA%\\Claude\\claude_desktop_config.json`
3) Add the MCP server configuration for Toybox using npx to fetch the server package

{ "mcpServers": { "toybox": { "command": "npx", "args": ["@isnbh0/toybox-mcp-server@latest"] } } }

4) For production use, pin to a specific version

{ "mcpServers": { "toybox": { "command": "npx", "args": ["@isnbh0/toybox-mcp-server@1.0.0"] } } }

5) Initialize TOYBOX from Claude Desktop using the following conversational command

"I want to create a TOYBOX for my projects"

Claude will check GitHub authentication, create a repository from the TOYBOX template, enable GitHub Pages, and set up the local development environment.

Configuration

Configure your TOYBOX to tailor the portfolio to your branding and preferences. You can set the title, description, theme, layout, and whether to show the footer.

Configuration details and options

• Title: Display name for your portfolio
• Description: Subtitle text
• Theme: auto, light, or dark
• Layout: grid or list view
• Footer: Show/hide footer section

Troubleshooting

Authentication Issues

gh auth login```
Build Failures
- Ensure your artifact code is valid React/TypeScript
- Check for syntax errors or missing imports
- Verify all dependencies are available
Repository Not Found
- Make sure you've run the initialization step first
- Check that the repository exists on GitHub
- Verify GitHub Pages is enabled

## Notes

This setup uses a zero-friction approach via npx to fetch and run the Toybox MCP Server, enabling quick publishing of Claude artifacts to a professional portfolio. You can adjust themes and layouts to match your branding and ensure your portfolio remains mobile-friendly.

## Tools you can use with Toybox MCP Server

The server exposes a set of actions to manage your TOYBOX. These include initializing a new TOYBOX, publishing artifacts, listing published artifacts, and updating configuration.

## Available tools

### initialize\_toybox

Set up a new TOYBOX repository for your projects within Claude Desktop.

### publish\_artifact

Publish an artifact from Claude Desktop to your TOYBOX, generating a unique ID and pushing changes to GitHub.

### list\_artifacts

List all artifacts that have been published to your TOYBOX collection.

### update\_config

Modify TOYBOX settings such as title, description, theme, layout, and footer visibility.