# @copilotkitnext/angular 中文文档

规范地址：https://npmcn.com/package/%40copilotkitnext/angular/

版本：1\.54\.3
npm 元数据更新时间：2026-06-18T22:56:21.652Z
中文译文更新时间：2026-11-10T18:41:45.591Z
软件包许可：Commercial

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40copilotkitnext/angular
原文对照：https://npmcn.com/package/%40copilotkitnext/angular/?lang=original
项目主页：https://github.com/CopilotKit/CopilotKit#readme
源码仓库：https://github.com/CopilotKit/CopilotKit

弃用说明：Renamed to @copilotkit/angular\. Install @copilotkit/angular instead\.

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：3.9 MB，66 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：12 个
- peer 依赖：rxjs ^7\.8\.0，@angular/cdk ^19\.0\.0，@angular/core ^19\.0\.0，@angular/common ^19\.0\.0
- 首次发布：2025-09-03T09:19:20.744Z
- 最新版本发布：2026-04-10T23:50:25.556Z
- 近 30 天下载量：5551（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：218（近 12 个月 187 个）

## 中文简介

用于 CopilotKit 的角库

## 安装

```sh
npm install @copilotkitnext/angular
```

也可以使用：`pnpm add @copilotkitnext/angular`、`yarn add @copilotkitnext/angular`、`bun add @copilotkitnext/angular`

## README

# Angular 的副驾驶 Kit 软件

用于副驾驶Kit核心和AG-UI代理的角装订. 这个软件包为建筑定制,无头副驾驶UI提供服务,指令和公用事业.

## 安装

```bash
# npm
npm install @copilotkit/{core,angular}
```

-   `@angular/core` 财务报告和审定财务报表 `@angular/common` (19岁以上)
-   `@angular/cdk` (匹配您的角主)
-   `rxjs`

## 快开始

### (1) 提供副驾驶Kit

在应用程序配置中配置运行时间和工具 :

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

export const appConfig: ApplicationConfig = {
  providers: [
    provideCopilotKit({
      licenseKey: "ck_pub_your_public_api_key",
      runtimeUrl: "http://localhost:3001/api/copilotkit",
      headers: { Authorization: "Bearer ..." },
      properties: { app: "demo" },
    }),
  ],
};
```

### 2) 构建自定义用户界面 `injectAgentStore`

```ts
import { Component, inject, signal } from "@angular/core";
import { Message } from "@ag-ui/client";
import { CopilotKit, injectAgentStore } from "@copilotkit/angular";
import { randomUUID } from "@copilotkit/shared";

@Component({
  template: `
    @for (let message of messages(); track message.id) {
      <div>
        <em>{{ message.role }}</em>
        <p>{{ message.content }}</p>
      </div>
    }

    <input
      [value]="input()"
      (input)="input.set($any($event.target).value)"
      (keyup.enter)="send()"
    />
    <button (click)="send()" [disabled]="store().isRunning()">Send</button>
  `,
})
export class HeadlessChatComponent {
  readonly copilotKit = inject(CopilotKit);
  readonly store = injectAgentStore("default");
  readonly messages = this.store().messages;

  readonly input = signal("");

  async send() {
    const content = this.input().trim();
    if (!content) return;

    const agent = this.store().agent;

    agent.addMessage({
      id: randomUUID(),
      role: "user",
      content,
    });

    this.input.set("");

    await this.copilotKit.core.runAgent({ agent });
  }
}
```

这个 `agent` 是一个AG-UI `AbstractAgent`。请参考您的 AG-UI 代理执行 .

## 核心配置

### `CopilotKitConfig`

`provideCopilotKit` 接受一个 `CopilotKitConfig` 对象 :

```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[];
}
```

-   `runtimeUrl`: URL 到您的副驾驶 Kit 运行时间 .
-   `headers`: 发送到运行时间的默认信头 .
-   `licenseKey`:副驾驶云公用API密钥(`ck_pub_...`),根据要求 `provideCopilotKit`。 。 。 .
-   `properties`: 任意道具传输给代理运行.
-   `agents`: 本地、 浏览器代理按键 `agentId`。 。 。 .
-   `tools`: 向运行时间(无处理器)发布工具定义.
-   `renderToolCalls`: 在UI中提供工具调用组件.
-   `frontendTools`: 有处理器的客户端工具.
-   `humanInTheLoop`: 暂停用户输入的工具.

### 注射辅助器

-   `provideCopilotKit(config)`提供方 `CopilotKitConfig`。 。 。 .

## `CopilotKit` 服务

### 只读信号

-   `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[]>`

### 方法

-   `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`

### 高级

-   `core`: 基础 `CopilotKitCore` 举个例子.

## 探员

### `injectAgentStore`

```ts
const store = injectAgentStore("default");
// or: injectAgentStore(signal(agentId))
```

回返a `Signal<AgentStore>`。该商店揭露:

-   `agent`数字 : `AbstractAgent`
-   `messages`数字 : `Signal<Message[]>`
-   `state`数字 : `Signal<any>`
-   `isRunning`数字 : `Signal<boolean>`
-   `teardown()`: 清理订阅

如果该代理人无法在当地找到,但 `runtimeUrl` 在运行时间连接时创建代理代理。 如果代理仍然无法解决,则会抛出一个包含已配置的运行时间和已知代理ID的错误.

### `CopilotkitAgentFactory`

用于创建的先进工厂 `AgentStore` 信号 大部分应用程序应该使用 `injectAgentStore` 换句话说.

## 代理上下文

### `connectAgentContext`

连接 AG- UI 上下文到运行时间( 当效果被销毁时自动清理) :

```ts
import { connectAgentContext } from "@copilotkit/angular";

