docs: add chatbot with pgflow tutorial #599
Conversation
Add a new tutorial showing how to build a production-ready chatbot that: - Uses pgflow to orchestrate multi-step context gathering - Performs parallel retrieval from 3 sources (semantic search, web search, memory) - Implements merge and reranking of results - Streams responses using AI SDK's useChat hook - Shows real-time progress updates via pgflow client The tutorial demonstrates: - Multi-step flow with parallel execution - Browser client integration with real-time progress - Edge function for SSE chat streaming - Separation of context gathering from response streaming - Complete database schema, task implementations, and flow definition Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
|
View your CI Pipeline Execution ↗ for commit 02b2f5e
☁️ Nx Cloud last updated this comment at |
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
| export async function POST(req: Request) { | ||
| const { messages, data } = await req.json(); | ||
| const { runId, conversationId } = data; | ||
|
|
There was a problem hiding this comment.
Critical data extraction bug. The useChat hook does not automatically extract the data property from individual messages and send it at the top level of the request body. When append() is called with data on line 930-933, that data remains within the message object, not at the request body's top level.
This will cause data to be undefined on line 1038, leading to destructuring errors when trying to extract runId and conversationId.
Fix: Use the body option in useChat to send additional data:
const { messages, input, setInput, append, isLoading } = useChat({
api: '/api/chatbot-stream',
body: {
conversationId,
},
onError: (error) => {
console.error('Chat error:', error);
},
});Then pass runId through the message's data field and extract it in the API route:
export async function POST(req: Request) {
const { messages, conversationId } = await req.json();
const lastMessage = messages[messages.length - 1];
const runId = lastMessage.data?.runId;
// ...
}| export async function POST(req: Request) { | |
| const { messages, data } = await req.json(); | |
| const { runId, conversationId } = data; | |
| export async function POST(req: Request) { | |
| const { messages, conversationId } = await req.json(); | |
| const lastMessage = messages[messages.length - 1]; | |
| const runId = lastMessage.data?.runId; | |
Spotted by Graphite Agent
Is this helpful? React 👍 or 👎 to let us know.
Add Chatbot with pgflow Tutorial and Update Navigation
This PR adds a comprehensive tutorial on building an advanced chatbot using pgflow for context gathering and AI SDK for streaming responses. The tutorial demonstrates a sophisticated two-phase architecture:
The tutorial includes:
Additionally, this PR updates the website navigation to include the new chatbot tutorial and makes minor formatting improvements to the pgflow 0.8.0 release notes.
The tutorial provides a production-ready implementation that showcases pgflow's capabilities for complex AI workflows with real-time progress tracking.