Angular

Create your Angular app#

If you don't have one already, pin the CLI to the supported major:

npx @angular/cli@22 new my-copilot-app
cd my-copilot-app

Install CopilotKit#

Install the Angular frontend package, @angular/cdk, and @copilotkit/runtime for your local Copilot Runtime server:

npm install @copilotkit/angular @angular/cdk @copilotkit/runtime
npm install -D tsx typescript @types/node

pnpm add @copilotkit/angular @angular/cdk @copilotkit/runtime
pnpm add -D tsx typescript @types/node

yarn add @copilotkit/angular @angular/cdk @copilotkit/runtime
yarn add -D tsx typescript @types/node

Connect the selected agent backend#

This URL keeps the agent backend selected. The Angular setup remains shared; the backend setup below comes from that integration's canonical showcase source.

An OpenAI Agents SDK agent is a plain Agent from agents: a name, instructions, a model and its tools. The AG-UI adapter, ag_ui_openai_agents, wraps it in an OpenAIAgentsAgent. The wrapper turns each AG-UI request into a streamed SDK run and streams the SDK's events back as AG-UI events.

The model calls go through the SDK's default OpenAI client, so the usual OPENAI_API_KEY and OPENAI_BASE_URL apply. The showcase registers one AsyncOpenAI client for the whole process. It points that client at aimock and copies the test headers of the current request onto every model call:

async def _forward_request_headers(request: httpx.Request) -> None:
    """Copies the current request's mock/diagnostic headers onto a model call.

    ``x-aimock-context`` is fixed to this package's slug so aimock picks this
    package's fixtures whatever the inbound request carried. The rest is
    forwarded only when present, so ordinary demo traffic is never forced
    into strict mode.
    """
    for key, value in get_forwarded_headers().items():
        if key.startswith(_FORWARDED_PREFIXES):
            request.headers[key] = value
    request.headers["x-aimock-context"] = SLUG


_CLIENT: AsyncOpenAI | None = None


def openai_client() -> AsyncOpenAI:
    """The process-wide client every model call goes through."""
    global _CLIENT
    if _CLIENT is None:
        _CLIENT = AsyncOpenAI(
            http_client=httpx.AsyncClient(
                timeout=httpx.Timeout(120.0, connect=10.0),
                event_hooks={"request": [_forward_request_headers]},
            )
        )
    return _CLIENT


def configure_sdk() -> None:
    """Points the Agents SDK at ``openai_client()``. Call once at startup.

    Tracing is off unless OPENAI_AGENTS_TRACING=1: traces go to the OpenAI
    platform, which the mock key and the aimock base URL cannot reach.
    """
    set_default_openai_client(openai_client(), use_for_tracing=False)
    if os.environ.get("OPENAI_AGENTS_TRACING") != "1":
        set_tracing_disabled(True)


async def close_client() -> None:
    global _CLIENT
    client, _CLIENT = _CLIENT, None
    if client is not None:
        await client.close()

Nothing about CopilotKit is configured on the agent itself. On every run the wrapper:

• adds the tools the page registered to a per-request copy of the agent, as tools the browser answers;
• appends the page's useAgentContext entries to the instructions;
• makes the run's AG-UI state readable and writable through shared_state().

The shared Agent is never changed, so one agent can serve many requests at once.

add_openai_agents_fastapi_endpoint mounts one wrapped agent as an AG-UI endpoint on a FastAPI app. The showcase keeps its OpenAIAgentsAgents in a {name: agent} mapping and mounts each one at /<name>:

app = FastAPI(title="OpenAI Agents SDK Agent Server", lifespan=lifespan)
for name, agent in AGENTS.items():
    add_openai_agents_fastapi_endpoint(app, agent, f"/{name}", include_health=False)

Then point Copilot Runtime at http://localhost:8000/<agent name>.

pip install ag-ui-openai-agents openai-agents

Import the styles#

Add the package stylesheet to your global styles. It's self-contained, so the chat renders without any other CSS.

@import "@copilotkit/angular/styles.css"; 

Connect to Copilot Runtime#

Point provideCopilotKit at the runtime endpoint. The chat uses the agent that your runtime registers as default.

import { ApplicationConfig } from "@angular/core";
import { provideCopilotKit } from "@copilotkit/angular"; 

export const appConfig: ApplicationConfig = {
  providers: [
    provideCopilotKit({
      runtimeUrl: "http://localhost:8200/api/copilotkit",
    }),
  ],
};

Add the chat UI#

Import the CopilotChat component into your root component and drop it into the template.

import { Component } from "@angular/core";
import { CopilotChat } from "@copilotkit/angular"; 

@Component({
  selector: "app-root",
  imports: [CopilotChat], 
  template: `
    <div style="height: 100vh">
      <copilot-chat />
    </div>
  `,
})
export class App {}

Run the backend, runtime, and Angular app#

Start the selected agent backend and Copilot Runtime with the commands from its runtime guide. Confirm http://localhost:8200/api/copilotkit/info reports the default agent, then start Angular:

npm start

Open the Angular CLI URL (usually http://localhost:4200) and send a message. The request now follows the selected path end to end: Angular → Copilot Runtime → your selected agent backend.

Open Inspector and confirm setup#

On localhost, click the Inspector button in the corner of the app.

1. Open Agents, then Agent. Your agent is listed.
2. Send a chat message. Open Agents, then AG-UI Events. Events are moving.
3. Open Rich Threads. The list is unlocked (Intelligence is on), or locked with Enable Intelligence (Intelligence is off).

More detail: Inspector.