leo-claude-mktplace/plugins/viz-platform/commands/initial-setup.md

description

description
Interactive setup wizard for viz-platform plugin - configures MCP server and theme preferences

Viz-Platform Setup Wizard

This command sets up the viz-platform plugin with Dash Mantine Components validation and theming.

Important Context

• This command uses Bash, Read, Write, and AskUserQuestion tools - NOT MCP tools
• MCP tools won't work until after setup + session restart
• DMC version detection is automatic based on installed package

---

Phase 1: Environment Validation

Step 1.1: Check Python Version

python3 --version

Requires Python 3.10+. If below, stop setup and inform user.

Step 1.2: Check DMC Installation

python3 -c "import dash_mantine_components as dmc; print(f'DMC {dmc.__version__}')" 2>/dev/null || echo "DMC_NOT_INSTALLED"

If DMC is not installed, inform user:

Dash Mantine Components is not installed. Install it with:
  pip install dash-mantine-components>=0.14.0

---

Phase 2: MCP Server Setup

Step 2.1: Locate Viz-Platform MCP Server

# If running from installed marketplace
ls -la ~/.claude/plugins/marketplaces/leo-claude-mktplace/mcp-servers/viz-platform/ 2>/dev/null || echo "NOT_FOUND_INSTALLED"

# If running from source
ls -la ~/claude-plugins-work/mcp-servers/viz-platform/ 2>/dev/null || echo "NOT_FOUND_SOURCE"

Step 2.2: Check Virtual Environment

ls -la /path/to/mcp-servers/viz-platform/.venv/bin/python 2>/dev/null && echo "VENV_EXISTS" || echo "VENV_MISSING"

Step 2.3: Create Virtual Environment (if missing)

cd /path/to/mcp-servers/viz-platform && python3 -m venv .venv && source .venv/bin/activate && pip install --upgrade pip && pip install -r requirements.txt && deactivate

---

Phase 3: Theme Preferences (Optional)

Step 3.1: Ask About Theme Setup

Use AskUserQuestion:

• Question: "Do you want to configure a default theme for your projects?"
• Header: "Theme"
• Options:
  • "Yes, set up a custom theme"
  • "No, use Mantine defaults"

If user chooses "No": Skip to Phase 4.

Step 3.2: Choose Base Theme

Use AskUserQuestion:

• Question: "Which base color scheme do you prefer?"
• Header: "Colors"
• Options:
  • "Light mode (default)"
  • "Dark mode"
  • "System preference (auto)"

Step 3.3: Choose Primary Color

Use AskUserQuestion:

• Question: "What primary color should be used for buttons and accents?"
• Header: "Primary"
• Options:
  • "Blue (default)"
  • "Indigo"
  • "Violet"
  • "Other (I'll specify)"

Step 3.4: Create System Theme Config

mkdir -p ~/.config/claude
cat > ~/.config/claude/viz-platform.env << 'EOF'
# Viz-Platform Configuration
# Generated by viz-platform /initial-setup

VIZ_PLATFORM_COLOR_SCHEME=<SELECTED_SCHEME>
VIZ_PLATFORM_PRIMARY_COLOR=<SELECTED_COLOR>
EOF
chmod 600 ~/.config/claude/viz-platform.env

---

Phase 4: Validation

Step 4.1: Verify MCP Server

cd /path/to/mcp-servers/viz-platform && .venv/bin/python -c "from mcp_server.server import VizPlatformMCPServer; print('MCP Server OK')"

Step 4.2: Summary

╔════════════════════════════════════════════════════════════╗
║            VIZ-PLATFORM SETUP COMPLETE                     ║
╠════════════════════════════════════════════════════════════╣
║ MCP Server:        ✓ Ready                                 ║
║ DMC Version:       [Detected version]                      ║
║ DMC Tools:         ✓ Available (3 tools)                   ║
║ Chart Tools:       ✓ Available (2 tools)                   ║
║ Layout Tools:      ✓ Available (5 tools)                   ║
║ Theme Tools:       ✓ Available (6 tools)                   ║
║ Page Tools:        ✓ Available (5 tools)                   ║
╚════════════════════════════════════════════════════════════╝

Step 4.3: Session Restart Notice

---

⚠️ Session Restart Required

Restart your Claude Code session for MCP tools to become available.

After restart, you can:

• Run /component {name} to inspect component props
• Run /chart {type} to create a chart
• Run /dashboard {template} to create a dashboard layout
• Run /theme {name} to apply a theme
• Run /theme-new {name} to create a custom theme

---

Tool Summary

Category	Tools
DMC Validation	list_components, get_component_props, validate_component
Charts	chart_create, chart_configure_interaction
Layouts	layout_create, layout_add_filter, layout_set_grid, layout_get, layout_add_section
Themes	theme_create, theme_extend, theme_validate, theme_export_css, theme_list, theme_activate
Pages	page_create, page_add_navbar, page_set_auth, page_list, page_get_app_config