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.
This repository is structured around a hands-on workshop. Pick a branch based on what you want to do:
| Branch | What's in it | When to use it |
|---|---|---|
main |
A minimal version of the app with the core multi-agent workflow only. Activity-page agents, text-to-speech, Wikipedia RAG, OpenTelemetry, and the art-style picker are deliberately left out. | The workshop starting point. Clone this branch and use GitHub Copilot (and the Copilot CLI) to build the additional features yourself by following the Guides below. |
all-features |
The fully-built reference application with every feature from every guide already implemented. | When you want to see the finished product, run a polished demo, or compare your workshop output against a working reference. |
Either branch can be deployed to Azure with a single azd up — see Deploying to Azure.
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) ──────────────────┘
- Get running locally in minutes — Local Quickstart
- (Deeper dive) Prerequisites & Setup — Prerequisites & Environment Setup
- Understand the architecture — Architecture Overview
- Walk through the demo flow — Running the Demo
- Deploy to Azure — Deploying to Azure
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.
| Document | Description |
|---|---|
| Local Quickstart | The shortest path to running the app locally |
| 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 |
| Deploying to Azure | One-command azd up deploy to Azure Container Apps, including optional Microsoft Entra sign-in |
This project is provided as an example for demonstration and experimentation purposes.