@copilotkitnext/angular 1.52.0-next.8 → 1.52.0

package/README.md

@@ -1,534 +1,327 @@
 # CopilotKit for Angular
 
-This package provides native Angular components, directives, and providers to build Copilot chat UIs powered by the CopilotKit runtime and AG-UI agents. It mirrors the React experience with idiomatic Angular APIs.
-
-## Quick Start
-
-1. **Install**: `pnpm add @copilotkitnext/angular`
-2. **Add styles**: Add `@copilotkitnext/angular/styles.css` to your Angular app styles array or `@import "@copilotkitnext/angular/styles.css";` in a global stylesheet
-3. **Provide CopilotKit**: Set the runtime URL and optional labels via providers
-4. **Use the chat**: Drop `<copilot-chat />` into any template
+Angular bindings for CopilotKit core and AG-UI agents. This package provides services, directives, and utilities for building custom, headless Copilot UIs.
 
 ## Installation
 
-### Package Installation
-
-Install `@copilotkitnext/angular` in your Angular app (supports Angular 18 and 19):
-
 ```bash
-# pnpm (recommended)
-pnpm add @copilotkitnext/angular
-
 # npm
-npm install @copilotkitnext/angular
-
-# yarn
-yarn add @copilotkitnext/angular
+npm install @copilotkitnext/{core,angular}
 ```
 
-### Peer Dependencies
-
-Ensure these are present (matching your Angular major):
-
-- `@angular/core`
-- `@angular/common`
-- `@angular/cdk` (use `^18` with Angular 18, `^19` with Angular 19)
+- `@angular/core` and `@angular/common` (19+)
+- `@angular/cdk` (match your Angular major)
 - `rxjs`
-- `tslib`
-
-### Styles
 
-Reference the package CSS so the components render correctly:
+## Quick start
 
-**Option 1:** In `angular.json`:
+### 1) Provide CopilotKit
 
-```json
-"styles": [
-  "@copilotkitnext/angular/styles.css",
-  "src/styles.css"
-]
-```
-
-**Option 2:** In your global stylesheet:
-
-```css
-@import "@copilotkitnext/angular/styles.css";
-```
-
-## App Wiring (Providers)
+Configure runtime and tools in your app config:
 
-Add CopilotKit providers in your application config to set labels and runtime URL.
-
-### Example (`app.config.ts`):
-
-```typescript
-import {
-  provideCopilotKit,
-  provideCopilotChatConfiguration,
-} from "@copilotkitnext/angular";
+```ts
+import { ApplicationConfig } from "@angular/core";
+import { provideCopilotKit } from "@copilotkitnext/angular";
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    importProvidersFrom(BrowserModule),
-    ...provideCopilotKit({
-      // runtimeUrl can also be set via template directive; see below
-    }),
-    provideCopilotChatConfiguration({
-      labels: {
-        chatInputPlaceholder: "Ask me anything...",
-        chatDisclaimerText: "AI responses may need verification.",
-      },
+    provideCopilotKit({
+      licenseKey: "ck_pub_your_public_api_key",
+      runtimeUrl: "http://localhost:3001/api/copilotkit",
+      headers: { Authorization: "Bearer ..." },
+      properties: { app: "demo" },
     }),
   ],
 };
 ```
 
-## Runtime URL (Template Directive)
-
-You can declare the CopilotKit runtime endpoint directly in templates via the `CopilotKitConfigDirective`.
-
-### Component Template Example:
-
-```html
-<div
-  [copilotkitConfig]="{ runtimeUrl: runtimeUrl }"
-  style="display:block;height:100vh"
->
-  <copilot-chat></copilot-chat>
-</div>
-```
-
-### Component Class:
-
-```typescript
-export class AppComponent {
-  runtimeUrl = "http://localhost:3001/api/copilotkit";
-}
-```
-
-## Using the Chat Component
-
-### Minimal Usage:
-
-```html
-<copilot-chat></copilot-chat>
-```
+### 2) Build a custom UI with `injectAgentStore`
 
-### With a Specific Agent:
-
-```html
-<copilot-chat [agentId]="'sales'"></copilot-chat>
-```
-
-### Behavior:
-
-- If `agentId` is omitted, the component uses the default agent (ID: `default`)
-
-## Custom Input Components (Angular)
-
-When building custom input components for CopilotKit Angular, use the service-based pattern with `CopilotChatConfigurationService` for message submission. This is the idiomatic Angular approach leveraging dependency injection.
-
-### Service-Based Custom Input Example:
-
-```typescript
-import { Component } from "@angular/core";
-import { FormsModule } from "@angular/forms";
-import { CopilotChatConfigurationService } from "@copilotkitnext/angular";
+```ts
+import { Component, inject, signal } from "@angular/core";
+import { Message } from "@ag-ui/client";
+import { CopilotKit, injectAgentStore } from "@copilotkitnext/angular";
+import { randomUUID } from "@copilotkitnext/shared";
 
 @Component({
-  selector: "my-custom-input",
-  standalone: true,
-  imports: [FormsModule],
   template: `