connectAgentContext({
  description: "User preferences",
  value: { theme: "dark" },
});
```

您必须在注入语境中(例如在组件构造器或 `runInInjectionContext`),或通过一个明确的 `Injector`数字 :

```ts
connectAgentContext(contextSignal, { injector });
```

## 工具和工具渲染

### 类型

```ts
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
}

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 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>>;
};
```

渲染器组件收到信号 :

```ts
export interface ToolRenderer<Args> {
  toolCall: Signal<AngularToolCall<Args>>;
}

export interface HumanInTheLoopToolRenderer<Args> {
  toolCall: Signal<HumanInTheLoopToolCall<Args>>; // includes respond(result)
}
```

`AngularToolCall` 编号 : `HumanInTheLoopToolCall` 曝光 `args`, (中文(简体) ), `status` (单位:千美元)`"in-progress" | "executing" | "complete"`),以及 `result`。 。 。 .

### 与 DI 注册工具

当当前注射上下文被销毁时, 这些帮助者自动移动工具 : 从注入语境(例如组件构建器、指令或 `runInInjectionContext`) (中文(简体) ).

```ts
import {
  registerFrontendTool,
  registerRenderToolCall,
  registerHumanInTheLoop,
} from "@copilotkit/angular";
import { z } from "zod";

registerFrontendTool({
  name: "lookup",
  description: "Fetch a record",
  parameters: z.object({ id: z.string() }),
  handler: async ({ id }) => ({ id, ok: true }),
});

registerRenderToolCall({
  name: "*", // wildcard renderer
  args: z.any(),
  component: MyToolCallRenderer,
});

registerHumanInTheLoop({
  name: "approval",
  description: "Request approval",
  parameters: z.object({ reason: z.string() }),
  component: ApprovalRenderer,
});
```

### 配置工具在 `provideCopilotKit`

```ts
provideCopilotKit({
  licenseKey: "ck_pub_your_public_api_key",
  frontendTools: [
    /* FrontendToolConfig[] */
  ],
  renderToolCalls: [
    /* RenderToolCallConfig[] */
  ],
  humanInTheLoop: [
    /* HumanInTheLoopConfig[] */
  ],
  tools: [
    /* ClientTool[] */
  ],
});
```

`tools` 发布到运行时间。 如果包含 `renderer` + 键 `parameters` 编号 `ClientTool`,CopilotKit也会注册一个工具调用渲染器.

## `RenderToolCalls` 组件

`RenderToolCalls` 将工具调用组件置于基于已注册的渲染配置的助理消息下.

```html
<copilot-render-tool-calls
  [message]="assistantMessage"
  [messages]="messages"
  [isLoading]="isRunning"
></copilot-render-tool-calls>
```

输入 :

-   `message`数字 : `AssistantMessage` (必须包括 `toolCalls`(中文(简体) )
-   `messages`: 满 `Message[]` 列表(用于查找工具结果)
-   `isLoading`: 代理正在运行中

工具参数用 `partialJSONParse`如此不完整的JSON 在流水中仍然会.

## 运行时间笔记

-   设定 `runtimeUrl` 到您的副驾驶 Kit 运行时间终点 .
-   如果您在运行时需要更改运行时间设置, 请打电话 `CopilotKit.updateRuntime(...)`。 。 。 .
-   `runtimeTransport` 支持 `"rest"` 或者说 `"single"` (SSE单流运输).

## 这里没有文件

此软件包还导出一组完整的聊天 UI 组件 `src/lib/components/chat`。这些API被有意省略出在本研究中.

## 常见问题

### @copilotkitnext/angular 是什么？

用于 CopilotKit 的角库注意：该包已被作者标记为弃用——Renamed to @copilotkit/angular\. Install @copilotkit/angular instead\.

### 如何安装 @copilotkitnext/angular？

在项目目录运行 npm install @copilotkitnext/angular，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：rxjs（^7\.8\.0）、@angular/cdk（^19\.0\.0）、@angular/core（^19\.0\.0）、@angular/common（^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @copilotkitnext/angular 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @copilotkitnext/angular 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @copilotkitnext/angular 可以商用吗？

@copilotkitnext/angular 使用 Commercial 许可。声明的许可为 Commercial，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。

### @copilotkitnext/angular 的下载量有多少？

根据 npm 官方下载统计，@copilotkitnext/angular 在 2026/10/11 – 2026/11/09 这 30 天内被下载 5,551 次，日均约 185 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @copilotkitnext/angular 还在维护吗？

最新版本 1\.54\.3 发布于 2026/04/11（6 个月前）；至今共发布 218 个版本，其中过去 12 个月发布了 187 个；首次发布于 2025/09/03。作者已将其标记为弃用，新项目建议寻找替代方案。