BestYou Coach Widgets
Render BestYou MCP tool responses as rich visual cards using OpenClaw's canvas.
First-Time Setup
Before calling any tools, check that mcporter is installed and the BestYou server is configured:
mcporter --config ~/.openclaw/workspace/config/mcporter.json list
- If
mcporteris not found:npm install -g mcporter - If
bestyouis not listed: walk the user through setup. Seereferences/setup.mdfor the full guide.
Setup summary:
- User generates an API key in BestYou iOS (More → Connected Apps → OpenClaw)
- Create
config/mcporter.jsonwith the key in the Authorization Bearer header (seereferences/setup.mdfor the exact JSON format) - Restart the OpenClaw gateway
Calling Tools via mcporter
All tools use this syntax:
mcporter --config config/mcporter.json call bestyou.<tool_name> [param=value ...]
If a custom config path is needed (e.g. calling from outside the workspace), use the full path:
mcporter --config ~/.openclaw/workspace/config/mcporter.json call bestyou.<tool_name> [param=value ...]
Examples:
mcporter call bestyou.get_account_link_status
mcporter call bestyou.get_daily_briefing date=2026-03-15
mcporter call bestyou.get_todays_action_plan date=2026-03-15
mcporter call bestyou.get_progress_snapshot date=2026-03-15
mcporter call bestyou.get_weekly_summary weekEndDate=2026-03-15
mcporter call bestyou.generate_workout type=strength duration=20 equipment=bodyweight experienceLevel=Intermediate goal="General strength"
mcporter call bestyou.analyze_meal_text description="chicken burrito bowl" timestamp=2026-03-15T12:30:00-06:00
If a custom mcporter config path is needed, add --config <path>.
Tool-to-Template Map
| MCP Tool | Template | Description |
|---|---|---|
get_account_link_status | assets/account-status.html | Connection status, scopes |
get_daily_briefing | assets/daily-briefing.html | Readiness, insights, priorities |
get_todays_action_plan | assets/action-plan.html | Timeline of today's blocks |
get_progress_snapshot | assets/progress-snapshot.html | Domain scores, recommendations |
get_weekly_summary | assets/weekly-summary.html | Weekly scores, trends, goals |
analyze_meal_text | assets/meal-analysis.html | Macro breakdown, components |
generate_workout | assets/workout.html | Exercise cards with images |
Rendering Workflow
- Call the BestYou MCP tool via mcporter
- Read the matching template from
assets/ - Replace the sample data in the HTML with the actual API response values (see data mapping below)
- Inline the CSS: copy the contents of
assets/shared.cssinto a<style>tag in the HTML<head>so the output is self-contained - Present the populated HTML via
canvas(action="present")orcanvas(action="a2ui_push") - Provide a brief text summary alongside the visual
Design System
All templates use the BestYou Dark Glass design system (assets/shared.css):
- Background:
#0a0a0a, cards:#141414, borders:#1e1e1e - Font: Inter (Google Fonts)
- Color coding: green (
#4ade80) = good, yellow (#facc15) = moderate, orange (#fb923c) = warning, red (#f87171) = poor - Score thresholds: ≥70 green, 40-69 yellow/orange, <40 red
Handling Missing Data
API responses may contain null or missing fields. Rules:
- If a score field is null, hide the gauge/bar or show "—" instead of a number
- If an array is empty or missing, omit that section entirely (don't render empty containers)
- If
totalCaloriesorcalorieGoalis null, omit the calorie summary row - Never show "null" or "undefined" in rendered HTML
Data Mapping by Template
Daily Briefing
API response structure (nested):
| API Path | Template Element | Notes |
|---|---|---|
headline | .headline text | |
readinessScore | .gauge-value + SVG stroke-dashoffset | Formula: 314 - (314 * score / 100) |
dayType | .day-type .value | Capitalize, add emoji: recovery=🔄, active=💪, rest=😴 |
yesterday.highlights[] | .insight-card blocks | Positive insights (icon, title, description) |
yesterday.areas[] | .insight-card blocks | Negative/improvement insights, render after highlights |
today.priorities[] | .action-item blocks | Numbered, with title and description |
today.plans[] | .plan-tag blocks | Emoji, plan name, week/day info |
insightCards[] | Cross-domain section | Filter for domain: "multi" entries, render as cross-domain insight cards |
Action Plan
| API Path | Template Element | Notes |
|---|---|---|
readiness.score | .readiness-score + badge | |
readiness.dayType | .rm-type | |
blocks[] | .block-card items | Group by timePeriod: morning/afternoon/evening |
Block icon mapping by blockType:
wakeUp→ 😴 (recovery icon bg)breakfast→ 🍳 (nutrition icon bg)lunch→ 🥗 (nutrition icon bg)snack→ 🥤 (nutrition icon bg, or 🥑 for second snack)dinner→ 🍽️ (nutrition icon bg)workout/cardio/strength→ 🏃 (fitness icon bg)goToBed→ 🌙 (recovery icon bg)
Block status: completed → ✅, upcoming or pending → ⬜
Progress Snapshot
| API Path | Template Element | Notes |
|---|---|---|
domains[] | .domain-card grid | Each: name, score, color-coded mini bar |
insights[] | .insight-item cards | With severity badge (high=red, medium=orange, low=blue) |
recommendations[] | .rec-item cards | With actionSteps[] as list items |
crossDomainPatterns[] | .cross-domain cards | With domain badges |
Weekly Summary
| API Path | Template Element | Notes |
|---|---|---|
overallScore | Gauge SVG + label | |
domains[] | .domain-section blocks | Each: trend badge (improving/declining/stable), stats, insight |
achievements[] | .achievement cards | Emoji + title + description |
nextWeekFocus[] | .next-week-goal items | With priority badge |
Meal Analysis
| API Path | Template Element | Notes |
|---|---|---|
mealName | .meal-name | |
calories | .meal-cal | |
protein_g, fat_g, carbs_g, fiber_g | Macro bar segments + legend | Flex ratios = gram values |
components[] | .component rows | Name, amount, calories, per-component macros |
insights[] | .insight-row items | .positive or .negative indicator bar |
dailyTotals | .daily-totals section | Calories, protein, fat, carbs |
Workout
| API Path | Template Element | Notes |
|---|---|---|
sessionName | Header h1 | |
duration, equipment, level | Header .meta spans | |
blocks[] | .block sections | Phase badge: warmup=green, main=orange, cooldown=blue |
Each exercise within a block:
imageUrl→<img>src (CDN:cdn.bestyou.ai)name→h3sets,reps,weight,rpe,rest→.rx-pillspansnotes→.exercise-notestargetMuscle,exerciseType→.exercise-cues
Conversation Patterns
Morning check-in
User: "What's my day look like?" or "Morning briefing"
get_account_link_status→ verify connectedget_daily_briefing→ render briefing widgetget_todays_action_plan→ render action plan widget- Summarize: readiness score, day type, top priority
Progress check
User: "How am I doing?" or "Show my progress"
get_progress_snapshot→ render snapshot widget- Highlight strongest and weakest domains, top recommendation
Meal logging
User: "I just had [food description]"
analyze_meal_textwith the description → render meal widget- Note protein hit vs target, suggest next meal bias
Workout request
User: "Give me a workout" or "[duration] [type] workout"
generate_workoutwith parameters → render workout widget- Brief summary: duration, focus, number of exercises
Weekly review
User: "Weekly summary" or "How was my week?"
get_weekly_summary→ render weekly widget- Highlight trends (improving/declining), top achievement, next week focus
Text Summary Style
Keep text summaries alongside widgets brief and actionable:
- Lead with the key number (readiness score, calories, overall score)
- One sentence on what's going well
- One sentence on the top action item
- No need to repeat everything the widget shows visually