-    <div class="custom-input-wrapper">
-      <input
-        [(ngModel)]="inputValue"
-        (keyup.enter)="submitMessage()"
-        placeholder="Type your message..."
-      />
-      <button (click)="submitMessage()">Send</button>
-    </div>
-  `,
-})
-export class MyCustomInputComponent {
-  inputValue = "";
-
-  constructor(private chat: CopilotChatConfigurationService) {}
-
-  submitMessage() {
-    const value = this.inputValue.trim();
-    if (value) {
-      // Use the service to submit the message
-      this.chat.submitInput(value);
-      this.inputValue = "";
+    @for (let message of messages(); track message.id) {
+      <div>
+        <em>{{ message.role }}</em>
+        <p>{{ message.content }}</p>
+      </div>
     }
-  }
-}
-```
-
-### Using the Custom Input Component:
-
-```typescript
-import { Component } from "@angular/core";
-import { CopilotChatViewComponent } from "@copilotkitnext/angular";
-import { MyCustomInputComponent } from "./my-custom-input.component";
 
-@Component({
-  selector: "app-chat",
-  standalone: true,
-  imports: [CopilotChatViewComponent],
-  template: `
-    <copilot-chat-view
-      [messages]="messages"
-      [inputComponent]="customInputComponent"
-    >
-    </copilot-chat-view>
+    <input
+      [value]="input()"
+      (input)="input.set($any($event.target).value)"
+      (keyup.enter)="send()"
+    />
+    <button (click)="send()" [disabled]="store().isRunning()">Send</button>
   `,
 })
-export class ChatComponent {
-  messages = [];
-  customInputComponent = MyCustomInputComponent;
-}
-```
+export class HeadlessChatComponent {
+  readonly copilotKit = inject(CopilotKit);
+  readonly store = injectAgentStore("default");
+  readonly messages = this.store().messages;
 
-### Key Points:
+  readonly input = signal("");
 
-- **No callback props**: Unlike React which uses `onSubmitMessage` callbacks, Angular uses dependency injection
-- **Service injection**: Inject `CopilotChatConfigurationService` to access `submitInput()`
-- **Cross-component communication**: The service handles message submission internally
-- **Type safety**: Full TypeScript support with proper type inference
+  async send() {
+    const content = this.input().trim();
+    if (!content) return;
 
-### Alternative: Using the Chat Config Directive
+    const agent = this.store().agent;
 
-For template-level hooks, you can also use the `copilotkitChatConfig` directive:
-
-```html
-<div
-  [copilotkitChatConfig]="{ 
-  onSubmitInput: handleSubmit,
-  onChangeInput: handleChange 
-}"
->
-  <copilot-chat></copilot-chat>
-</div>
-```
+    agent.addMessage({
+      id: randomUUID(),
+      role: "user",
+      content,
+    });
 
-```typescript
-export class ChatComponent {
-  handleSubmit = (value: string) => {
-    console.log("Message submitted:", value);
-  };
+    this.input.set("");
 
-  handleChange = (value: string) => {
-    console.log("Input changed:", value);
-  };
+    await this.copilotKit.core.runAgent({ agent });
+  }
 }
 ```
 
-## Agents 101 (AG-UI)
-
-- **Agent model**: CopilotKit uses AG-UI's `AbstractAgent` interface (package `@ag-ui/client`)
-- **Frontend vs backend**:
-  - **Backend (runtime)**: Host your real agents. You can use any AG-UI agent on the server
-  - **Frontend (Angular app)**: Discovers remote agents from the runtime automatically, and can also host local in-browser agents if desired
-- **Default agent**: The ID `default` is special; when present, it is used by `<copilot-chat>` if no `agentId` is provided
-- **Compatibility**: Any agent that supports AG-UI works. See https://docs.ag-ui.com/
+The `agent` is an AG-UI `AbstractAgent`. Refer to your AG-UI agent implementation for available methods and message formats.
 
-> **Note**: In most real apps, you define agents on the server (runtime). The frontend will auto-discover them when a `runtimeUrl` is configured.
+## Core configuration
 
-## Backend Runtime (Hono Server)
+### `CopilotKitConfig`
 
-Example Angular server (from `apps/angular/demo-server`):
+`provideCopilotKit` accepts a `CopilotKitConfig` object:
 
-### `index.ts`
-
-```typescript
-import { serve } from "@hono/node-server";
-import { Hono } from "hono";
-import { cors } from "hono/cors";
-import {
-  CopilotRuntime,
-  createCopilotEndpoint,
-  InMemoryAgentRunner,
-} from "@copilotkitnext/runtime";
-import { AnyAGUIAgent } from "@ag-ui/your-desired-agent-framework";
-
-const runtime = new CopilotRuntime({
-  agents: { default: new AnyAGUIAgent() },
-});
+```ts
+export interface CopilotKitConfig {
+  runtimeUrl?: string;
+  headers?: Record<string, string>;
+  licenseKey?: string;
+  properties?: Record<string, unknown>;
+  agents?: Record<string, AbstractAgent>;
+  tools?: ClientTool[];
+  renderToolCalls?: RenderToolCallConfig[];
+  frontendTools?: FrontendToolConfig[];
+  humanInTheLoop?: HumanInTheLoopConfig[];
+}
+```
 
-// Create a main app with CORS enabled
-const app = new Hono();
-
-// Enable CORS for local dev (Angular demo at http://localhost:4200)
-app.use(
-  "*",
-  cors({
-    origin: "http://localhost:4200",
-    allowMethods: ["GET", "POST", "OPTIONS", "PUT", "DELETE"],
-    allowHeaders: ["Content-Type", "Authorization", "X-Requested-With"],
-    exposeHeaders: ["Content-Type"],
-    credentials: true,
-    maxAge: 86400,
-  }),
-);
-
-// Create the CopilotKit endpoint
-const copilotApp = createCopilotEndpoint({
-  runtime,
-  basePath: "/api/copilotkit",
-});
+- `runtimeUrl`: URL to your CopilotKit runtime.
+- `headers`: Default headers sent to the runtime.
+- `licenseKey`: Copilot Cloud public API key (`ck_pub_...`), required by `provideCopilotKit`.
+- `properties`: Arbitrary props forwarded to agent runs.
+- `agents`: Local, in-browser agents keyed by `agentId`.
+- `tools`: Tool definitions advertised to the runtime (no handler).
+- `renderToolCalls`: Components to render tool calls in the UI.
+- `frontendTools`: Client-side tools with handlers.
+- `humanInTheLoop`: Tools that pause for user input.
 
-// Mount the CopilotKit app
-app.route("/", copilotApp);
+### Injection helpers
 
-const port = Number(process.env.PORT || 3001);
-serve({ fetch: app.fetch, port });
-console.log(
-  `CopilotKit runtime listening at http://localhost:${port}/api/copilotkit`,
-);
-```
+- `provideCopilotKit(config)`: Provider for `CopilotKitConfig`.
 
-## CopilotKit Angular APIs (Most Used)
+## `CopilotKit` service
 
-### Components
+### Readonly signals
 
-- **`CopilotChatComponent`**: Full chat UI
-  - Inputs: `agentId?: string`
+- `agents`: `Signal<Record<string, AbstractAgent>>`
+- `runtimeConnectionStatus`: `Signal<CopilotKitCoreRuntimeConnectionStatus>`
+- `runtimeUrl`: `Signal<string | undefined>`
+- `runtimeTransport`: `Signal<CopilotRuntimeTransport>` (`"rest" | "single"`)
+- `headers`: `Signal<Record<string, string>>`
+- `toolCallRenderConfigs`: `Signal<RenderToolCallConfig[]>`
+- `clientToolCallRenderConfigs`: `Signal<FrontendToolConfig[]>`
+- `humanInTheLoopToolRenderConfigs`: `Signal<HumanInTheLoopConfig[]>`
 
-### Directives
+### Methods
 
-- **`CopilotKitConfigDirective`** (`[copilotkitConfig]`): Set `runtimeUrl`, `headers`, `properties`, and/or `agents` declaratively
-- **`CopilotKitAgentDirective`** (`[copilotkitAgent]`): Observe agent state; defaults to the `default` agent if no `agentId` is provided
+- `getAgent(agentId: string): AbstractAgent | undefined`
+- `addFrontendTool(config: FrontendToolConfig & { injector: Injector }): void`
+- `addRenderToolCall(config: RenderToolCallConfig): void`
+- `addHumanInTheLoop(config: HumanInTheLoopConfig): void`
+- `removeTool(toolName: string, agentId?: string): void`
+- `updateRuntime(options: { runtimeUrl?: string; runtimeTransport?: CopilotRuntimeTransport; headers?: Record<string,string>; properties?: Record<string, unknown>; agents?: Record<string, AbstractAgent>; }): void`
 
-### Providers
+### Advanced
 
-- **`provideCopilotKit(...)`**: Set runtime URL, headers, properties, agents, tools, human-in-the-loop handlers
-- **`provideCopilotChatConfiguration(...)`**: Set UI labels and behavior for chat input/view
+- `core`: The underlying `CopilotKitCore` instance.
 
-## Headless Usage: Building Custom Chat UIs
+## Agents
 
-For advanced use cases where you need full control over the chat UI, you can use the `watchAgent` utility directly to build a custom chat component.
+### `injectAgentStore`
 
-### Using `watchAgent` for Custom Components
+```ts
+const store = injectAgentStore("default");
+// or: injectAgentStore(signal(agentId))
+```
 
-The `watchAgent` function provides reactive signals for agent state, making it easy to build custom chat interfaces:
+Returns a `Signal<AgentStore>`. The store exposes:
 
-```typescript
-import { Component, effect } from "@angular/core";
-import { watchAgent } from "@copilotkitnext/angular";
+- `agent`: `AbstractAgent`
+- `messages`: `Signal<Message[]>`
+- `state`: `Signal<any>`
+- `isRunning`: `Signal<boolean>`
+- `teardown()`: Clean up subscriptions
 
-@Component({
-  selector: "my-custom-chat",
-  template: `
-    <div class="custom-chat">
-      <div *ngFor="let msg of messages()" class="message">
-        {{ msg.content }}
-      </div>
-      <input [disabled]="isRunning()" (keyup.enter)="sendMessage($event)" />
-    </div>
-  `,
-})
-export class MyCustomChatComponent {
-  protected agent!: ReturnType<typeof watchAgent>["agent"];
-  protected messages!: ReturnType<typeof watchAgent>["messages"];
-  protected isRunning!: ReturnType<typeof watchAgent>["isRunning"];
-
-  constructor() {
-    const w = watchAgent({ agentId: "custom" });
-    this.agent = w.agent;
-    this.messages = w.messages;
-    this.isRunning = w.isRunning;
-
-    // React to agent changes
-    effect(() => {
-      const currentAgent = this.agent();
-      if (currentAgent) {
-        console.log("Agent ready:", currentAgent.id);
-      }
-    });
-  }
+If the agent is not available locally but a `runtimeUrl` is configured, a proxy agent is created while the runtime connects. If the agent still cannot be resolved, an error is thrown that includes the configured runtime and known agent IDs.
 
-  async sendMessage(event: Event) {
-    const input = event.target as HTMLInputElement;
-    const content = input.value.trim();
-    if (!content || !this.agent()) return;
+### `CopilotkitAgentFactory`
 
-    // Add user message and run agent
-    this.agent()!.addMessage({ role: "user", content });
-    input.value = "";
-    await this.agent()!.runAgent();
-  }
-}
-```
+Advanced factory for creating `AgentStore` signals. Most apps should use `injectAgentStore` instead.
 
-### Switching Agents at Runtime
+## Agent context
 
-Use `watchAgentWith` when you need to switch agents dynamically outside of the constructor:
+### `connectAgentContext`
 
-```typescript
-import { Component, Injector } from "@angular/core";
-import { watchAgent, watchAgentWith } from "@copilotkitnext/angular";
+Connect AG-UI context to the runtime (auto-cleanup when the effect is destroyed):
 
-@Component({
-  selector: "agent-switcher",
-  template: `
-    <button (click)="switchToAgent('sales')">Sales Agent</button>
-    <button (click)="switchToAgent('support')">Support Agent</button>
-    <div>Current Agent: {{ agent()?.id || "None" }}</div>
-  `,
-})
-export class AgentSwitcherComponent {
-  protected agent!: ReturnType<typeof watchAgent>["agent"];
-  protected messages!: ReturnType<typeof watchAgent>["messages"];
-  protected isRunning!: ReturnType<typeof watchAgent>["isRunning"];
-  private watcher?: ReturnType<typeof watchAgent>;
-
-  constructor(private injector: Injector) {
-    // Initialize with default agent
-    this.switchToAgent("default");
-  }
+```ts
+import { connectAgentContext } from "@copilotkitnext/angular";
 
-  switchToAgent(agentId: string) {
-    // Clean up previous watcher
-    this.watcher?.unsubscribe();
+connectAgentContext({
+  description: "User preferences",
+  value: { theme: "dark" },
+});
+```
 
-    // Create new watcher with the ergonomic helper
-    const w = watchAgentWith(this.injector, { agentId });
+You must call it within an injection context (e.g., inside a component constructor or `runInInjectionContext`), or pass an explicit `Injector`:
 
-    // Update component signals
-    this.agent = w.agent;
-    this.messages = w.messages;
-    this.isRunning = w.isRunning;
-    this.watcher = w;
-  }
-}
+```ts
+connectAgentContext(contextSignal, { injector });
 ```
 
