Threadplane：让 Angular 项目直接拥有 AI Agent 对话界面

一款专门为 Angular 开发者打造的 AI Agent UI 框架，把 LangGraph 的流式对话能力直接接进 Angular 组件。

背景故事：当 Angular 开发者想接 AI Agent 时，发现全是 React 的天下

2024 年开始，AI Agent 赛道大爆发，LangGraph、AutoGen、CrewAI 等框架相继走红。但这些框架的官方 UI 层几乎清一色基于 React 构建——useStream() 钩子、React 状态、JSX 组件……Angular 开发者想在自家产品里加一个 AI 对话功能，要么自己从零造轮子，要么硬着头皮在 Angular 里塞 React 微前端。

Brian Love（cacheplane）注意到了这个空白。他在 2026 年 3 月启动了 Threadplane 项目，目标很明确：不做 React 的 Angular 移植版，而是真正用 Angular 的方式去设计 Agent UI。核心设计理念是：AI Agent 的流式状态应该以 Angular Signals 的形式暴露，而不是 React Hooks。

想象一下：在 Angular 组件里，chat.messages() 和 chat.status() 直接返回 Signal，模板里写 {{ chat.messages().length }} 就能拿到最新消息数——不需要 async 管道，不需要订阅，不用 zone.js。这才是 Angular 原生的体验。

项目于 2026 年 3 月 18 日开源，截至分析日（2026-08-09）已收获 79 stars、7 forks，Issues 为 0（社区反馈积极），最新提交就在今日。

核心功能：用 Angular 的方式驱动 AI 对话流

1. `injectAgent()` — Angular 版的 `useStream()`

Threadplane 的核心 API 是 injectAgent()，这是对标 LangGraph React SDK 中 useStream() 钩子的 Angular 原生实现。两者的设计哲学完全一致，但实现路径不同：

能力	React `useStream()`	Angular `injectAgent()`
消息列表	React state `messages`	Angular Signal `messages()`
加载状态	`isLoading` state	Signal `isLoading()`
运行状态	分散	Signal `status()` — `'idle' \| 'running' \| 'error'`
中断/人机协作	`interrupt`	`interrupt()`（运行时中立）+ `langGraphInterrupts()`
工具调用进度	`toolCalls`	Signal `toolCalls()`
分支/历史	`branch` / `history`	Signal `branch()` / `history()`
停止生成	`stop()`	`stop()`
重新生成	—	`regenerate(assistantMessageIndex)`
子 Agent	辅助方法	Signal `subagents()` — `Map<string, Subagent>`

配置方式极为简洁：

// app.config.ts — 一次配置，全局注入
import { provideAgent } from '@threadplane/langgraph';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAgent({
      apiUrl: 'https://your-langgraph-platform.com',
      assistantId: 'my-agent',
    }),
  ],
};

// 任意组件中直接注入使用
@Component({ selector: 'app-support-chat', imports: [ThreadplaneChatComponent], template: `
  <chat [agent]="chat" />
  <button (click)="send()">Send</button>
` })
export class SupportChatComponent {
  protected readonly chat = injectAgent();
  send() { void this.chat.submit({ message: 'Hello' }); }
}

2. 适配层架构：运行时中立，同一套 UI 换不同后端

Threadplane 最有价值的设计是 适配层分离。整个框架分为三层：

UI 层：@threadplane/chat 消费通用的 Agent 接口，不关心后端是什么
适配层：
- @threadplane/langgraph — 适配 LangGraph Platform
- @threadplane/ag-ui — 适配 AG-UI 协议（任何兼容 @ag-ui/client 的后端）
传输层：@threadplane/a2ui 解析 A2UI 协议（Angular-to-Angular UI 协议），纯 TypeScript，无 Angular 依赖

这意味着：切换后端只需要换 provideAgent() 的实现，聊天组件和模板完全不用改。对于需要同时支持多个 AI 后端的项目，这个设计非常优雅。

3. 生成式 UI（GenUI）：服务端吐 JSON，Angular 动态渲染

@threadplane/render 基于 @json-render/core，能将 AI 服务端返回的 JSON 规格动态渲染为 Angular 组件。这意味着 AI 模型可以直接"控制"界面——比如模型返回 {"type":"chart","data":[...]}，前端立刻渲染一个图表组件，完全无需提前预定义。

4. 许可证分层：开源与商业的边界

包	许可证	说明
`@threadplane/chat`	PolyForm Noncommercial + Commercial 双许可	个人/开源免费，商业需授权
`@threadplane/langgraph`	MIT	可自由使用
`@threadplane/ag-ui`	MIT	可自由使用
`@threadplane/render`	MIT	可自由使用
`@threadplane/a2ui`	MIT	可自由使用
`@threadplane/licensing`	MIT	浏览器端 Ed25519 许可证验证

