Children's Story Studio is a full-stack application that uses Microsoft Agent Framework to orchestrate multiple AI agents that collaboratively generate illustrated children's stories. It is designed to serve two purposes:
- Multi-Agent Orchestration Example — A real-world reference implementation showing how to build agent workflows with Microsoft Agent Framework, including conditional branching, revision loops, and real-time progress streaming.
- Engineering Sandbox — A well-structured starting point that engineers can clone, experiment with, and extend with new agents and multi-modal AI capabilities.
A user fills in story details (characters, setting, moral, etc.) and the application orchestrates five specialized AI agents through a coordinated workflow to produce a fully illustrated children's storybook — complete with cover art, per-page illustrations, and narrative text — all streamed to the browser in real time.
Orchestrator → StoryArchitect → ArtDirector → StoryReviewer → Decision
↑ │
└──────────── RevisionSignal (max 2 rounds) ──────────────────┘
- Set up prerequisites — Prerequisites & Environment Setup
- Understand the architecture — Architecture Overview
- Run the demo — Running the Demo
These step-by-step walkthroughs guide you through extending the base application with new capabilities using GitHub Copilot. Each guide demonstrates a different pattern for expanding multi-agent workflows and integrating additional AI modalities.
| Guide | What You'll Build | Key Concepts |
|---|---|---|
| Adding Activity Page Agents | Look & Find activity page + Character Glossary page appended to the storybook | Fan-out / fan-in agent patterns, new agent creation, conditional workflow paths, UI extensions |
| Adding Text-to-Speech | Play button on each page that streams Azure AI Speech narration | Multi-modal AI (text → speech), new API endpoints, streaming audio, DefaultAzureCredential |
| Adding Wikipedia RAG | Wikipedia-powered story generation with Full and Influence modes | Retrieval-Augmented Generation (RAG), external API integration, prompt enrichment, dynamic UI modes |
| Adding OTEL Observability (AI Toolkit) | Distributed tracing across all agents, viewable in VS Code via AI Toolkit | OpenTelemetry, distributed tracing, AI Toolkit trace viewer, prompt inspection |
| Adding OTEL Observability (Aspire) | Distributed tracing across all agents, viewable in the Aspire Dashboard | OpenTelemetry, distributed tracing, OTLP export, .NET Aspire Dashboard, Application Insights |
Approach: Each guide walks you through using GitHub Copilot in Plan mode (with Claude Opus, or your preferred model) to design the implementation, then Agent mode (with Claude Sonnet, or your preferred model) to execute it. The goal is to experience how an AI engineer would use Copilot to extend an existing agent-based application.
The following branches contain working implementations of the guided extensions. They exist as backup references — the intended workflow is to generate these features yourself using GitHub Copilot by following the guides above.
| Branch | Description |
|---|---|
activity-page-agents |
Look & Find + Character Glossary agents added to the workflow |
story-tts |
Text-to-Speech narration on every story page |
wikipedia-rag |
Wikipedia-powered story generation with Full and Influence modes |
activity-page-agents-and-tts |
All features combined (activity pages + TTS) |
| Document | Description |
|---|---|
| Prerequisites & Environment Setup | Tools, Azure resources, environment configuration, and local setup |
| Architecture Overview | System design, agent descriptions, workflow graph, SSE streaming, and data flow |
| Running the Demo | Step-by-step instructions for running the app and demo talking points |
| Guide: Activity Page Agents | Extend the workflow with Look & Find and Character Glossary agents |
| Guide: Text-to-Speech | Add Azure AI Speech narration to every story page |
| Guide: Wikipedia RAG | Add Wikipedia-powered story generation with retrieval-augmented context |
| Guide: OTEL Observability (AI Toolkit) | Add OpenTelemetry tracing viewable in VS Code via AI Toolkit |
| Guide: OTEL Observability (Aspire) | Add OpenTelemetry tracing viewable in the .NET Aspire Dashboard |
This project is provided as an example for demonstration and experimentation purposes.