Query on integration of A2UI renderer for angular with copilotkit for angular

[shrewd flint]

I have setup copilotkit in angular and now I’d like to setup google’s A2UI renderer with it, how should I do that, I have installed @a2ui/angular from the A2UI repo and used provideA2UI in app config, but it’s still not rendering the a2ui components in chat, inside my app.component.html i just have the <copilot-chat> component.

[safe swift]

This solution has been AI generated

You’ve done the right first step with provideA2UI, but CopilotKit also needs a custom assistant-message renderer and an agent that actually emits A2UI protocol messages. Wire an A2UI-aware renderer into <copilot-chat> and enable the A2UI tool on the backend so the model sends A2UI updates instead of plain text.

Frontend: render A2UI inside CopilotChat

// app-a2ui-message-renderer.component.ts
import { Component, input } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-a2ui-message-renderer',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="a2ui-container">
      <a2ui-surface [message]="content()"></a2ui-surface>
    </div>
  `,
})
export class A2UIMessageRendererComponent {
  readonly content = input.required<string>();
}

<!-- app.component.html -->
<copilot-chat>
  <ng-template #assistantMessageMarkdownRenderer let-context="context">
    <app-a2ui-message-renderer [content]="context.content"></app-a2ui-message-renderer>
  </ng-template>
</copilot-chat>

Alternative (more control):

<copilot-chat-view [messages]="messages">
  <ng-template #assistantMessageMarkdownRenderer let-context>
    <app-a2ui-message-renderer [content]="context.content"></app-a2ui-message-renderer>
  </ng-template>
</copilot-chat-view>

Backend: expose the A2UI tool to the agent

import { CopilotRuntime } from "@copilotkit/runtime";
import { A2UIMiddleware } from "@ag-ui/a2ui-middleware";

const runtime = new CopilotRuntime();
runtime.use(new A2UIMiddleware({ injectA2UITool: true }));

Prompting: ensure the model outputs A2UI protocol

• Instruct the agent to use the A2UI tool with a single call that includes:
  • surfaceUpdate
  • optional dataModelUpdate
  • beginRendering with a root ID that appears in surfaceUpdate
• Keep the component list flat; children are referenced by ID; root is a layout (Column/Row/Card).

Notes

• A2UI won’t render if the assistant returns plain text; it must send A2UI JSON via the tool.
• Ensure required A2UI peer deps are installed and your container has reasonable size/styles.

Was this helpful?

If this solution worked for you, please click on the appropriate option below to help us improve:

[safe swift]

Thank you for your feedback! Our team will provide additional assistance. 🔄