技术架构：Nx 单仓管理下的 Angular 包矩阵

Threadplane 采用 Nx monorepo 架构，主包根目录包含 19 个 library 包和 3 个应用：

Library 包（核心）：

libs/chat — 核心聊天 UI 组件（<chat>、sidebar、popup、interrupt 机制）
libs/langgraph — LangGraph 适配器（provideAgent + injectAgent）
libs/ag-ui — AG-UI 协议适配器
libs/a2ui — A2UI 协议解析器（纯 TypeScript，无 Angular 依赖）
libs/render — JSON→Angular 组件动态渲染引擎
libs/ui-react — React 兼容层（@threadplane/chat 居然也支持 React）
libs/cockpit-ui / libs/cockpit-shell — 高级管理界面组件
libs/telemetry — 可关闭的匿名使用统计（Node + Browser 双端）
libs/licensing — Ed25519 浏览器端许可证验证
libs/db — Drizzle ORM + Neon Postgres 数据库层
libs/design-tokens — 设计 Token 系统
libs/example-layouts — 布局示例

应用：

apps/cockpit — Threadplane 自用的管理后台（Next.js + React）
apps/minting-service — 许可证 minting 服务
apps/website — 官方文档站（Next.js + MDX）

技术栈一览：

Angular 20+ / Angular CDK ~21.1
Nx 22.5.4（Monorepo 管理）
@langchain/core ^1.1.33 + @langchain/langgraph-sdk ^1.7.4
@ag-ui/client ^0.0.52
RxJS ~7.8.0（Angular 响应式基础设施）
Next.js ~16.1.6（文档站和 cockpit 管理界面）
Drizzle ORM + Neon Postgres（数据库）
Stripe（商业许可支付）
Upstash Redis（速率限制）
@noble/ed25519（许可证加密验证）
ESLint + Prettier（代码质量）

上手门槛：Angular 开发者几乎没有学习曲线

优点：

安装简单：npm install @threadplane/langgraph @threadplane/chat，符合 Angular 生态直觉
API 设计与 Angular 习惯高度一致，Signal-first 设计充分利用 Angular 20+ 的新特性
TypeScript 100%，类型安全
每个 PR 对所有包运行 CI 测试，使用 MockAgentTransport 隔离测试，不需要 mock injectAgent()
发布策略保守：0.0.x patch-only，不会在半夜更新 lockfile 时突然引入 breaking change

缺点：

强制依赖 Angular 20+，老项目升级成本高
@threadplane/chat 有商业许可证限制，免费版仅限非商业用途
没有容器化支持：无 Dockerfile、无 docker-compose、无 K8s manifest
官方 demo 依赖 LangGraph Platform 云端 API，本地运行需要自行搭建 LangGraph 服务端
项目还处于非常早期的 0.0.x 版本，API 稳定性存疑

局限与争议

Angular 生态的局限性：Angular 社区相对 React 较小，Threadplane 的社区增长很大程度上取决于 Angular 开发者对 AI Agent 的需求强度
商业许可证风险：@threadplane/chat 的双许可模式意味着在商业产品中使用该包的 UI 组件可能需要付费
强耦合 Angular 版本：锁定 Angular 20+，Angular 未来版本升级路径存在不确定性
服务端渲染（SSR）限制：当前方案仅支持客户端，Angular SSR / Server Components 场景暂无官方支持

行业意义：填补 Angular 生态的 AI Agent UI 空白

随着 AI Agent 在企业应用中的渗透，越来越多的产品需要在已有的 Web 产品中集成 AI 对话界面。对于 已经重度使用 Angular 的团队（金融、企业 SaaS、政府系统），Threadplane 几乎是目前唯一的选择——它的 injectAgent() 设计让 Angular 开发者不需要学习 React 生态，就能获得与 LangGraph 官方 SDK 能力对等的流式对话体验。

更重要的是，适配层分离的架构让项目不绑定任何特定 AI 服务商——今天接 LangGraph，明天换 AG-UI 后端，UI 层完全不变。这是 Threadplane 相比其他简单封装方案最核心的竞争力。

目前 stars 79，fork 7，0 Issues，仍处于项目早期。随着 Angular 22+ 发布和 AI Agent 需求的持续增长，这个项目的上升空间值得关注。

快速开始

# 安装依赖
npm install @threadplane/langgraph @threadplane/chat

# Angular 20+ 项目中配置
# 1. app.config.ts 中注册 provideAgent
# 2. 任意组件中 injectAgent() 并绑定 <chat> 组件
# 3. 对接 LangGraph Platform 或 AG-UI 后端

# 本地开发
npm install            # 根目录安装
npm run generate-docs  # 生成文档

Threadplane：让 Angular 项目直接拥有 AI Agent 对话界面

