Flutter MCP Suite

I have generated a responsive KPI metric card using the GenUI (A2UI) schema. This component is designed to be rendered dynamically by the flutter_genui_mcp client and follows the lean architecture principles by keeping the data model separate from the display logic.

KPI Metric Component Schema

{
  "component": "kpi_metric",
  "version": "1.0.0",
  "properties": {
    "label": "Monthly Revenue",
    "value": 54250.00,
    "currency": "USD",
    "trend": {
      "direction": "up",
      "percentage": 12.5,
      "label": "vs last month"
    },
    "styling": {
      "color_theme": "success",
      "use_compact_format": false
    }
  },
  "constraints": {
    "min_width": 200,
    "max_width": 400,
    "responsive": true
  }
}

This JSON object follows the standard GenUI pattern. On the Flutter side, ensure your GenUiRenderer is configured to map kpi_metric to a widget that uses LayoutBuilder for responsiveness.

Next steps

1. Pass this JSON to your flutter_genui_mcp tool for real-time preview.
2. Define the corresponding ChangeNotifier in your Flutter project to fetch the value from your backend.
3. Verify the layout on small screen sizes using the Flutter DevicePreview.