# 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

```json
{
  "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