Getting Started with Adzen on CopilotKit

Adzen delivers contextual ads inside AI chat streams. It sits alongside CopilotKit as AG-UI middleware — intercepting assistant messages, matching ads, and rendering sponsored placements without modifying or blocking any content.

Integration Stack

The integration has three layers:

Layer	Role
Adzen	matches ads to assistant output and renders sponsored placements
CopilotKit	owns the chat UI, runtime route, and agent bridge
Backend agent	runs the LLM agent (LangGraph, custom AG-UI agent, etc.)

┌──────────────────────────────────────────────────┐
│  CopilotKit Chat UI                              │
│  ┌────────────────────────────────────────────┐  │
│  │  Assistant message                         │  │
│  └────────────────────────────────────────────┘  │
│  ┌────────────────────────────────────────────┐  │
│  │  AdzenCard (sponsored placement)           │  │
│  └────────────────────────────────────────────┘  │
└──────────────────────────────────────────────────┘
        ▲                           ▲
        │  AG-UI events             │  adzen_placement
        │                           │  custom events
┌───────┴───────────────────────────┴──────────────┐
│  AdzenAsyncMiddleware                            │
│  buffers text → calls /process → emits placement │
└──────────────────────────────────────────────────┘
        ▲
        │  AG-UI event stream
┌───────┴──────────────────────────────────────────┐
│  Backend Agent (LangGraph, AG-UI, etc.)          │
└──────────────────────────────────────────────────┘

Adzen is additive only — it never modifies, blocks, or delays the assistant text stream. Ad fetches run as a side-effect after each assistant message completes.

Before You Run

Obtain an Adzen API key from your Adzen account.
Have a working CopilotKit app, or use the demo to start from scratch.

Quick Code Preview

Server-side: pipe AG-UI events through the middleware

import { AdzenAsyncMiddleware } from "@adzenai/ai/copilotkit";
 
const adzen = new AdzenAsyncMiddleware({
  apiKey: process.env.ADZEN_API_KEY!,
});
 
// In your AG-UI event loop:
for await (const event of agentEventStream) {
  const downstream = await adzen.processEvent(event);
  for (const evt of downstream) {
    emitToClient(evt);
  }
}

Client-side: render ad cards and bridge events

import { AdzenCard, dispatchPlacementEvents } from "@adzenai/ai/copilotkit/react";
 
// In your AG-UI event handler on the client:
dispatchPlacementEvents(events);
 
// In your message list:
{messages.map((msg) => (
  <div key={msg.id}>
    <AssistantMessage content={msg.content} />
    <AdzenCard messageId={msg.id} />
  </div>
))}

Choose Your Path

Run the Demo Add Adzen to CopilotKit Developer Guide Integration Walkthrough Configuration

What Adzen Captures

From the AG-UI event stream, Adzen captures:

Complete assistant message text (buffered per messageId)
Final custom events as a fallback content source for agents that emit structured output
Viewability signals when ads are rendered and visible in the viewport

What To Expect In The UI

After integration, the CopilotKit chat shows:

Assistant messages streaming normally with zero added latency
A sponsored ad card below each assistant message (when the Adzen API returns a match)
Viewability-tracked impressions that fire after the ad is visible for the configured threshold
Click-through links to advertiser destinations

Next Steps

Run the Demo to see the integration in action.
Add Adzen to CopilotKit for an existing app.
Review the Developer Guide for architecture details.
Configure runtime behavior in Configuration.

Overview Run the Demo