clawdbot-workspace/mcp-diagrams/mcp-animation-framework

MCP Animation Framework

Generate chat UI animation frames for MCP marketing assets.

Usage

1. Create a config in configs/ (see configs/example.json)
2. Run generator: node generate.js configs/your-config.json
3. Frames output to output/{config-name}/

Config Format

{
  "name": "servicetitan-dispatch",
  "title": "AI Assistant",
  "userPrompt": "Show me today's dispatch schedule and help me optimize routes",
  "aiResponse": "Here's your optimized dispatch overview:",
  "panels": [
    {
      "type": "list",
      "icon": "ST",
      "iconColor": "#f97316",
      "title": "ServiceTitan",
      "items": [...]
    }
  ]
}

Panel Types

• list — contact/item list with status badges
• chat — mini chat preview
• stats — key metrics with comparison
• chart — donut/progress chart
• table — data table
• map — route/location preview

Frames Generated

1. Empty chat
2. User typing
3. First exchange
4. AI typing
5. Loading panels
6. Full loaded