-### Rendering Tool Calls (Headless)
-
-To render tool calls in a headless UI, register renderers in your providers and drop the lightweight view in your template.
+## Tools and tool rendering
 
-1. Register tool renderers (e.g., a wildcard that renders any tool):
+### Types
 
 ```ts
-import { ApplicationConfig, importProvidersFrom } from "@angular/core";
-import { BrowserModule } from "@angular/platform-browser";
-import { provideCopilotKit } from "@copilotkitnext/angular";
+export interface RenderToolCallConfig<Args> {
+  name: string;              // tool name, or "*" for wildcard
+  args: z.ZodType<Args>;      // Zod schema for args
+  component: Type<ToolRenderer<Args>>;
+  agentId?: string;           // optional agent scope
+}
 
-// Simple demo renderer (Component or TemplateRef accepted)
-@Component({
-  standalone: true,
-  template: `
-    <div
-      style="padding:12px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;margin:8px 0;"
-    >
-      <div style="font-weight:600;margin-bottom:6px;">Tool: {{ name }}</div>
-      <pre style="margin:0;white-space:pre-wrap;">{{ args | json }}</pre>
-      <div *ngIf="result" style="margin-top:6px;">Result: {{ result }}</div>
-    </div>
-  `,
-})
-export class WildcardToolRenderComponent {
-  @Input() name!: string;
-  @Input() args: any;
-  @Input() status: any;
-  @Input() result?: string;
+export interface FrontendToolConfig<Args> {
+  name: string;
+  description: string;
+  parameters: z.ZodType<Args>;
+  component?: Type<ToolRenderer<Args>>; // optional UI renderer
+  handler: (args: Args, context: FrontendToolHandlerContext) => Promise<unknown>;
+  agentId?: string;
 }
 
-export const appConfig: ApplicationConfig = {
-  providers: [
-    importProvidersFrom(BrowserModule),
-    ...provideCopilotKit({
-      renderToolCalls: [{ name: "*", render: WildcardToolRenderComponent }],
-    }),
-  ],
+export interface HumanInTheLoopConfig<Args> {
+  name: string;
+  description: string;
+  parameters: z.ZodType<Args>;
+  component: Type<HumanInTheLoopToolRenderer<Args>>;
+  agentId?: string;
+}
+
+export type ClientTool<Args> = Omit<FrontendTool<Args>, \"handler\"> & {
+  renderer?: Type<ToolRenderer<Args>>;
 };
 ```
 
