Creates and manages repositories for storing and versioning artifacts published from Claude Desktop.
Automatically deploys published artifacts to a personal portfolio website with customizable themes and layouts.
Supports React-based artifacts that can be published to the portfolio site.
Supports TypeScript-based artifacts that can be published to the portfolio site.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@TOYBOX MCP ServerPublish this code snippet to my TOYBOX"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
TOYBOX MCP Server
Zero-friction publishing platform for Claude artifacts via Model Context Protocol (MCP).
Overview
TOYBOX MCP Server enables Claude Desktop users to publish their artifacts to a personal GitHub Pages portfolio site through simple conversational commands. No technical knowledge required!
Related MCP server: GitHub MCP Tools
Features
π Zero-friction setup: Initialize your TOYBOX with one command
π¦ Instant publishing: Publish artifacts directly from Claude Desktop
π¨ Professional presentation: Automated portfolio site with responsive design
π§ Customizable: Configure themes, layouts, and branding
π± Mobile-friendly: Works perfectly on all devices
π Secure: All code validation and safe deployment practices
Prerequisites
GitHub Account: Create one at github.com
GitHub CLI: Install from cli.github.com
Authentication: Run
gh auth loginand follow the browser flow
Installation
No installation required! TOYBOX uses npx for zero-friction setup.
Configuration
Add to your Claude Desktop configuration file:
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\\Claude\\claude_desktop_config.json
{
"mcpServers": {
"toybox": {
"command": "npx",
"args": ["@isnbh0/toybox-mcp-server@latest"]
}
}
}For production use, pin to a specific version:
{
"mcpServers": {
"toybox": {
"command": "npx",
"args": ["@isnbh0/toybox-mcp-server@1.0.0"]
}
}
}Usage
1. Initialize Your TOYBOX
In Claude Desktop:
"I want to create a TOYBOX for my projects"Claude will:
Check your GitHub authentication
Create a repository from the TOYBOX template
Enable GitHub Pages
Set up local development environment
2. Publish Artifacts
Create any artifact in Claude Desktop, then:
"Publish this to my TOYBOX"Claude will:
Generate a unique ID for your artifact
Commit and push to GitHub
Provide the live URL
3. Manage Your Collection
"Show me all my TOYBOX projects"
"Update my TOYBOX theme to dark mode"
"Change my TOYBOX title to 'My Creative Projects'"Available Commands
Command | Description |
| Set up a new TOYBOX repository |
| Publish an artifact to your TOYBOX |
| Show all published artifacts |
| Modify TOYBOX settings |
Configuration Options
Title: Display name for your portfolio
Description: Subtitle text
Theme:
auto,light, ordarkLayout:
gridorlistviewFooter: Show/hide footer section
Repository Structure
When initialized, your TOYBOX repository contains:
toybox/
βββ src/artifacts/ # Your published artifacts
βββ TOYBOX_CONFIG.json # Site configuration
βββ (template files...) # React app infrastructureTroubleshooting
Authentication Issues
gh auth status # Check authentication
gh auth login # Re-authenticate if neededBuild 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
initialize_toyboxfirstCheck that the repository exists on GitHub
Verify GitHub Pages is enabled
Contributing
This project is part of the TOYBOX ecosystem. See the main repository for contribution guidelines.
License
MIT License - see LICENSE file for details.