Claude Marketplace UI

A command-line tool and web interface for visualizing and building Claude Code plugin marketplaces. Browse plugins, commands, agents, skills, and visualize dependency graphs with an interactive UI.

Installation

# Install globally
npm install -g claude-marketplace-ui

# Or use with npx (no installation)
npx claude-marketplace-ui

Quick Start

# Start development server for current directory
claude-marketplace-ui dev

# Start dev server for specific marketplace
claude-marketplace-ui dev --path ./my-marketplace

# Build static site for GitHub Pages
claude-marketplace-ui build --path ./my-marketplace --output ./docs

Features

• ✅ Self-contained - No dependencies needed on user's machine
• ✅ Fast startup - Pre-built standalone server included
• ✅ GitHub support - Clone and serve repositories directly
• ✅ Static export - Generate GitHub Pages-ready sites
• ✅ Interactive UI - Browse plugins, commands, agents, skills
• ✅ Dependency graphs - Visualize plugin relationships
• ✅ Markdown support - Full GitHub Flavored Markdown rendering
• ✅ Dark mode - Full dark mode compatibility

Commands

dev - Development Server

Start an interactive web server to browse your marketplace.

claude-marketplace-ui dev [options]

Options:

• -p, --path <path> - Path to marketplace directory or GitHub URL (default: .)
• --port <port> - Port to run server on (default: 3000)

Examples:

# Serve current directory
claude-marketplace-ui dev

# Serve specific directory
claude-marketplace-ui dev --path ./plugins

# Use custom port
claude-marketplace-ui dev --port 8080

# Clone and serve GitHub repository
claude-marketplace-ui dev --path https://github.com/user/marketplace

build - Static Export

Build a static website for deployment to GitHub Pages or other hosting.

claude-marketplace-ui build [options]

Options:

• -p, --path <path> - Path to marketplace directory or GitHub URL (default: .)
• -o, --output <dir> - Output directory (default: ./out)
• -b, --base-path <path> - Base path for deployment (e.g., /repo-name)

Examples:

# Build to default output directory
claude-marketplace-ui build

# Build to custom directory
claude-marketplace-ui build --output ./docs

# Build with base path for GitHub Pages subdirectory
claude-marketplace-ui build --base-path /my-marketplace

# Build from GitHub repository
claude-marketplace-ui build --path https://github.com/user/marketplace

Marketplace Structure

Your marketplace directory should follow this structure:

.
├── .claude-plugin/
│   └── marketplace.json          # Marketplace configuration
└── plugins/
    └── plugin-name/
        ├── .claude-plugin/
        │   └── plugin.json        # Plugin metadata
        ├── commands/
        │   └── command.md         # Slash commands
        ├── agents/
        │   └── agent.md           # Agents
        ├── skills/
        │   └── skill-name/
        │       └── SKILL.md       # Skills
        ├── hooks.json             # Hook configurations (optional)
        └── mcp.json               # MCP server configs (optional)

Marketplace Schema

Located at .claude-plugin/marketplace.json:

{
  "name": "marketplace-name",
  "owner": {
    "name": "Owner Name",
    "url": "https://github.com/owner"
  },
  "metadata": {
    "description": "Description",
    "version": "1.0.0"
  },
  "plugins": [
    {
      "name": "plugin-name",
      "source": "./plugins/plugin-name",
      "version": "1.0.0",
      "description": "Plugin description"
    }
  ]
}

Plugin Schema

Located at plugins/[name]/.claude-plugin/plugin.json:

{
  "name": "plugin-name",
  "version": "1.0.0",
  "description": "Plugin description",
  "commands": ["./commands/command.md"],
  "agents": ["./agents/agent.md"],
  "skills": ["./skills/skill-name"]
}

MCP Server Configuration

MCP servers can be configured inline in plugin.json or in a separate mcp.json file:

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "${GITHUB_TOKEN}"
      }
    },
    "notion": {
      "url": "https://mcp.notion.com/mcp"
    }
  }
}

Use ${CLAUDE_PLUGIN_ROOT} to reference paths relative to the plugin directory.

Deployment to GitHub Pages

Quick Setup

1. Build your static site:

   claude-marketplace-ui build --base-path /your-repo-name

2. Deploy the out/ directory to GitHub Pages using the included workflow

Automated Deployment

Use the example workflow at examples/workflows/deploy.yml:

name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npx claude-marketplace-ui build --base-path /${{ github.event.repository.name }}
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./out

Enable GitHub Pages in your repository settings and set the source to "GitHub Actions".

Technical Details

Architecture

• Dev Mode: Uses Next.js standalone output with forked server process
• Build Mode: Generates static HTML/CSS/JS for deployment
• Data Loading: Supports both local filesystem and GitHub repositories

Tech Stack

• Next.js 15 - React framework with App Router and static export
• React 19 - Latest React with React Compiler
• TypeScript - Type-safe development
• Tailwind CSS 4 - Modern utility-first CSS
• ReactFlow - Interactive graph visualization

Performance

• Package size: ~10-20MB (includes production Next.js server)
• Startup time: < 2 seconds for dev server
• Build time: ~10-30 seconds depending on marketplace size

Troubleshooting

Server won't start

If you see "Standalone server not found", try:

npm install -g claude-marketplace-ui --force

Port already in use

Change the port:

claude-marketplace-ui dev --port 3001

Build fails

Make sure your marketplace.json is valid:

# Check structure
ls .claude-plugin/marketplace.json

# Validate JSON
cat .claude-plugin/marketplace.json | jq .

Contributing

We welcome contributions! See CONTRIBUTING.md for development setup, architecture details, and guidelines.

Resources

• Claude Code Plugin Documentation
• Next.js Documentation
• Tailwind CSS
• ReactFlow

License

MIT