AG-UI Strands Adapter

A TypeScript port of the Python AG-UI adapter for Strands Agents. This project demonstrates how to build full-stack TypeScript AI applications using open standards.

What This Is

A proof-of-concept showing Strands Agents + CopilotKit working together via the AG-UI protocol—all in TypeScript.

The Stack:

• Strands Agents - AI agent framework (backend)
• CopilotKit - React UI components for AI chat interfaces
• AG-UI Protocol - Open standard for agent-UI communication

How It Works

┌─────────────────┐     AG-UI/SSE      ┌──────────────────┐
│   CopilotKit    │ ◄────────────────► │  Strands Agent   │
│   (Next.js)     │                    │  (Express)       │
└─────────────────┘                    └──────────────────┘
                                              │
                                              ▼
                                       ┌──────────────────┐
                                       │  ag-ui-strands   │
                                       │    -adapter      │
                                       └──────────────────┘

The adapter is a thin translation layer that:

1. Receives AG-UI protocol requests from CopilotKit
2. Converts them to Strands Agent format
3. Streams responses back as AG-UI events (SSE)

Project Structure

packages/
├── ag-ui-strands-adapter/  # The adapter library (the interesting bit)
├── strands-agent/          # Demo backend agent
└── ag-ui-web/              # Demo CopilotKit frontend

Quick Start

# Install
pnpm install

# Terminal 1: Start the agent
pnpm --filter strands-agent dev

# Terminal 2: Start the frontend
pnpm --filter ag-ui-web dev

Requires AWS credentials configured for Bedrock access.

The Adapter

The core of this project is ag-ui-strands-adapter. It mirrors the Python adapter's design:

import { Agent } from "@strands-agents/sdk";
import { StrandsAgentAdapter, createStrandsApp } from "ag-ui-strands-adapter";

const agent = new Agent({ model, tools, systemPrompt });

const adapter = new StrandsAgentAdapter({
  agent,
  name: "my_agent",
  description: "Does things",
});

const app = createStrandsApp(adapter);
app.listen(8001);

Key Features

• SSE Streaming - Real-time token streaming to the UI
• Frontend Tools - Tools that execute in the browser (via useFrontendTool)
• Backend Tools - Tools that run on the server
• State Sync - Bidirectional state between agent and UI (via useCoAgent)
• Generative UI - Custom React components for tool calls

Why This Matters

Before this, using Strands with a rich UI meant Python on the backend. This adapter enables:

• Full TypeScript stack (frontend + backend)
• Same patterns as the Python adapter
• Open standards throughout (AG-UI, Strands, CopilotKit)

Demo App

The included demo is a "Proverbs Agent" showcasing:

• Backend tool: Weather lookup with generative UI
• Frontend tools: Theme color changes, alerts
• Shared state: A proverbs list synced between agent and UI