跳到主要内容

不只调用模型,
交付真正可用的 Agent。

接入混元、DeepSeek 等模型,用 agent-server 编排工具与状态,再通过 AG-UI 把流式交互送到 Web、小程序和业务应用。

Model · Agent · AG-UI
agent / support-copilotstreaming
Customer Copilot
user帮我查一下订单 TCB-0714 的配送状态。
assistant · thinking我会先读取订单,再查询关联的物流单。
TOOL TRACEAG-UI events
01query_orderdone
02get_shipmentdone
03render_tracking_cardclient tool
assistant · final订单已经从上海发出,当前正在送往分拨中心。
From prompt to product

模型、工具和界面共享一条事件流

Agent 执行过程中产生的文本、工具调用和状态变化,通过 AG-UI 逐步交付给客户端,而不是等最后一段文本。

agent delivery pathag-ui connected
01 · Model

理解与生成

混元 · DeepSeek · 兼容接口

02 · Agent

推理与调用工具

agent-server · Framework adapter

03 · UI

流式交付到业务端

AG-UI · React · 小程序

eventpayloadstate
RUN_STARTEDthread_42received
TOOL_CALL_ENDget_shipmentrendered
RUN_FINISHEDmessage_18complete

从模型 API 到可用的 Agent 产品

模型只是起点;运行协议、业务工具、知识数据和用户界面共同决定最终体验。

01

托管模型接入

通过统一 SDK 调用混元、DeepSeek 等模型,也可以使用 OpenAI / Anthropic 兼容入口接入既有工具链。

MODEL API
02

流式输出与工具调用

generateText 处理一次性生成,streamText 交付增量文本,Function Tool 把模型连接到业务动作。

STREAM / TOOL
03

Agent Server 与 AG-UI

将 LangChain、LangGraph、CrewAI 等框架适配为 AG-UI 服务,统一消息、状态与工具事件。

AGENT SERVER
04

多端 Agent UI

React 与小程序侧组件负责渲染消息、思考过程和工具调用,也可以基于 Core 层自定义界面。

AGENT UI
05

PostgreSQL 向量基础

在 PG 模式中使用 pgvector、vectorscale 与中文分词扩展,自行组织检索和 RAG 数据链路。

VECTOR
06

AI Builder 与 ToolKit

通过自然语言生成应用,或让支持 MCP / Skill 的开发工具管理 CloudBase 资源与开发流程。

BUILD WITH AI
AI 应用的产品感,不来自多一个聊天框,而来自模型能调用真实业务能力,并让过程在界面上可理解。
产品设计原则
Protocol over coupling

用 AG-UI 解耦 Agent 框架与业务界面

后端可以更换 Agent 框架,前端继续消费统一事件;客户端工具还能把业务 UI 带回执行环。

查看 AG-UI 协议
AGENT DELIVERY
protocolAG-UI / SSE
runtimeagent-server
webReact Core / UI
wechat小程序组件

先接模型,再把 Agent 与界面接通

示例使用仓内当前 SDK、agent-server 与 React UI 文档,不再出现竞品模型误写。

Managed model

在服务端流式调用托管模型

Node SDK 通过 cloudbase 模型组生成文本;具体模型与资源开通状态以开发平台为准。

  • generateText 返回完整结果
  • streamText 提供异步文本流
  • 模型名称由应用配置管理
stream-model.js
const tcb = require('@cloudbase/node-sdk')

const app = tcb.init({
  env: '<envId>',
  timeout: 60000
})

const model = app.ai().createModel('cloudbase')
const result = await model.streamText({
  model: 'hy3-preview',
  messages: [
    { role: 'user', content: '总结这份周报' }
  ]
})

for await (const text of result.textStream) {
  process.stdout.write(text)
}
Agent server

把 Agent 包装成 AG-UI HTTP 服务

agent-server 提供 Express 路由,适配器把框架 Agent 的消息与工具事件转换为统一协议。

  • 支持 TypeScript 与 Python 服务端
  • 框架逻辑和协议交付分离
  • 适合部署到 CloudRun
agent-server.ts
import express from 'express'
import { createExpressRoutes }
  from '@cloudbase/agent-server'
import { LangchainAgent }
  from '@cloudbase/agent-adapter-langchain'
import { createAgent as createGraph }
  from './agent.js'

const app = express()

createExpressRoutes({
  express: app,
  createAgent: () => ({
    agent: new LangchainAgent({
      agent: createGraph()
    })
  })
})

app.listen(9000)
React delivery

用 Transport 把业务端连接到 Agent

React Core 管理协议和状态,UI 组件提供开箱即用的消息、工具调用与输入区域。

  • CloudBaseTransport 连接指定 Agent
  • 内置中文与英文界面文案
  • 可下沉到 Core 层完全自定义 UI
assistant.tsx
import { AgKit, CloudBaseTransport }
  from '@ag-kit/react-core'
import { AgKitUI }
  from '@cloudbase/agent-react-ui'

const transport = new CloudBaseTransport({
  app,
  agentId: '<agent-id>'
})

export function Assistant() {
  return (
    <AgKit transport={transport}>
      <AgKitUI
        locale="zh-CN"
        inputPlaceholder="问我任何问题"
      />
    </AgKit>
  )
}
AI ecosystem

模型、框架、数据与开发工具组合使用

保留熟悉的 Agent 框架,把部署、协议和 CloudBase 资源连接起来。

01

模型层

托管模型与 OpenAI / Anthropic 兼容接口。

02

Agent 层

LangChain、LangGraph、CrewAI 与自定义适配。

03

交付层

React、小程序、AI Builder 与 MCP 工具。

混元DeepSeekstreamTextFunction Toolagent-serverAG-UILangChainLangGraphCrewAIAgent UIpgvectorvectorscaleAI BuilderMCPSkill
Build an AI product

让模型进入业务,而不只停在 Playground

选择模型,连接一个真实工具,再把执行过程交付到用户界面。