-2. Render tool calls under assistant messages using the headless view component:
+Renderer components receive a signal:
 
 ```ts
-import { Component } from "@angular/core";
-import {
-  watchAgent,
-  CopilotChatToolCallsViewComponent,
-} from "@copilotkitnext/angular";
+export interface ToolRenderer<Args> {
+  toolCall: Signal<AngularToolCall<Args>>;
+}
 
-@Component({
-  standalone: true,
-  imports: [CopilotChatToolCallsViewComponent],
-  template: `
-    <div *ngFor="let m of messages()">
-      <div>{{ m.role }}: {{ m.content }}</div>
-      <ng-container *ngIf="m.role === 'assistant'">
-        <copilot-chat-tool-calls-view
-          [message]="m"
-          [messages]="messages()"
-          [isLoading]="isRunning()"
-        />
-      </ng-container>
-    </div>
-  `,
-})
-export class HeadlessWithToolsComponent {
-  agent = watchAgent().agent;
-  messages = watchAgent().messages;
-  isRunning = watchAgent().isRunning;
+export interface HumanInTheLoopToolRenderer<Args> {
+  toolCall: Signal<HumanInTheLoopToolCall<Args>>; // includes respond(result)
 }
 ```
 
-Notes:
+`AngularToolCall` / `HumanInTheLoopToolCall` expose `args`, `status` (`"in-progress" | "executing" | "complete"`), and `result`.
 