一款专门为 Angular 开发者打造的 AI Agent UI 框架，把 LangGraph 的流式对话能力直接接进 Angular 组件。

背景故事：当 Angular 开发者想接 AI Agent 时，发现全是 React 的天下

想象一下：在 Angular 组件里，chat.messages() 和 chat.status() 直接返回 Signal，模板里写 {{ chat.messages().length }} 就能拿到最新消息数——不需要 async 管道，不需要订阅，不用 zone.js。这才是 Angular 原生的体验。

项目于 2026 年 3 月 18 日开源，截至分析日（2026-08-09）已收获 79 stars、7 forks，Issues 为 0（社区反馈积极），最新提交就在今日。

核心功能：用 Angular 的方式驱动 AI 对话流

1. `injectAgent()` — Angular 版的 `useStream()`

Threadplane 的核心 API 是 injectAgent()，这是对标 LangGraph React SDK 中 useStream() 钩子的 Angular 原生实现。两者的设计哲学完全一致，但实现路径不同：

能力	React `useStream()`	Angular `injectAgent()`
消息列表	React state `messages`	Angular Signal `messages()`
加载状态	`isLoading` state	Signal `isLoading()`
运行状态	分散	Signal `status()` — `'idle' \| 'running' \| 'error'`
中断/人机协作	`interrupt`	`interrupt()`（运行时中立）+ `langGraphInterrupts()`
工具调用进度	`toolCalls`	Signal `toolCalls()`
分支/历史	`branch` / `history`	Signal `branch()` / `history()`
停止生成	`stop()`	`stop()`
重新生成	—	`regenerate(assistantMessageIndex)`
子 Agent	辅助方法	Signal `subagents()` — `Map<string, Subagent>`

配置方式极为简洁：

// app.config.ts — 一次配置，全局注入
import { provideAgent } from '@threadplane/langgraph';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAgent({
      apiUrl: 'https://your-langgraph-platform.com',
      assistantId: 'my-agent',
    }),
  ],
};

// 任意组件中直接注入使用
@Component({ selector: 'app-support-chat', imports: [ThreadplaneChatComponent], template: `
  <chat [agent]="chat" />
  <button (click)="send()">Send</button>
` })
export class SupportChatComponent {
  protected readonly chat = injectAgent();
  send() { void this.chat.submit({ message: 'Hello' }); }
}

2. 适配层架构：运行时中立，同一套 UI 换不同后端

Threadplane 最有价值的设计是 适配层分离。整个框架分为三层：

UI 层：@threadplane/chat 消费通用的 Agent 接口，不关心后端是什么
适配层：
- @threadplane/langgraph — 适配 LangGraph Platform
- @threadplane/ag-ui — 适配 AG-UI 协议（任何兼容 @ag-ui/client 的后端）
传输层：@threadplane/a2ui 解析 A2UI 协议（Angular-to-Angular UI 协议），纯 TypeScript，无 Angular 依赖

这意味着：切换后端只需要换 provideAgent() 的实现，聊天组件和模板完全不用改。对于需要同时支持多个 AI 后端的项目，这个设计非常优雅。

3. 生成式 UI（GenUI）：服务端吐 JSON，Angular 动态渲染

4. 许可证分层：开源与商业的边界

包	许可证	说明
`@threadplane/chat`	PolyForm Noncommercial + Commercial 双许可	个人/开源免费，商业需授权
`@threadplane/langgraph`	MIT	可自由使用
`@threadplane/ag-ui`	MIT	可自由使用
`@threadplane/render`	MIT	可自由使用
`@threadplane/a2ui`	MIT	可自由使用
`@threadplane/licensing`	MIT	浏览器端 Ed25519 许可证验证

技术架构：Nx 单仓管理下的 Angular 包矩阵

Threadplane 采用 Nx monorepo 架构，主包根目录包含 19 个 library 包和 3 个应用：

Library 包（核心）：

libs/chat — 核心聊天 UI 组件（<chat>、sidebar、popup、interrupt 机制）
libs/langgraph — LangGraph 适配器（provideAgent + injectAgent）
libs/ag-ui — AG-UI 协议适配器
libs/a2ui — A2UI 协议解析器（纯 TypeScript，无 Angular 依赖）
libs/render — JSON→Angular 组件动态渲染引擎
libs/ui-react — React 兼容层（@threadplane/chat 居然也支持 React）
libs/cockpit-ui / libs/cockpit-shell — 高级管理界面组件
libs/telemetry — 可关闭的匿名使用统计（Node + Browser 双端）
libs/licensing — Ed25519 浏览器端许可证验证
libs/db — Drizzle ORM + Neon Postgres 数据库层
libs/design-tokens — 设计 Token 系统
libs/example-layouts — 布局示例

应用：

