Agent skill

Implementing Chat Streaming

by microsoft-foundry in microsoft-foundry/foundry-agent-webapp

Provides SSE streaming patterns for the chat API and frontend.

MITAuto-check passedFrontend & Design

Install Implementing Chat Streaming

skills CLI
$ npx skills add microsoft-foundry/foundry-agent-webapp --skill implementing-chat-streaming -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install microsoft-foundry/foundry-agent-webapp implementing-chat-streaming --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/microsoft-foundry/foundry-agent-webapp.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.github/skills/implementing-chat-streaming .claude/skills/implementing-chat-streaming && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
implementing-chat-streaming
GitHub stars
127
Token cost
~1.9k tokens
SKILL.md length
269 words
Files
1
Skills in repo
19
Repo updated
First seen
Licence
MIT

At a glance

Provides SSE streaming patterns for the chat API and frontend.

  • Modifying chat streaming
  • SKILL.md covers Backend: SSE Endpoint, Backend: IAsyncEnumerable…, Frontend: Action Flow and Frontend: ChatService Pattern, plus 7 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Handling SSE events

What it does

Implementing Chat Streaming is an agent skill from microsoft-foundry/foundry-agent-webapp. Provides SSE streaming patterns for the chat API and frontend. Use when implementing or modifying chat streaming, handling SSE events, or troubleshooting message flow between frontend and backend.

Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design. The repository describes itself as: GitHub Copilot enabled repo for building and deploying a web application with Entra ID authentication and integrated with Azure AI Foundry Agents. The licence is MIT.

When your agent uses it

  • Modifying chat streaming
  • Handling SSE events
  • Troubleshooting message flow between frontend and backend

Example prompts

  • “Use the implementing-chat-streaming skill to provide SSE streaming patterns for the chat API and frontend”
  • “/implementing-chat-streaming”

What it can do on your machine

Read from SKILL.md and the folder at commit f6cb362. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are csharp).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Implementing Chat Streaming loads about 1.9k tokens when it runs. Until then it costs about 56 tokens; SKILL.md has 269 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~56
When it runs · the whole SKILL.md, loaded when a task matches
~1.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from microsoft-foundry/foundry-agent-webapp at commit f6cb362, republished under its MIT licence (© microsoft-foundry). 269 words, ~1,861 tokens.

