Skip to content

Commit 752573c

Browse files
D-K-PTrigger.dev RepoOps
authored andcommitted
docs: rework the intro, agent anatomy page, and AI agent examples
## Docs: intro rework, agent anatomy rewrite, and more AI agent examples - **Introduction.** Reworked the docs landing page to lead with AI agents and workflows: a cleaner hero, a core concepts section, and short sections for building agents, scaling and scheduling, and self hosting. Corrected the licensing wording and refreshed the card styling. - **Anatomy of an agent.** Rewrote the page so it teaches the three parts of a chat agent (the agent task, the durable session, and the frontend transport) and traces a single message through them, instead of only linking out to other pages. - **AI agent examples.** Added more example projects to the AI agents overview: an ElevenLabs voice agent, the ask Trigger chat agent, a batch LLM evaluator, and a Claude thinking chatbot. Mono-RevId: fb6db42f103bdc6d35af62163ee33427fb67211d
1 parent 33cf570 commit 752573c

3 files changed

Lines changed: 134 additions & 176 deletions

File tree

docs/ai-chat/anatomy.mdx

Lines changed: 44 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
---
22
title: "Anatomy of an agent"
33
sidebarTitle: "Anatomy"
4-
description: "The moving parts of a chat agent — the agent task, the session, the frontend transport — and which page covers each."
4+
description: "The three parts of a chat agent — the agent task that runs the turn loop, the durable session that carries messages, and the frontend transport — what each does and where it's documented."
55
---
66

7-
**A chat agent is three parts: a long-lived agent task that runs the turn loop, a durable Session carrying messages in and the response stream out, and a frontend transport that plugs the session into `useChat`.** The pages in this section each own one part of that picture. This page is the map — if you'd rather read mechanics end to end, skip to [How it works](/ai-chat/how-it-works).
7+
**A chat agent is three parts: an agent task that runs the turn loop, a durable session that carries messages in and streams the response out, and a frontend transport that connects the session to `useChat`.** This page is your map of the Building agents section — what each part does, how a single message flows through them, and which page to open next.
88

99
```mermaid
1010
flowchart LR
@@ -14,7 +14,33 @@ flowchart LR
1414
OUT -- "streamed response" --> FE
1515
```
1616

17-
Everything below maps onto one annotated agent:
17+
## Follow one message
18+
19+
A single turn moves through all three parts in order:
20+
21+
1. The **frontend transport** sends the user's message to the session's inbound stream (`.in`).
22+
2. The **agent task** wakes on the new message, runs your turn loop, and streams the model's response into the session's outbound stream (`.out`).
23+
3. The **frontend transport** reads `.out` and renders tokens into `useChat` as they arrive.
24+
25+
The session sits in the middle so both sides never have to be online at the same moment — the task keeps writing to `.out` even if the browser reloads mid-stream.
26+
27+
## The three parts
28+
29+
### The agent task
30+
31+
`chat.agent()` is the code you write: a long-lived agent whose `run` function is the turn loop. Messages arrive accumulated, you call `streamText`, and the returned stream is piped back to the frontend for you. [Tools](/ai-chat/tools) the model can call and [lifecycle hooks](/ai-chat/lifecycle-hooks) that fire around each turn both hang off the same config. See [Backend](/ai-chat/backend) for the full `chat.agent()` surface.
32+
33+
### The session
34+
35+
The conversation lives in a [session](/ai-chat/sessions), not in the task's memory: a pair of durable streams — `.in` and `.out` — keyed on your `chatId`. Because the session is durable, a conversation survives page refreshes, deploys, and the run boundaries between turns. The task can restart and pick up the same session. [How it works](/ai-chat/how-it-works) covers the mechanics of what survives and why.
36+
37+
### The frontend transport
38+
39+
One hook — `useTriggerChatTransport` — connects the Vercel AI SDK's `useChat` to the agent's session. There are no API routes to write: the transport talks to the session directly using a scoped token. See [Frontend](/ai-chat/frontend) for wiring, tokens, and starting sessions.
40+
41+
## An annotated agent
42+
43+
Everything above maps onto one task:
1844

1945
```ts trigger/my-agent.ts
2046
import { chat } from "@trigger.dev/sdk/ai";
@@ -24,18 +50,18 @@ import { anthropic } from "@ai-sdk/anthropic";
2450
export const myAgent = chat.agent({
2551
id: "my-agent",
2652

27-
// Tools declared on the config survive history re-conversion
28-
// across turns — see Tools.
53+
// Tools the model can call, declared on the config so they
54+
// survive history re-conversion across turns — see Tools.
2955
tools: { searchDocs },
3056

31-
// Hooks fire around each turn: validation, persistence,
32-
// post-turn work — see Lifecycle hooks.
57+
// A lifecycle hook: fires after each turn, here to persist
58+
// the response — see Lifecycle hooks.
3359
onTurnComplete: async ({ responseMessage }) => {
3460
await db.messages.save(responseMessage);
3561
},
3662

37-
// The turn loop. Messages arrive accumulated; you stream back.
38-
// Options, levels, and alternatives — see Backend.
63+
// The turn loop. Messages arrive accumulated; the returned
64+
// stream is piped back to the frontend — see Backend.
3965
run: async ({ messages, tools, signal, streamText }) =>
4066
streamText({
4167
tools,
@@ -47,21 +73,15 @@ export const myAgent = chat.agent({
4773
});
4874
```
4975

