48 lines
1008 B
Markdown
48 lines
1008 B
Markdown
# 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
|