Agent Patterns Demo

This project demonstrates different patterns for building AI agents, based on Anthropic's research, implemented using Cloudflare's Durable Objects and the AI SDK.

Overview

The demo showcases five fundamental patterns for building AI agents:

Prompt Chaining: Sequential processing where each step builds on the previous
Routing: Intelligent classification and routing of tasks
Parallelization: Concurrent execution of multiple subtasks
Orchestrator-Workers: Dynamic task breakdown and delegation
Evaluator-Optimizer: Iterative improvement through feedback loops

Each pattern is implemented as a Durable Object, providing persistence, real-time updates, and scalability.

Architecture

Frontend

React application with TypeScript
Real-time WebSocket connections to Durable Objects (powered by PartySocket, a reconnecting websocket library with a react hook)
Dark mode support
Responsive design

Backend

Cloudflare Durable Objects + PartyServer for agent state management
WebSocket connections for live updates
OpenAI integration via AI SDK
AI SDK for defining agent workflows
AI Gateway for caching and rate limiting

Features

Live Agent Interaction: Test each pattern with real inputs
Real-time Updates: See agent progress as it happens
Persistent State: Agents continue running even if you close the browser
Global Scaling: Runs on Cloudflare's edge network
Bonus: Dark Mode: Supports system preferences and manual toggle

Getting Started

Clone the repository
Install dependencies:
```
npm install
```

Create a .dev.vars file with your API keys:

OPENAI_API_KEY=your_key_here
AI_GATEWAY_TOKEN=your_key_here

Edit wrangler.json to set your account ID and ai gateway ID details:

"account_id": "your_account_id_here"
"vars": {
  "AI_GATEWAY_ACCOUNT_ID": "your_account_id_here",
  "AI_GATEWAY_ID": "your_gateway_id_here"
}

Run the development server:
```
npm start
```

Deployment

The application is designed to be deployed to Cloudflare Workers:

npm run deploy

Implementation Details

Durable Objects

We have an createAgent factory function that creates a new Durable Object class for a given pattern/workflow. The template for the class includes basic state management and websocket communication. So by calling createAgent(async () => {/* run the pattern */}) we get a new Durable Object class that can be used to create an instance. We create the 5 types of agents and export them from the worker, and wire them up as bindings in wrangler.jsonc.

WebSocket Communication

The frontend maintains WebSocket connections to each Durable Object instance. The websocket sends state updates to the frontend.

const socket = usePartySocket({
  party: type,
  room: "default-room",
  onMessage: (e) => {
    const data = JSON.parse(e.data);
    switch (data.type) {
      case "state":
        setWorkflowState(data.state);
        break;
    }
  }
});

The frontend also triggers the workflow by sending a run message to the websocket with initial input.

State Management

Each Durable Object maintains its own state:

state: {
  isRunning: boolean;
  output: any;
} = {
  isRunning: false,
  output: undefined,
};

Read more in the source code.

Why Durable Objects?

Durable Objects provide several key benefits for hosting AI agents:

Persistence: Agents continue running even when clients disconnect
Real-time Updates: WebSocket connections enable live progress streaming
Global Scale: Automatic distribution across Cloudflare's network
Flexible Triggers: Can be activated by HTTP, cron jobs, or other events
Memory Isolation: Each agent runs in its own environment
Cost Effective: Pay only for actual compute time used

Contributing

Contributions are welcome! Please read our contributing guidelines and submit pull requests.

License

MIT License - feel free to use this code in your own projects.

Acknowledgments

Based on research by Anthropic
Uses AI SDK
Built on Cloudflare Workers and Durable Objects