apps/cockpit — Threadplane 自用的管理后台（Next.js + React）
apps/minting-service — 许可证 minting 服务
apps/website — 官方文档站（Next.js + MDX）

技术栈一览：

Angular 20+ / Angular CDK ~21.1
Nx 22.5.4（Monorepo 管理）
@langchain/core ^1.1.33 + @langchain/langgraph-sdk ^1.7.4
@ag-ui/client ^0.0.52
RxJS ~7.8.0（Angular 响应式基础设施）
Next.js ~16.1.6（文档站和 cockpit 管理界面）
Drizzle ORM + Neon Postgres（数据库）
Stripe（商业许可支付）
Upstash Redis（速率限制）
@noble/ed25519（许可证加密验证）
ESLint + Prettier（代码质量）

上手门槛：Angular 开发者几乎没有学习曲线

优点：

安装简单：npm install @threadplane/langgraph @threadplane/chat，符合 Angular 生态直觉
API 设计与 Angular 习惯高度一致，Signal-first 设计充分利用 Angular 20+ 的新特性
TypeScript 100%，类型安全
每个 PR 对所有包运行 CI 测试，使用 MockAgentTransport 隔离测试，不需要 mock injectAgent()
发布策略保守：0.0.x patch-only，不会在半夜更新 lockfile 时突然引入 breaking change

缺点：

强制依赖 Angular 20+，老项目升级成本高
@threadplane/chat 有商业许可证限制，免费版仅限非商业用途
没有容器化支持：无 Dockerfile、无 docker-compose、无 K8s manifest
官方 demo 依赖 LangGraph Platform 云端 API，本地运行需要自行搭建 LangGraph 服务端
项目还处于非常早期的 0.0.x 版本，API 稳定性存疑

局限与争议

Angular 生态的局限性：Angular 社区相对 React 较小，Threadplane 的社区增长很大程度上取决于 Angular 开发者对 AI Agent 的需求强度
商业许可证风险：@threadplane/chat 的双许可模式意味着在商业产品中使用该包的 UI 组件可能需要付费
强耦合 Angular 版本：锁定 Angular 20+，Angular 未来版本升级路径存在不确定性
服务端渲染（SSR）限制：当前方案仅支持客户端，Angular SSR / Server Components 场景暂无官方支持

行业意义：填补 Angular 生态的 AI Agent UI 空白

目前 stars 79，fork 7，0 Issues，仍处于项目早期。随着 Angular 22+ 发布和 AI Agent 需求的持续增长，这个项目的上升空间值得关注。

快速开始

# 安装依赖
npm install @threadplane/langgraph @threadplane/chat

# Angular 20+ 项目中配置
# 1. app.config.ts 中注册 provideAgent
# 2. 任意组件中 injectAgent() 并绑定 <chat> 组件
# 3. 对接 LangGraph Platform 或 AG-UI 后端

# 本地开发
npm install            # 根目录安装
npm run generate-docs  # 生成文档

Threadplane：让 Angular 项目直接拥有 AI Agent 对话界面

一款专门为 Angular 开发者打造的 AI Agent UI 框架，把 LangGraph 的流式对话能力直接接进 Angular 组件。

背景故事：当 Angular 开发者想接 AI Agent 时，发现全是 React 的天下

核心功能：用 Angular 的方式驱动 AI 对话流

1. injectAgent() — Angular 版的 useStream()

2. 适配层架构：运行时中立，同一套 UI 换不同后端

3. 生成式 UI（GenUI）：服务端吐 JSON，Angular 动态渲染

4. 许可证分层：开源与商业的边界

技术架构：Nx 单仓管理下的 Angular 包矩阵

上手门槛：Angular 开发者几乎没有学习曲线

局限与争议

行业意义：填补 Angular 生态的 AI Agent UI 空白

快速开始

Threadplane：让 Angular 项目直接拥有 AI Agent 对话界面

一款专门为 Angular 开发者打造的 AI Agent UI 框架，把 LangGraph 的流式对话能力直接接进 Angular 组件。

背景故事：当 Angular 开发者想接 AI Agent 时，发现全是 React 的天下

核心功能：用 Angular 的方式驱动 AI 对话流

1. injectAgent() — Angular 版的 useStream()

2. 适配层架构：运行时中立，同一套 UI 换不同后端

3. 生成式 UI（GenUI）：服务端吐 JSON，Angular 动态渲染

4. 许可证分层：开源与商业的边界

技术架构：Nx 单仓管理下的 Angular 包矩阵

上手门槛：Angular 开发者几乎没有学习曲线

局限与争议

行业意义：填补 Angular 生态的 AI Agent UI 空白

快速开始

1. `injectAgent()` — Angular 版的 `useStream()`

1. `injectAgent()` — Angular 版的 `useStream()`