Co-Designing UI with AI: Building a Flutter Frontend for an Agent SDK

When you need to build a frontend for a backend framework you have never touched, writing code blindly is a recipe for broken streams and wasted hours. Here is how to use an iterative AI workflow to learn an unfamiliar SDK while generating production-ready UI code.

What you'll learn

• How to structure modular AI "skills" to guide code generation step-by-step.
• Why splitting architecture, design, and implementation into separate phases prevents hallucinations.
• How to handle streaming Server-Sent Events (SSE) without fragmenting your UI list view.
• Practical error recovery loops for AI-assisted development.

1. Structuring the AI Workflow into Phases

Instead of asking an AI agent to build an entire app in a single prompt, break the task down. Monolithic prompts lead to messy code because the agent lacks context on your domain rules.

Create a modular skill file that forces the agent to write markdown notes before touching any application code. This gives you a chance to inspect its assumptions.

# SKILL.md: Frontend Generation Workflow

1. **Discovery**: Analyze backend source code and generate `AGENT_INTERFACE_NOTES.md`.
2. **Usage**: Define user interaction patterns in `FRONTEND_USAGE_NOTES.md`.
3. **Architecture**: Outline services, state management, and models in `FRONTEND_ARCHITECTURE_NOTES.md`.
4. **Design**: Establish themes, layout constraints, and visual specs in `FRONTEND_DESIGN_NOTES.md`.
5. **Implementation**: Generate the actual client code based on the approved notes.

Senior Dev Tip: Always add a mandatory manual review step between phases. If you let the agent run continuously, it will compound its own early misunderstandings.

2. Setting Up the Learning Loop

The key to learning an unfamiliar framework while using AI is the loop. You run the agent, review the output, identify what went wrong, update your instructions, wipe the slate clean, and run it again.

Here is the exact prompt structure to kick off a clean generation run without bleeding context from previous failures:

// Example runner script or prompt sent to your coding agent
const prompt = `
This codebase includes an agent backend, but no frontend client. 
Please read the instructions in flutter-frontend-for-adk/SKILL.md and follow the workflow sequentially. 
Do not examine git history, do not reference past conversations, and do not modify git branches.
`;

// Run this in a fresh agent conversation loop
console.log("Executing agent workflow...");

Speed Note: Don't try to fix the generated code directly in the first few iterations. Wiping out the lib/ directory and rewriting your skill instructions forces the AI to learn the correct pattern for future runs.

3. Aggregating Streaming Events in State Management

Backend agents often stream responses chunk by chunk using SSE. If your Flutter client treats every raw network event as a new message bubble, your UI will render dozens of fragmented, half-rendered markdown blocks.

You need to accumulate streaming text inside your state provider before pushing it to the UI tree.

// AgentProvider.dart - Accumulating partial chunks correctly
class AgentProvider extends ChangeNotifier {
  String? _activeStreamingAuthor;
  final StringBuffer _buffer = StringBuffer();
  final List<ChatMessage> messages = [];

  void handleIncomingEvent(AgentEvent event) {
    if (event.isPartial && event.contentText != null) {
      // Accumulate streaming text instead of creating a new message
      _activeStreamingAuthor = event.author;
      _buffer.write(event.contentText);
      notifyListeners();
    } else {
      // Finalize the stream chunk into a permanent message
      if (_buffer.isNotEmpty) {
        messages.add(ChatMessage(
          author: _activeStreamingAuthor ?? 'Agent',
          text: _buffer.toString(),
        ));
        _buffer.clear();
        _activeStreamingAuthor = null;
      }
      messages.add(ChatMessage(author: event.author, text: event.contentText ?? ''));
      notifyListeners();
    }
  }
}

Gotcha: Watch out for multi-platform constraints. If you test on web and desktop, avoid importing dart:io for networking headers. Stick to package-agnostic HTTP clients like package:http.

4. Rendering Markdown Streams Safely

Streaming markdown requires careful handling. If you pass raw, half-finished strings directly to a markdown parser on every tick, the UI will throw layout exceptions while parsing unclosed bold tags or code blocks.

Combine your aggregated string buffer with a robust widget renderer like flutter_markdown.

// ChatMessageView.dart - Safe markdown rendering for chat lists
import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';

class ChatMessageView extends StatelessWidget {
  final String text;
  const ChatMessageView({Key? key, required this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
      child: MarkdownBody(
        data: text,
        selectable: true,
        // Prevent layout crashes on incomplete streaming markdown tags
        fitContent: true,
      ),
    );
  }
}

Accessibility Note: Ensure your chat list view automatically scrolls to the bottom when new aggregated chunks arrive, but allow users to scroll up freely without being yanked back down by incoming tokens.

Summary & Next Steps

Using an AI coding partner to build software in unfamiliar domains only works if you treat the AI as an executor and yourself as the architect. By codifying what you learn into reusable markdown notes, you build both the client application and your own domain expertise simultaneously.

• Next Steps:
  • Define your backend interface notes before writing a single line of UI code.
  • Implement a manual pause mechanism between your agent's architectural and implementation phases.
  • Test your streaming event accumulators with deliberately throttled network payloads.