Download SKILL.mdSave it as .claude/skills/implementing-chat-streaming/SKILL.md (or your agent's skills folder).
name
implementing-chat-streaming
description
Provides SSE streaming patterns for the chat API and frontend. Use when implementing or modifying chat streaming, handling SSE events, or troubleshooting message flow between frontend and backend.

Chat Streaming Implementation

Backend: SSE Endpoint

csharp
app.MapPost("/api/chat/stream", async (
    ChatRequest request,
    AgentFrameworkService agentService,
    HttpContext httpContext,
    CancellationToken cancellationToken) =>
{
    httpContext.Response.Headers.Append("Content-Type", "text/event-stream");
    httpContext.Response.Headers.Append("Cache-Control", "no-cache");
    
    var conversationId = request.ConversationId 
        ?? await agentService.CreateConversationAsync(request.Message, cancellationToken);
    
    // Send conversation ID first
    await httpContext.Response.WriteAsync(
        $"data: {{\"type\":\"conversationId\",\"conversationId\":\"{conversationId}\"}}\n\n", 
        cancellationToken);
    await httpContext.Response.Body.FlushAsync(cancellationToken);
    
    // Stream chunks
    await foreach (var chunk in agentService.StreamMessageAsync(
        conversationId, request.Message, request.ImageDataUris, cancellationToken))
    {
        var json = JsonSerializer.Serialize(new { type = "chunk", content = chunk });
        await httpContext.Response.WriteAsync($"data: {json}\n\n", cancellationToken);
        await httpContext.Response.Body.FlushAsync(cancellationToken);
    }
    
    await httpContext.Response.WriteAsync("data: {\"type\":\"done\"}\n\n", cancellationToken);
})
.RequireAuthorization("RequireChatScope");

Backend: IAsyncEnumerable Service

Actual return type: IAsyncEnumerable<StreamChunk> (not raw strings)

Why direct SDK? Uses ProjectResponsesClient directly because we need typed access to MCP approvals, file search quotes, and citation annotations. See .github/skills/researching-azure-ai-sdk/SKILL.md for full rationale.

csharp
public async IAsyncEnumerable<StreamChunk> StreamMessageAsync(
    string conversationId,
    string message,
    List<string>? imageDataUris = null,
    [EnumeratorCancellation] CancellationToken cancellationToken = default)
{
    ObjectDisposedException.ThrowIf(_disposed, this);
    
    // Stream response - yields StreamChunk with text deltas OR annotations
    await foreach (var update in responsesClient.CreateResponseStreamingAsync(...))
    {
        if (update is StreamingResponseOutputTextDeltaUpdate deltaUpdate)
        {
            yield return StreamChunk.Text(deltaUpdate.Delta);
        }
        else if (update is StreamingResponseOutputItemDoneUpdate itemDoneUpdate)
        {
            var annotations = ExtractAnnotations(itemDoneUpdate.Item, fileSearchQuotes);
            if (annotations.Count > 0)
            {
                yield return StreamChunk.WithAnnotations(annotations);
            }
        }
    }
}

StreamChunk model (backend/WebApp.Api/Models/StreamChunk.cs):

  • IsText / TextDelta - Text content
  • HasAnnotations / Annotations - Citation metadata

Frontend: Action Flow

text
CHAT_SEND_MESSAGE 
  → CHAT_ADD_ASSISTANT_MESSAGE 
  → CHAT_START_STREAM 
  → (repeat CHAT_STREAM_CHUNK) 
  → CHAT_STREAM_ANNOTATIONS (optional, for citations)
  → CHAT_STREAM_COMPLETE (with usage metrics)

If user cancels: CHAT_CANCEL_STREAM sets status to idle.

Frontend: ChatService Pattern

See: frontend/src/services/ChatService.ts

Key patterns:

  • AbortController for cancellation
  • EventSource or fetch with ReadableStream
  • Parse SSE data: lines
  • Dispatch actions for each event type

Image Validation

Backend limits (see AzureAIAgentService.cs):

  • Max 5 images per request
  • Max 5MB per image (decoded)
  • Allowed: image/png, image/jpeg, image/gif, image/webp

Frontend limits (see frontend/src/utils/fileAttachments.ts):

  • Same limits with user-friendly error messages
  • Toast notifications for validation feedback

Project-Specific: Full Endpoint Implementation

csharp
app.MapPost("/api/chat/stream", async (
    ChatRequest request,
    AgentFrameworkService agentService,
    HttpContext httpContext,
    IHostEnvironment env,
    CancellationToken cancellationToken) =>
{
    httpContext.Response.Headers.Append("Content-Type", "text/event-stream");
    httpContext.Response.Headers.Append("Cache-Control", "no-cache");
    
    var conversationId = request.ConversationId 
        ?? await agentService.CreateConversationAsync(request.Message, cancellationToken);
    
    await httpContext.Response.WriteAsync(
        $"data: {{\"type\":\"conversationId\",\"conversationId\":\"{conversationId}\"}}\n\n", 
        cancellationToken);
    await httpContext.Response.Body.FlushAsync(cancellationToken);
    
    await foreach (var chunk in agentService.StreamMessageAsync(
        conversationId, request.Message, request.ImageDataUris, cancellationToken))
    {
        var json = System.Text.Json.JsonSerializer.Serialize(new { type = "chunk", content = chunk });
        await httpContext.Response.WriteAsync($"data: {json}\n\n", cancellationToken);
        await httpContext.Response.Body.FlushAsync(cancellationToken);
    }
    
    await httpContext.Response.WriteAsync("data: {\"type\":\"done\"}\n\n", cancellationToken);
})
.RequireAuthorization("RequireChatScope")
.WithName("StreamChatMessage");

Project-Specific: Service Implementation

See: backend/WebApp.Api/Services/AgentFrameworkService.cs

Key patterns in StreamMessageAsync:

  • Disposal guard before processing
  • Multi-modal message support (text + image data URIs)
  • IAsyncEnumerable<StreamChunk> with [EnumeratorCancellation]
  • StreamingResponseOutputTextDeltaUpdate for text content
  • StreamingResponseOutputItemDoneUpdate for annotations
  • Collects file search quotes via FileSearchCallResponseItem for citation context
  • Usage captured from StreamingResponseCompletedUpdate

Project-Specific: Frontend State Flow

text
CHAT_SEND_MESSAGE 
  → CHAT_ADD_ASSISTANT_MESSAGE 
  → CHAT_START_STREAM 
  → (repeat CHAT_STREAM_CHUNK) 
  → CHAT_STREAM_ANNOTATIONS (optional, for citations)
  → CHAT_STREAM_COMPLETE (with usage: promptTokens, completionTokens, totalTokens, duration)

Cancel: CHAT_CANCEL_STREAM sets status to idle and re-enables input.

Error: CHAT_ERROR with AppError containing message, optional retry action, timestamp.

SSE Event Types

Event TypePayloadDescription
conversationId{ conversationId: string }Sent first for new conversations
chunk{ content: string }Text delta from agent response
annotations{ annotations: [...] }Citations (uri_citation, file_citation, etc.)
usage{ duration, promptTokens, completionTokens, totalTokens }Token metrics
done{}Stream complete
error{ message: string }Error occurred

Project-Specific: Dev Logging

Each state change prints (dev only):

text
🔄 [HH:MM:SS] ACTION_TYPE
Action: { … }
Changes: { field: before → after }
  • writing-csharp-code - Backend coding standards and AgentFrameworkService patterns
  • writing-typescript-code - Frontend React patterns and ChatService implementation
  • troubleshooting-authentication - Token acquisition for authenticated streaming

© microsoft-foundry, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .github/skills/implementing-chat-streaming of microsoft-foundry/foundry-agent-webapp.

Open the folder on GitHubat commit f6cb362

Compare with similar skills

Implementing Chat Streaming next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Implementing Chat Streaming compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Implementing Chat Streaming this skillmicrosoft-foundry/foundry-agent-webapp127—~1.9kAutomated safety check: PassMIT
MCP Developmentcoollabsio/coolify63k1 repos~949Automated safety check: PassMIT
Turnstile Spincloudflare/skills3k4 repos~7.2kAutomated safety check: NotesApache-2.0
Paperclip Pagepaperclipai/paperclip98k—~1kAutomated safety check: PassMIT
Go HTML Views with Gomponentsmaragudk/gomponents1.9k—~3.6kAutomated safety check: PassMIT
Pinmeglitternetwork/pinme3.7k—~3.8kAutomated safety check: NotesMIT

Similar skills

  • MCP Development

    coollabsio/coolify

    A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.

    63k GitHub starsUsed in 1 repo~949 tokens
    Frontend & DesignAuto-check passed
  • Turnstile Spin

    cloudflare/skills

    Official

    Set up, repair, or migrate to Cloudflare Turnstile bot verification in an existing frontend and backend, including server-side Siteverify.

    3k GitHub starsUsed in 4 repos~7.2k tokens
    Frontend & DesignAuto-check: notes
  • Paperclip Page

    paperclipai/paperclip

    Publish static HTML pages and asset folders to the Paperclip S3/CloudFront page host.

    98k GitHub stars~1k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Builds and edits HTML views in Go with gomponents, where components are plain functions that return a Node, instead of using template languages.

    1.9k GitHub stars~3.6k tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • Pinme

    glitternetwork/pinme

    A skill your agent uses when the user mentions "pinme", or needs to upload files, store to IPFS, create/publish/deploy websites or full-stack services (including frontend pages, backend APIs…

    3.7k GitHub stars~3.8k tokensUpdated 25 days ago
    Frontend & DesignAuto-check: notes
  • Dashboard

    InsForge/InsForge

    A skill your agent uses when contributing to InsForge's shared dashboard package.

    13k GitHub stars~2.3k tokensUpdated today
    Frontend & DesignAuto-check passed

More from microsoft-foundry/foundry-agent-webapp

All 19 skills in this repo
  • Committing Code

    microsoft-foundry/foundry-agent-webapp

    Provides commit message format and workflow for this repository.

    127 GitHub stars~512 tokensUpdated 5 mo ago
    Auto-check passed
  • Planning Features

    microsoft-foundry/foundry-agent-webapp

    Provides structured plan template for feature implementation.

    127 GitHub stars~548 tokensUpdated 5 mo ago
    Auto-check passed
  • Researching Azure AI SDK

    microsoft-foundry/foundry-agent-webapp

    Provides research patterns for Foundry Agent Service SDK. An agent skill from microsoft-foundry/foundry-agent-webapp.

    127 GitHub stars~4.7k tokensUpdated 5 mo ago
    Auto-check passed
  • Deploying To Azure

    microsoft-foundry/foundry-agent-webapp

    Provides deployment commands and troubleshooting for Azure Container Apps.

    127 GitHub stars~2.2k tokensUpdated 5 mo ago
    Auto-check: warnings
  • Syncing MCP Servers

    microsoft-foundry/foundry-agent-webapp

    Synchronize MCP server configuration between VS Code (.vscode/mcp.json) and Copilot CLI (~/.copilot/mcp-config.json).

    127 GitHub stars~1.3k tokensUpdated 5 mo ago
    Auto-check passed
  • Testing CLI Compatibility

    microsoft-foundry/foundry-agent-webapp

    Validate that Copilot CLI can see all repo skills, MCP servers, and custom instructions.

    127 GitHub stars~736 tokensUpdated 5 mo ago
    Auto-check passed

Questions about Implementing Chat Streaming

What does Implementing Chat Streaming do?

Provides SSE streaming patterns for the chat API and frontend. Implementing Chat Streaming is an agent skill from microsoft-foundry/foundry-agent-webapp. Provides SSE streaming patterns for the chat API and frontend.

When should I use Implementing Chat Streaming?

Implementing Chat Streaming fits situations like: modifying chat streaming; handling SSE events; troubleshooting message flow between frontend and backend.

How do I install Implementing Chat Streaming in Claude Code?

Run `npx skills add microsoft-foundry/foundry-agent-webapp --skill implementing-chat-streaming -a claude-code`. Or copy the skill folder (.github/skills/implementing-chat-streaming in microsoft-foundry/foundry-agent-webapp) into .claude/skills/implementing-chat-streaming in your project. Claude Code loads it when a task matches its description.

How do I install Implementing Chat Streaming in Codex?

Run `npx skills add microsoft-foundry/foundry-agent-webapp --skill implementing-chat-streaming -a codex`. Or copy the skill folder (.github/skills/implementing-chat-streaming in microsoft-foundry/foundry-agent-webapp) into .agents/skills/implementing-chat-streaming in your project. Codex loads it when a task matches its description.

Can I use Implementing Chat Streaming in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add microsoft-foundry/foundry-agent-webapp --skill implementing-chat-streaming -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/implementing-chat-streaming, .gemini/skills/implementing-chat-streaming, .github/skills/implementing-chat-streaming and .opencode/skills/implementing-chat-streaming in your project.

What does Implementing Chat Streaming need to run?

SKILL.md names no scripts, command-line tools or credentials: Implementing Chat Streaming is instructions for the agent only.

Does Implementing Chat Streaming access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Implementing Chat Streaming safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Implementing Chat Streaming use?

Implementing Chat Streaming is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Implementing Chat Streaming use?

About 1.9k tokens (SKILL.md is roughly 7.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Implementing Chat Streaming?

Skills that share tags, products or a category with Implementing Chat Streaming: MCP Development (coollabsio/coolify, 63k stars), Turnstile Spin (cloudflare/skills, 3k stars), Paperclip Page (paperclipai/paperclip, 98k stars) and Go HTML Views with Gomponents (maragudk/gomponents, 1.9k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Implementing Chat Streaming?

microsoft-foundry (a GitHub organization) maintains it in microsoft-foundry/foundry-agent-webapp, which has 127 GitHub stars. The repository holds 19 skills in this directory. The repository was last updated on April 21, 2026.

Source: microsoft-foundry/foundry-agent-webapp on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.