$npx -y skills add TencentCloudBase/cloudbase-skills --skill tsBuild and deploy AI agents with Cloudbase Agent (TypeScript), a TypeScript SDK implementing the AG-UI protocol. Use when: (1) deploying agent servers with @cloudbase/agent-server, (2) using LangGraph adapter with ClientStateAnnotation, (3) using LangChain adapter with clientTools
| 1 | # Cloudbase Agent (TypeScript) |
| 2 | |
| 3 | TypeScript SDK for deploying AI agents as HTTP services using the AG-UI protocol. |
| 4 | |
| 5 | > **Note:** This skill is for **TypeScript/JavaScript** projects only. |
| 6 | |
| 7 | ## When to use this skill |
| 8 | |
| 9 | Use this skill for **AI agent development** when you need to: |
| 10 | |
| 11 | - Deploy AI agents as HTTP services with AG-UI protocol support |
| 12 | - Build agent backends using LangGraph or LangChain frameworks |
| 13 | - Create custom agent adapters implementing the AbstractAgent interface |
| 14 | - Understand AG-UI protocol events and message streaming |
| 15 | - Build web UI clients that connect to AG-UI compatible agents |
| 16 | - Build WeChat Mini Program UIs for AI agent interactions |
| 17 | |
| 18 | **Do NOT use for:** |
| 19 | - Simple AI model calling without agent capabilities (use `ai-model-*` skills) |
| 20 | - CloudBase cloud functions (use `cloud-functions` skill) |
| 21 | - CloudRun backend services without agent features (use `cloudrun-development` skill) |
| 22 | |
| 23 | ## How to use this skill (for a coding agent) |
| 24 | |
| 25 | 1. **Choose the right adapter** |
| 26 | - Use LangGraph adapter for stateful, graph-based workflows |
| 27 | - Use LangChain adapter for chain-based agent patterns |
| 28 | - Build custom adapter for specialized agent logic |
| 29 | |
| 30 | 2. **Deploy the agent server** |
| 31 | - Use `@cloudbase/agent-server` to expose HTTP endpoints |
| 32 | - Configure CORS, logging, and observability as needed |
| 33 | - **Prefer deploying to CloudBase using `manageAgent` MCP tool** (see [agent-deployment](agent-deployment.md)) |
| 34 | - **Before deploy, read Dependency Alignment Policy in [agent-deployment](agent-deployment.md) to avoid cloud build dependency errors** |
| 35 | |
| 36 | 3. **Build the UI client** |
| 37 | - Use `@ag-ui/client` for web applications |
| 38 | - Use `@cloudbase/agent-ui-miniprogram` for WeChat Mini Programs |
| 39 | - Connect to the agent server's `/send-message` or `/agui` endpoints |
| 40 | |
| 41 | 4. **Follow the routing table below** to find detailed documentation for each task |
| 42 | |
| 43 | ## Routing |
| 44 | |
| 45 | | Task | Read | |
| 46 | |------|------| |
| 47 | | Deploy agent to CloudBase (**read this first**) | [agent-deployment](agent-deployment.md) | |
| 48 | | Deploy agent server (@cloudbase/agent-server) | [server-quickstart](server-quickstart.md) | |
| 49 | | Use LangGraph adapter | [adapter-langgraph](adapter-langgraph.md) | |
| 50 | | Use LangChain adapter | [adapter-langchain](adapter-langchain.md) | |
| 51 | | Build custom adapter | [adapter-development](adapter-development.md) | |
| 52 | | Understand AG-UI protocol | [agui-protocol](agui-protocol.md) | |
| 53 | | Build UI client (Web or Mini Program) | [ui-clients](ui-clients.md) | |
| 54 | | Deep-dive @cloudbase/agent-ui-miniprogram | [ui-miniprogram](ui-miniprogram.md) | |
| 55 | |
| 56 | ## Quick Start |
| 57 | |
| 58 | **Prerequisites:** Node.js >= 20 is required. |
| 59 | |
| 60 | **1. Install dependencies:** |
| 61 | |
| 62 | ```bash |
| 63 | npm install @cloudbase/agent-server@latest @cloudbase/agent-adapter-langgraph@latest |
| 64 | ``` |
| 65 | |
| 66 | **Critical:** Always use `@latest` for all `@cloudbase/agent-*` packages. For dependency version rules, see [Dependency Alignment Policy](agent-deployment.md#dependency-alignment-policy-critical) in agent-deployment.md. |
| 67 | |
| 68 | **2. Create and run your agent:** |
| 69 | |
| 70 | ```typescript |
| 71 | import { run } from "@cloudbase/agent-server"; |
| 72 | import { LanggraphAgent } from "@cloudbase/agent-adapter-langgraph"; |
| 73 | |
| 74 | run({ |
| 75 | createAgent: () => ({ agent: new LanggraphAgent({ workflow }) }), |
| 76 | port: 9000, |
| 77 | }); |
| 78 | ``` |