-- If you prefer full manual control, you can render a specific tool call with `CopilotKitToolRenderComponent` and pass `toolName`, `args`, `status`, and `result` yourself.
-- You can also register tool renders declaratively via the `CopilotKitFrontendToolDirective` by using `[copilotkitFrontendTool]` in templates.
+### Register tools with DI
 
-### Key Benefits of Headless Usage
+These helpers auto-remove tools when the current injection context is destroyed:
+Call them from an injection context (e.g., a component constructor, directive, or `runInInjectionContext`).
+
+```ts
+import {
+  registerFrontendTool,
+  registerRenderToolCall,
+  registerHumanInTheLoop,
+} from "@copilotkitnext/angular";
+import { z } from "zod";
 
-- **Full control**: Build any UI you need without constraints
-- **Reactive signals**: Automatically update UI when agent state changes
-- **Type safety**: Full TypeScript support with AG-UI types
-- **Memory efficient**: Automatic cleanup via Angular's DestroyRef
-- **Framework agnostic**: Works with any AG-UI compatible agent
+registerFrontendTool({
+  name: "lookup",
+  description: "Fetch a record",
+  parameters: z.object({ id: z.string() }),
+  handler: async ({ id }) => ({ id, ok: true }),
+});
 
-## End-to-End: Running the Demo
+registerRenderToolCall({
+  name: "*", // wildcard renderer
+  args: z.any(),
+  component: MyToolCallRenderer,
+});
 
-From the repo root:
+registerHumanInTheLoop({
+  name: "approval",
+  description: "Request approval",
+  parameters: z.object({ reason: z.string() }),
+  component: ApprovalRenderer,
+});
+```
 