50-
The frontend side is one hook — `useTriggerChatTransport` connects `useChat` to the agent's session, no API routes ([Frontend](/ai-chat/frontend)). Underneath, the conversation lives on a [Session](/ai-chat/sessions): a pair of durable streams keyed on your `chatId` that survives refreshes, deploys, and run boundaries.
76+
## Related pages
5177

52-
## Where each part is covered
78+
Beyond the three core parts:
5379

54-
| Part | Page |
55-
| ----------------------------------------------------- | ---------------------------------------------- |
56-
| `chat.agent()` options, the turn loop, piping | [Backend](/ai-chat/backend) |
57-
| Hooks around each turn (`onTurnComplete`, hydration) | [Lifecycle hooks](/ai-chat/lifecycle-hooks) |
58-
| Declaring tools, typed payloads, `toModelOutput` | [Tools](/ai-chat/tools) |
59-
| `useChat` wiring, tokens, starting sessions | [Frontend](/ai-chat/frontend) |
60-
| Driving a chat from your server instead of a browser | [Server-side chat](/ai-chat/server-chat) |
61-
| The durable substrate under every agent | [Sessions](/ai-chat/sessions) |
62-
| Per-run typed state inside the loop | [chat.local](/ai-chat/chat-local) |
63-
| Type-safe payloads, client data, and messages | [Types](/ai-chat/types) |
64-
| Building without the managed lifecycle | [Custom agents](/ai-chat/custom-agents) |
65-
| End-to-end mechanics: what survives a refresh and why | [How it works](/ai-chat/how-it-works) |
80+
| Page | What it covers |
81+
| ------------------------------------------- | ------------------------------------------------------- |
82+
| [Server-side chat](/ai-chat/server-chat) | Driving a chat from your backend instead of a browser |
83+
| [chat.local](/ai-chat/chat-local) | Per-run typed state inside the turn loop |
84+
| [Types](/ai-chat/types) | Type-safe payloads, client data, and messages |
85+
| [Custom agents](/ai-chat/custom-agents) | Building without the managed lifecycle |
6686

67-
Beyond this section: [Features](/ai-chat/fast-starts) covers opt-in capabilities (Head Start, compaction, steering, actions), and [Patterns](/ai-chat/patterns/sub-agents) covers production recipes (sub-agents, HITL approvals, persistence, recovery).
87+
[Features](/ai-chat/fast-starts) covers opt-in capabilities (Head Start, compaction, steering, actions), and [Patterns](/ai-chat/patterns/sub-agents) covers production recipes (sub-agents, HITL approvals, persistence, recovery).

docs/guides/ai-agents/overview.mdx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,22 @@ description: "Real world AI agent example tasks using Trigger.dev"
7474
>
7575
Enrich company data using Exa search and Claude with real-time streaming results.
7676
</Card>
77+
<Card
78+
title="Batch LLM Evaluator"
79+
icon="scale-balanced"
80+
href="/guides/example-projects/batch-llm-evaluator"
81+
>
82+
Evaluate multiple LLM models in parallel with the Vercel AI SDK and stream the results to a
83+
Next.js frontend using Trigger.dev Realtime.
84+
</Card>
85+
<Card
86+
title="Claude thinking chatbot"
87+
icon="brain"
88+
href="/guides/example-projects/claude-thinking-chatbot"
89+
>
90+
Build a Next.js chatbot that streams Claude's extended thinking to the frontend with the Vercel
91+
AI SDK and Trigger.dev Realtime.
92+
</Card>
7793
</CardGroup>
7894

7995
## Chat agents
@@ -88,6 +104,22 @@ Build a durable, multi-turn chat agent with [`chat.agent()`](/ai-chat/overview).
88104
>
89105
Create a durable, multi-turn chat agent with `chat.agent()`, then add tools to it.
90106
</Card>
107+
<Card
108+
title="ElevenLabs Voice agent"
109+
icon="microphone"
110+
href="/guides/example-projects/elevenlabs-voice-agent"
111+
>
112+
Build a spoken-conversation voice assistant on `chat.agent()`, with streaming speech-to-text and
113+
text-to-speech from ElevenLabs and server-side voice activity detection.
114+
</Card>
115+
<Card
116+
title="Ask Trigger chat agent"
117+
icon="graduation-cap"
118+
href="/guides/example-projects/ask-trigger-chat-agent"
119+
>
120+
Build a chat agent that teaches Trigger.dev with interactive node-graphs, quizzes and cards,
121+
using `chat.agent()`, generative UI and live docs grounding through an MCP server.
122+
</Card>
91123
</CardGroup>
92124

93125
## Agent fundamentals

0 commit comments

Comments
 (0)