@copilotkitnext/angular

中文文档

1.54.3发布于 2026/04/11CommercialTypeScriptES Module近 30 天下载 5551

用于 CopilotKit 的角库

此软件包已被标记为弃用

Renamed to @copilotkit/angular. Install @copilotkit/angular instead.

文档目录23 节

安装
快开始
(1) 提供副驾驶Kit
2) 构建自定义用户界面 injectAgentStore
核心配置
CopilotKitConfig
注射辅助器
CopilotKit 服务
只读信号
方法
高级
探员
injectAgentStore
CopilotkitAgentFactory
代理上下文
connectAgentContext
工具和工具渲染
类型
与 DI 注册工具
配置工具在 provideCopilotKit
RenderToolCalls 组件
运行时间笔记
这里没有文件

Angular 的副驾驶 Kit 软件

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

安装

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

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

快开始

(1) 提供副驾驶Kit

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

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`

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 对象 :

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`

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 上下文到运行时间( 当效果被销毁时自动清理) :

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

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

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

connectAgentContext(contextSignal, { injector });

工具和工具渲染

类型

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

渲染器组件收到信号 :

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) (中文(简体) ).

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`

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

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

`RenderToolCalls` 组件

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

<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 共发布 218 个版本，首次发布于 2025/09/03；过去 12 个月发布了 187 个版本。

版本	发布日期	距今
`1.54.3`latest	2026/04/11	6 个月前
`1.54.3-next.1`next	2026/04/11	7 个月前
`1.54.3-next.0`	2026/04/10	7 个月前
`1.54.2`	2026/04/09	7 个月前
`1.54.2-next.0`	2026/04/09	7 个月前
`0.0.0-a2ui-v0-9-latest-20260408115931`pr	2026/04/08	7 个月前

其他发布通道：alpha → 0.0.34-alpha.0，pr → 0.0.0-a2ui-v0-9-latest-20260408115931，next → 1.54.3-next.1。

关于 @copilotkitnext/angular 的常见问题

@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。作者已将其标记为弃用，新项目建议寻找替代方案。

npm install @copilotkitnext/angular

pnpmpnpm add @copilotkitnext/angular
yarnyarn add @copilotkitnext/angular
bunbun add @copilotkitnext/angular

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 需手动安装。

在你的项目目录中运行此命令。

近 30 天下载

5,551

约 5551 次日均 185 次

统计周期 2026/10/11 – 2026/11/09
数据来自 npm 官方下载统计，今天更新

最新版本1.54.3发布于 6 个月前

开源许可Commercial其他许可

包体积3.9 MB66 个文件 · 解压后

运行依赖12 个另有 4 个 peer 依赖

模块格式ES Module

TypeScript自带类型

发布版本218 个近 12 个月 187 个

首次发布2025/09/031.2 年前

元数据更新2026/06/19

每一个软件包背后，
都有分享与创造的人。