AutoGen Tutorial (TypeScript): streaming agent responses for intermediate developers

This tutorial shows you how to stream agent output token-by-token in AutoGen TypeScript, instead of waiting for a full response. You need this when you want live UI updates, partial progress logs, or lower perceived latency in agent-driven apps.

What You'll Need

• •Node.js 18+ and npm
• •A TypeScript project with "type": "module" or a compatible tsconfig setup
• •autogen installed from npm
• •dotenv for loading environment variables
• •An OpenAI API key in OPENAI_API_KEY
• •Basic familiarity with AutoGen agents and model clients

Step-by-Step

1. •Install the packages and set up your environment.
   Keep this minimal: one agent, one model client, one streaming loop.

npm install autogen dotenv
npm install -D typescript tsx @types/node

2. •Create a .env file with your API key.
   AutoGen reads credentials through the OpenAI client config, so keep secrets out of source control.

OPENAI_API_KEY=your_openai_api_key_here

3. •Create a TypeScript entry file and configure the OpenAI model client.
   The important part is enabling the model client that AutoGen will use for streaming responses.

import "dotenv/config";
import { AssistantAgent } from "autogen";

const agent = new AssistantAgent({
  name: "support_agent",
  systemMessage: "You are a concise assistant that explains things clearly.",
  modelClient: {
    apiKey: process.env.OPENAI_API_KEY!,
    model: "gpt-4o-mini",
  },
});

4. •Call the streaming API and print chunks as they arrive.
   This is the core pattern: iterate over the async stream and write each delta to stdout immediately.

async function main() {
  const stream = await agent.runStream([
    { role: "user", content: "Explain what streaming responses are in one paragraph." },
  ]);

  for await (const event of stream) {
    if (event.type === "text_delta" && event.delta) {
      process.stdout.write(event.delta);
    }
  }

  process.stdout.write("\n");
}

main().catch(console.error);

5. •Add a simple completion handler so you know when the stream is done.
   In production, you usually want to separate live token rendering from final state handling.

async function main() {
  const stream = await agent.runStream([
    { role: "user", content: "Give me three benefits of streaming responses." },
  ]);

  let fullText = "";

  for await (const event of stream) {
    if (event.type === "text_delta" && event.delta) {
      fullText += event.delta;
      process.stdout.write(event.delta);
    }
  }

  console.log("\n\n--- Final Output ---");
  console.log(fullText.trim());
}

main().catch(console.error);

6. •Run it with tsx.
   If your key is valid and the package versions line up, you should see text appear incrementally instead of all at once.

npx tsx src/index.ts

Testing It

Run the script and watch stdout carefully. If streaming is working, the answer should appear in small chunks rather than after a long pause.

If nothing prints until the end, check whether you're iterating over the async stream correctly and whether your terminal buffers output oddly. Also verify that OPENAI_API_KEY is loaded before agent construction.

For a stronger test, ask the agent for a longer answer, like a multi-step explanation or a list with examples. Longer outputs make it obvious whether deltas are arriving progressively.

Next Steps

• •Add streamed responses to an HTTP endpoint using Server-Sent Events or WebSockets
• •Capture tool calls alongside text deltas so your UI can show intermediate agent actions
• •Extend this pattern to multi-agent workflows where each agent streams independently

Keep learning

• •The complete AI Agents Roadmap — my full 8-step breakdown
• •Free: The AI Agent Starter Kit — PDF checklist + starter code
• •Work with me — I build AI for banks and insurance companies

By Cyprian Aarons, AI Consultant at Topiax.