-1. **Install deps**: `pnpm install`
-2. **Start both demo server and Angular demo app**: pnpm build && pnpm demo:angular`
-   - Frontend: runs on http://localhost:4200
-   - Backend: runs on http://localhost:3001/api/copilotkit
-3. **Prerequisite**: Set `OPENAI_API_KEY` in `apps/angular/demo-server/.env` if using the OpenAI demo agent
+### Configure tools in `provideCopilotKit`
 
-## Building This Monorepo
+```ts
+provideCopilotKit({
+  licenseKey: "ck_pub_your_public_api_key",
+  frontendTools: [
+    /* FrontendToolConfig[] */
+  ],
+  renderToolCalls: [
+    /* RenderToolCallConfig[] */
+  ],
+  humanInTheLoop: [
+    /* HumanInTheLoopConfig[] */
+  ],
+  tools: [
+    /* ClientTool[] */
+  ],
+});
+```
 
-- **Full build**: `pnpm build` (compiles all packages including Angular)
-- **Clean**: `pnpm clean`
-- **Package-only dev (watch)**: `pnpm dev`
+`tools` are advertised to the runtime. If you include `renderer` + `parameters` on a `ClientTool`, CopilotKit will also register a renderer for tool calls.
 
-## Angular Storybook
+## `RenderToolCalls` component
 
-### Dev Server
+`RenderToolCalls` renders tool call components under an assistant message based on registered render configs.
 
-```bash
-pnpm storybook:angular
+```html
+<copilot-render-tool-calls
+  [message]="assistantMessage"
+  [messages]="messages"
+  [isLoading]="isRunning"
+></copilot-render-tool-calls>
 ```
 
-- Serves Storybook for Angular components on http://localhost:6007
-- For live chat stories, ensure the demo server is running so the chat can connect:
-  ```bash
-  pnpm --filter @copilotkitnext/angular-demo-server dev
-  ```
+Inputs:
 
-### Production Build
+- `message`: `AssistantMessage` (must include `toolCalls`)
+- `messages`: full `Message[]` list (used to find tool results)
+- `isLoading`: whether the agent is currently running
 
-```bash
-pnpm -C apps/angular/storybook build
-```
+Tool arguments are parsed with `partialJSONParse`, so incomplete JSON during streaming still renders.
+
+## Runtime notes
+
+- Set `runtimeUrl` to your CopilotKit runtime endpoint.
+- If you need to change runtime settings at runtime, call `CopilotKit.updateRuntime(...)`.
+- `runtimeTransport` supports `"rest"` or `"single"` (SSE single-stream transport).
 
-## Notes
+## Not documented here
 
-- Node 18+ and pnpm 9+ recommended
-- If using custom CORS or non-default ports, update `runtimeUrl` and server CORS settings accordingly
-- Styles must be included for proper rendering; if customizing CSS, prefer overriding classes instead of modifying the distributed CSS
+This package also exports a full set of chat UI components under `src/lib/components/chat`. Those APIs are intentionally omitted from this README.