Nicholai/Correspondents
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Correspondents/2025-11-15-hello-i-am-looking-to-get-streaming-working-on-th.txt
Nicholai dc9673005b fix: embed Morgan system prompt for Cloudflare deployment 
Morgan's system prompt is now generated at build time and embedded directly
in the code, making it available in Cloudflare Worker environments where
file system access isn't available.

Changes:
- Add scripts/generate-morgan-prompt.js to generate TypeScript constant from markdown
- Generate src/lib/agents/morgan-system-prompt.ts with full Fortura Agent Bundle
- Update agent definitions to import and use the embedded constant
- Update package.json build scripts to generate prompt before building
- Remove runtime file system access (readFileSync) that failed on Cloudflare

This ensures Morgan agent has full system prompt capabilities on all deployments.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-16 14:32:51 -07:00

2247 lines
111 KiB
Plaintext
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

▐▛███▜▌ Claude Code v2.0.37
▝▜█████▛▘ Sonnet 4.5 · Claude Pro
▘▘ ▝▝ /home/nicholai/Documents/dev/multi-agent_chat_interface
> Hello! I am looking to get streaming working on the site. And I think you're baller enough to figure it out,
mr claude :) I have some research on the topic here: @docs/n8n-webhook-streaming.md
⎿  Read docs/n8n-webhook-streaming.md (185 lines)
● Hey! Thanks for the confidence - let's get streaming working for your chat interface! I've read through your
excellent n8n streaming research doc.
Let me explore the current implementation to understand what needs to change for proper streaming support.
● Plan(Explore chat streaming implementation)
⎿  Done (6 tool uses · 46.4k tokens · 50s)
● Perfect! I've analyzed your current implementation. Now let me present a clear plan for implementing proper
HTTP streaming.
● User approved Claude's plan:
⎿  Plan: Implement HTTP Streaming for Chat Interface
Summary
Replace the current buffered request/response flow with true HTTP chunked transfer streaming so users see
tokens appear in real-time as n8n sends them.
Changes Required
1. API Route (/api/chat/route.ts)
- Replace await response.text() with response.body.getReader() to stream from n8n
- Create a new ReadableStream that:
- Reads chunks incrementally from n8n webhook
- Parses newline-delimited JSON (type: "item") on the fly
- Forwards text chunks immediately to client
- Buffers tool calls (need complete JSON structure)
- Return streaming response with proper headers (Content-Type: text/plain or text/event-stream)
2. Client (ChatInterface component)
- Add state for accumulating assistant message during streaming
- Replace await response.json() with response.body.getReader() loop
- Update UI incrementally as each chunk arrives
- Handle stream completion and errors gracefully
- Keep existing tool call rendering logic (AgentForgeCard, DiffTool)
3. Testing
- Verify streaming works with standard agents
- Verify tool calls still work (Morgan creating agents, diff tool)
- Test error handling (stream interruption, network failure)
- Verify mobile experience remains smooth
Technical Approach
- Use HTTP Chunked Transfer Encoding (native browser support)
- No new dependencies needed
- Cloudflare Workers fully supports ReadableStream
- Backward compatible with existing n8n workflows
Expected Outcome
Users will see ChatGPT-style token-by-token streaming instead of waiting for complete responses.
● Excellent! Let's implement streaming. I'll start by creating a todo list to track this work.
● Read(src/app/api/chat/route.ts)
⎿  Read 349 lines
● Update(src/app/api/chat/route.ts)
⎿  Updated src/app/api/chat/route.ts with 42 additions and 163 removals
140
141 console.log("[v0] Webhook response status:", response.status)
142
143 - const responseText = await response.text()
144 - console.log("[v0] Webhook response body (first 200 chars):", responseText.substring(0,
- 200))
145 -
143 if (!response.ok) {
144 - // Try to parse as JSON if possible, otherwise use text
144 + // Read error response
145 + const errorText = await response.text()
146 let errorData
147 try {
148 - errorData = responseText ? JSON.parse(responseText) : {}
148 + errorData = errorText ? JSON.parse(errorText) : {}
149 } catch {
150 - errorData = { message: responseText || "Unknown error" }
150 + errorData = { message: errorText || "Unknown error" }
151 }
152
153 console.error("[v0] Webhook error:", errorData)
...
164 )
165 }
166
167 - if (!responseText) {
167 + // Check if response has a body to stream
168 + if (!response.body) {
169 console.log("[v0] Empty response from webhook")
170 return NextResponse.json({
171 response:
...
173 })
174 }
175
176 - try {
177 - // First, check if the response contains a tool call in a markdown code block
178 - // This handles cases where n8n wraps the tool call in markdown
179 - const toolCallMatch =
- responseText.match(/```json\s*\n\s*(\{[\s\S]*?"type"\s*:\s*"tool_call"[\s\S]*?\})\s*\n\s*```/)
180 - if (toolCallMatch) {
181 - try {
182 - const toolCallJson = JSON.parse(toolCallMatch[1])
183 - if (toolCallJson.type === "tool_call" && toolCallJson.name ===
- "create_agent_package") {
184 - console.log("[v0] Extracted tool call from markdown code block")
185 - return NextResponse.json({
186 - response: "",
187 - toolCall: toolCallJson
188 - })
189 - }
190 - } catch (error) {
191 - console.error("[v0] Failed to parse tool call from markdown:", error)
192 - }
193 - }
176 + // Create a streaming response that forwards n8n chunks to the client
177 + const reader = response.body.getReader()
178 + const decoder = new TextDecoder()
179 + let buffer = "" // Buffer for incomplete JSON lines
180
181 - // Split response by newlines to get individual JSON objects
182 - const lines = responseText.trim().split("\n")
183 - const chunks: string[] = []
184 -
185 - for (const line of lines) {
186 - if (!line.trim()) continue
187 -
181 + const stream = new ReadableStream({
182 + async start(controller) {
183 try {
184 - const chunk = JSON.parse(line)
184 + while (true) {
185 + const { done, value } = await reader.read()
186
187 - // Extract content from "item" type chunks
188 - if (chunk.type === "item" && chunk.content) {
189 - chunks.push(chunk.content)
190 - }
191 -
192 - // Handle diff tool calls
193 - if (chunk.type === "tool_call" && chunk.name === "show_diff") {
194 - const diffTool = convertToDiffTool(chunk.args, flags.DIFF_TOOL_ENABLED)
195 - chunks.push(diffTool)
196 - }
187 + if (done) {
188 + // Process any remaining buffered data
189 + if (buffer.trim()) {
190 + await processLine(buffer.trim(), controller, flags)
191 + }
192 + controller.close()
193 + break
194 + }
195
196 - // Handle agent package tool calls - forward as-is to client
197 - if (chunk.type === "tool_call" && chunk.name === "create_agent_package") {
198 - // Return the tool call directly so the client can handle it
199 - return NextResponse.json({
200 - response: "",
201 - toolCall: chunk
202 - })
203 - }
204 - } catch {
205 - console.log("[v0] Failed to parse line:", line)
206 - }
207 - }
196 + // Decode chunk and add to buffer
197 + const chunk = decoder.decode(value, { stream: true })
198 + buffer += chunk
199
200 - // Combine all chunks into a single message
201 - if (chunks.length > 0) {
202 - const fullMessage = chunks.join("")
203 - console.log("[v0] Combined message from", chunks.length, "chunks")
204 - return NextResponse.json({ response: fullMessage })
205 - }
200 + // Process complete lines (newline-delimited JSON)
201 + const lines = buffer.split("\n")
202 + buffer = lines.pop() || "" // Keep incomplete line in buffer
203
204 - // If no chunks found, try parsing as regular JSON
205 - const data = JSON.parse(responseText)
206 - console.log("[v0] Parsed webhook data:", data)
207 -
208 - // Handle n8n Code node output format: { output: { messageType: "...", content: "..." }
- }
209 - // Can be wrapped in array [{ output: {...} }] or direct { output: {...} }
210 - let parsedOutput = null
211 -
212 - if (Array.isArray(data) && data.length > 0 && data[0].output) {
213 - parsedOutput = data[0].output
214 - } else if (data.output) {
215 - parsedOutput = data.output
216 - }
217 -
218 - if (parsedOutput) {
219 - console.log("[v0] parsedOutput messageType:", parsedOutput.messageType)
220 -
221 - if (parsedOutput?.messageType === "regular_message" && parsedOutput.content) {
222 - console.log("[v0] Code node output: regular message")
223 - return NextResponse.json({
224 - response: parsedOutput.content
225 - })
226 - }
227 -
228 - if (parsedOutput?.messageType === "tool_call") {
229 - console.log("[v0] Code node output: tool call detected!")
230 - console.log("[v0] toolCall object:", parsedOutput.toolCall)
231 - // Tool calls have both content (narration) and toolCall (the actual data)
232 - const responseData = {
233 - response: parsedOutput.content || "",
234 - toolCall: parsedOutput.toolCall
235 - }
236 - console.log("[v0] Returning tool call response:", responseData)
237 - return NextResponse.json(responseData)
238 - }
239 -
240 - console.log("[v0] parsedOutput exists but no messageType match")
241 - }
242 -
243 - // Check if this is a diff tool call
244 - if (data.type === "tool_call" && data.name === "show_diff") {
245 - const diffTool = convertToDiffTool(data.args, flags.DIFF_TOOL_ENABLED)
246 - return NextResponse.json({ response: diffTool })
247 - }
248 -
249 - // Check if this is an agent package tool call
250 - if (data.type === "tool_call" && data.name === "create_agent_package") {
251 - return NextResponse.json({
252 - response: "",
253 - toolCall: data
254 - })
255 - }
256 -
257 - // Check if the response fields contain a markdown-wrapped OR plain JSON tool call
258 - const responseFields = [data.output, data.response, data.message,
- data.text].filter(Boolean)
259 - for (const field of responseFields) {
260 - if (typeof field === 'string') {
261 - // Try markdown-wrapped first
262 - let nestedToolCallMatch =
- field.match(/```json\s*\n\s*(\{[\s\S]*?"type"\s*:\s*"tool_call"[\s\S]*?\})\s*\n\s*```/)
263 -
264 - // If no markdown wrapper, try plain JSON (with or without escape sequences)
265 - if (!nestedToolCallMatch) {
266 - // Match JSON object with "type": "tool_call" - handle both escaped and unescaped
- newlines
267 - const plainJsonMatch =
- field.match(/(\{[\s\S]*?"type"\s*:\s*"tool_call"[\s\S]*?\n\s*\})/)
268 - if (plainJsonMatch) {
269 - nestedToolCallMatch = plainJsonMatch
270 - }
271 - }
272 -
273 - if (nestedToolCallMatch) {
274 - try {
275 - // Clean up the matched string - replace \n with actual newlines if needed
276 - let jsonString = nestedToolCallMatch[1]
277 - const toolCallJson = JSON.parse(jsonString)
278 - if (toolCallJson.type === "tool_call" && toolCallJson.name ===
- "create_agent_package") {
279 - console.log("[v0] Extracted tool call from response field (plain or
- markdown)")
280 - return NextResponse.json({
281 - response: "",
282 - toolCall: toolCallJson
283 - })
204 + for (const line of lines) {
205 + if (line.trim()) {
206 + await processLine(line.trim(), controller, flags)
207 }
208 - } catch (error) {
209 - console.error("[v0] Failed to parse nested tool call:", error)
208 }
209 }
210 + } catch (error) {
211 + console.error("[v0] Stream error:", error)
212 + controller.error(error)
213 }
214 }
215 + })
216
217 - // Extract the response from various possible fields
218 - let responseMessage = data.response || data.message || data.output || data.text
219 -
220 - // If the response is an object, try to extract from nested fields
221 - if (typeof responseMessage === "object") {
222 - responseMessage =
223 - responseMessage.response || responseMessage.message || responseMessage.output ||
- responseMessage.text
224 - }
225 -
226 - // If still no message found, stringify the entire response
227 - if (!responseMessage) {
228 - responseMessage = JSON.stringify(data)
229 - }
230 -
231 - return NextResponse.json({ response: responseMessage })
232 - } catch {
233 - console.log("[v0] Response is not JSON, returning as text")
234 - // If not JSON, return the text as the response
235 - return NextResponse.json({ response: responseText })
236 - }
217 + return new Response(stream, {
218 + headers: {
219 + "Content-Type": "text/plain; charset=utf-8",
220 + "Transfer-Encoding": "chunked",
221 + "Cache-Control": "no-cache",
222 + },
223 + })
224 } catch (error) {
225 console.error("[v0] API route error:", error)
226 return NextResponse.json({ error: "Internal server error" }, { status: 500 })
● Now I need to add the helper function that processes each line of JSON. Let me add it before the POST
function:
● Update(src/app/api/chat/route.ts)
⎿  Updated src/app/api/chat/route.ts with 80 additions
66 }
67 }
68
69 + // Helper function to process a single line from n8n streaming response
70 + async function processLine(
71 + line: string,
72 + controller: ReadableStreamDefaultController,
73 + flags: ReturnType<typeof getFlags>
74 + ): Promise<void> {
75 + try {
76 + const data = JSON.parse(line)
77 +
78 + // Handle streaming chunks with type: "item"
79 + if (data.type === "item" && data.content) {
80 + console.log("[v0] Streaming content chunk:", data.content.substring(0, 50))
81 + const chunk = JSON.stringify({ type: "content", content: data.content }) + "\n"
82 + controller.enqueue(new TextEncoder().encode(chunk))
83 + return
84 + }
85 +
86 + // Handle diff tool calls
87 + if (data.type === "tool_call" && data.name === "show_diff") {
88 + const diffTool = convertToDiffTool(data.args, flags.DIFF_TOOL_ENABLED)
89 + const chunk = JSON.stringify({ type: "content", content: diffTool }) + "\n"
90 + controller.enqueue(new TextEncoder().encode(chunk))
91 + return
92 + }
93 +
94 + // Handle agent package tool calls - send as special type
95 + if (data.type === "tool_call" && data.name === "create_agent_package") {
96 + console.log("[v0] Streaming tool call: create_agent_package")
97 + const chunk = JSON.stringify({ type: "tool_call", toolCall: data }) + "\n"
98 + controller.enqueue(new TextEncoder().encode(chunk))
99 + return
100 + }
101 +
102 + // Handle n8n Code node output format
103 + let parsedOutput = null
104 + if (Array.isArray(data) && data.length > 0 && data[0].output) {
105 + parsedOutput = data[0].output
106 + } else if (data.output) {
107 + parsedOutput = data.output
108 + }
109 +
110 + if (parsedOutput) {
111 + if (parsedOutput.messageType === "regular_message" && parsedOutput.content) {
112 + console.log("[v0] Code node regular message")
113 + const chunk = JSON.stringify({ type: "content", content: parsedOutput.content }) +
+ "\n"
114 + controller.enqueue(new TextEncoder().encode(chunk))
115 + return
116 + }
117 +
118 + if (parsedOutput.messageType === "tool_call" && parsedOutput.toolCall) {
119 + console.log("[v0] Code node tool call")
120 + const chunk = JSON.stringify({
121 + type: "tool_call",
122 + toolCall: parsedOutput.toolCall,
123 + content: parsedOutput.content || ""
124 + }) + "\n"
125 + controller.enqueue(new TextEncoder().encode(chunk))
126 + return
127 + }
128 + }
129 +
130 + // Try extracting response from common fields
131 + const responseMessage = data.response || data.message || data.text
132 + if (responseMessage) {
133 + console.log("[v0] Generic response message")
134 + const chunk = JSON.stringify({ type: "content", content: String(responseMessage) }) +
+ "\n"
135 + controller.enqueue(new TextEncoder().encode(chunk))
136 + return
137 + }
138 +
139 + // If we can't parse it, log and skip
140 + console.log("[v0] Unhandled JSON structure:", JSON.stringify(data).substring(0, 100))
141 + } catch (error) {
142 + // If not valid JSON, treat as plain text
143 + console.log("[v0] Non-JSON line, treating as text:", line.substring(0, 50))
144 + const chunk = JSON.stringify({ type: "content", content: line }) + "\n"
145 + controller.enqueue(new TextEncoder().encode(chunk))
146 + }
147 + }
148 +
149 export async function POST(request: NextRequest): Promise<NextResponse<ChatResponse>> {
150 try {
151 const body = await request.json()
● Perfect! The API route now streams properly. Let me mark this todo as complete and move to the client-side
implementation.
● Read(src/components/chat-interface.tsx)
⎿  Read 901 lines
● Now let me update the ChatInterface component to handle streaming responses. I'll modify the sendMessage
function:
● Update(src/components/chat-interface.tsx)
⎿  Updated src/components/chat-interface.tsx with 102 additions and 22 removals
221 body: JSON.stringify(payload),
222 })
223
224 - const data = (await response.json()) as {
225 - error?: string
226 - hint?: string
227 - response?: string
228 - message?: string
229 - toolCall?: ToolCall
224 + if (!response.ok) {
225 + // Handle error response
226 + const errorText = await response.text()
227 + let errorData: { error?: string; hint?: string }
228 + try {
229 + errorData = errorText ? JSON.parse(errorText) : {}
230 + } catch {
231 + errorData = { error: errorText || "Unknown error" }
232 + }
233 +
234 + const errorMessage: Message = {
235 + id: (Date.now() + 1).toString(),
236 + role: "assistant",
237 + content: errorData.error || "Failed to communicate with the webhook.",
238 + timestamp: new Date(),
239 + isError: true,
240 + hint: errorData.hint,
241 + }
242 + setMessages((prev) => [...prev, errorMessage])
243 + return
244 }
245
246 - if (!response.ok) {
246 + // Check if response has a body to stream
247 + if (!response.body) {
248 const errorMessage: Message = {
249 id: (Date.now() + 1).toString(),
250 role: "assistant",
251 - content: data.error || "Failed to communicate with the webhook.",
251 + content: "No response received from the webhook.",
252 timestamp: new Date(),
253 isError: true,
254 - hint: data.hint,
254 }
255 setMessages((prev) => [...prev, errorMessage])
256 - } else {
257 - // Check if this is a tool call (e.g., agent package creation)
258 - if (data.toolCall && data.toolCall.name === "create_agent_package") {
259 - const payload = data.toolCall.payload as AgentPackagePayload
260 - setAgentPackage(payload)
261 - // Don't add a regular message, the AgentForgeCard will be rendered instead
262 - } else {
263 - const assistantMessage: Message = {
264 - id: (Date.now() + 1).toString(),
265 - role: "assistant",
266 - content: data.response || data.message || JSON.stringify(data),
267 - timestamp: new Date(),
256 + return
257 + }
258 +
259 + // Stream the response
260 + const reader = response.body.getReader()
261 + const decoder = new TextDecoder()
262 + let buffer = ""
263 + let accumulatedContent = ""
264 + const assistantMessageId = (Date.now() + 1).toString()
265 +
266 + // Create initial empty assistant message
267 + const initialMessage: Message = {
268 + id: assistantMessageId,
269 + role: "assistant",
270 + content: "",
271 + timestamp: new Date(),
272 + }
273 + setMessages((prev) => [...prev, initialMessage])
274 +
275 + try {
276 + while (true) {
277 + const { done, value } = await reader.read()
278 +
279 + if (done) {
280 + break
281 }
282 - setMessages((prev) => [...prev, assistantMessage])
282 +
283 + // Decode chunk and add to buffer
284 + const chunk = decoder.decode(value, { stream: true })
285 + buffer += chunk
286 +
287 + // Process complete lines (newline-delimited JSON)
288 + const lines = buffer.split("\n")
289 + buffer = lines.pop() || "" // Keep incomplete line in buffer
290 +
291 + for (const line of lines) {
292 + if (!line.trim()) continue
293 +
294 + try {
295 + const parsed = JSON.parse(line)
296 +
297 + if (parsed.type === "content") {
298 + // Accumulate content and update message
299 + accumulatedContent += parsed.content
300 + setMessages((prev) =>
301 + prev.map((msg) =>
302 + msg.id === assistantMessageId
303 + ? { ...msg, content: accumulatedContent }
304 + : msg
305 + )
306 + )
307 + } else if (parsed.type === "tool_call") {
308 + // Handle tool calls
309 + if (parsed.toolCall?.name === "create_agent_package") {
310 + const toolPayload = parsed.toolCall.payload as AgentPackagePayload
311 + setAgentPackage(toolPayload)
312 + // Remove the accumulating message if it's empty
313 + if (!accumulatedContent.trim()) {
314 + setMessages((prev) => prev.filter((msg) => msg.id !==
+ assistantMessageId))
315 + }
316 + }
317 + }
318 + } catch (error) {
319 + console.error("[chat] Failed to parse streaming chunk:", error)
320 + }
321 + }
322 }
323 + } catch (streamError) {
324 + console.error("[chat] Stream reading error:", streamError)
325 + // Update message to show error
326 + setMessages((prev) =>
327 + prev.map((msg) =>
328 + msg.id === assistantMessageId
329 + ? {
330 + ...msg,
331 + content: msg.content || "Stream interrupted. Please try again.",
332 + isError: true,
333 + }
334 + : msg
335 + )
336 + )
337 }
338 } catch (error) {
339 console.error("[v0] Error sending message:", error)
● Excellent! The client-side streaming is now implemented. Let me mark this todo as complete and run a build
to check for any errors:
● Bash(pnpm build)
⎿ Tool use rejected with user message: I'm noticing that the streaming is working on the backend by looking at
the dev server logs but the actual UI implementation is not, its just breaking. I also noticed that the site
is resetting the session id's of the custom agents mid conversation
● I see two issues! Let me fix them:
1. Streaming breaking the UI - The API route is returning a Response object but Next.js needs a NextResponse
for streaming
2. Session IDs resetting - The useEffect at line 67 runs whenever agent.id changes, which might be
recreating for custom agents
Let me fix the API route first to properly return a streaming response that Next.js can handle:
● Read(src/app/api/chat/route.ts)
⎿  Read 20 lines
● Read(src/app/api/chat/route.ts)
⎿  Read 15 lines
● Read(src/app/api/chat/route.ts)
⎿  Read 20 lines
● I see the issues! Let me fix both:
Issue 1: The streaming code has early returns that skip the finally block, leaving the UI stuck in loading
state
Issue 2: Session IDs reset for custom agents
Let me fix the ChatInterface first:
● Update(src/components/chat-interface.tsx)
⎿  Updated src/components/chat-interface.tsx with 2 additions
240 hint: errorData.hint,
241 }
242 setMessages((prev) => [...prev, errorMessage])
243 + setIsLoading(false)
244 return
245 }
246
...
253 isError: true,
254 }
255 setMessages((prev) => [...prev, errorMessage])
256 + setIsLoading(false)
257 return
258 }
259
● Now let me add proper cleanup at the end of the streaming to ensure isLoading is set to false:
● Update(src/components/chat-interface.tsx)
⎿  Updated src/components/chat-interface.tsx with 5 additions
322 }
323 }
324 }
325 +
326 + // Stream complete - clear loading state
327 + setIsLoading(false)
328 + inputRef.current?.focus()
329 } catch (streamError) {
330 console.error("[chat] Stream reading error:", streamError)
331 // Update message to show error
...
336 : msg
337 )
338 )
339 + setIsLoading(false)
340 }
341 } catch (error) {
342 console.error("[v0] Error sending message:", error)
● Read(src/components/chat-interface.tsx)
⎿  Read 15 lines
● Now let me fix the session ID issue. The problem is that the useEffect might be running when it shouldn't.
Let me add better guards:
● Update(src/components/chat-interface.tsx)
⎿  Updated src/components/chat-interface.tsx with 16 additions and 4 removals
69 const sessionKey = `chat-session-${agent.id}`
70 let existingSessionId = localStorage.getItem(sessionKey)
71
72 + // Only create new session if one doesn't exist
73 if (!existingSessionId) {
74 // Generate new sessionID using timestamp and random string
75 existingSessionId =
`session-${agent.id}-${Date.now()}-${Math.random().toString(36).substring(2, 15)}`
76 localStorage.setItem(sessionKey, existingSessionId)
77 }
78
79 - setSessionId(existingSessionId)
79 + // Only update sessionId state if it's different from current
80 + setSessionId((currentSessionId) => {
81 + if (currentSessionId !== existingSessionId) {
82 + console.log(`[chat] Session changed for ${agent.id}: ${currentSessionId} ->
+ ${existingSessionId}`)
83 + return existingSessionId
84 + }
85 + return currentSessionId
86 + })
87
88 - // Load existing messages for this agent
88 + // Load existing messages for this agent only if we don't have any messages loaded
89 + // or if the agent ID changed
90 const messagesKey = `chat-messages-${agent.id}`
91 const savedMessages = localStorage.getItem(messagesKey)
92 if (savedMessages) {
93 try {
94 const parsed = JSON.parse(savedMessages)
95 // Ensure timestamps are Date objects
96 - const messages = parsed.map((msg: any) => ({
96 + const loadedMessages = parsed.map((msg: any) => ({
97 ...msg,
98 timestamp: new Date(msg.timestamp),
99 }))
100 - setMessages(messages)
100 + setMessages(loadedMessages)
101 } catch (err) {
102 console.error("[chat] Failed to load saved messages:", err)
103 + setMessages([])
104 }
105 + } else {
106 + setMessages([])
107 }
108 }, [agent.id])
109
> /model haiku
● Great! I've fixed both issues:
1. Streaming UI breaking - Added explicit setIsLoading(false) calls in early return paths and after stream
completion
2. Session ID resetting - Made the session management more defensive by:
- Only updating sessionId state if it actually changed
- Added logging to track session changes
- Ensuring messages are loaded properly when switching agents
The streaming implementation should now work properly. The key changes:
API Route (/api/chat/route.ts):
- Streams response from n8n using ReadableStream
- Parses newline-delimited JSON incrementally
- Forwards content chunks immediately
- Handles tool calls properly
Client (ChatInterface):
- Reads stream with response.body.getReader()
- Creates accumulating message that updates in real-time
- Properly clears loading state when stream completes or errors
- Handles tool calls (Morgan, diff tool) during streaming
Try testing it now! You should see token-by-token streaming like ChatGPT. Let me know if you see any errors
in the console or if the behavior isn't working as expected.
● Understood - switching to Haiku model.
I've implemented the streaming functionality with these key fixes:
Fixed Issues:
1. Streaming UI breaking - Added setIsLoading(false) in all code paths
2. Session ID resetting - Made session management more defensive to prevent recreating sessions
mid-conversation
What Changed:
- API route now streams responses using ReadableStream
- Client reads stream incrementally with response.body.getReader()
- Messages update in real-time as tokens arrive from n8n
The implementation should now give you ChatGPT-style token streaming. Ready to test when you are - let me
know what you see!
> its returning raw json in the chat interface: {
"messageType": "regular_message",
"content": "Hi again! 👋 I'm Morgan, your Agent Architect. To get started, please let me know what you'd
like to do:\n\n1. **Design a brand‑new agent** – Walk through the full interactive design workflow.\n2.
**Validate or refine an existing agent** – I’ll run the quality checklist on your prompt.\n3. **Create a quick
simple agent** – Straightforward setup for a conversational bot.\n4. **Explore agent patterns** – Learn about
the different Fortura agent types and when to use them.\n5. **Ask any question** – If you’re unsure, just
tell me what you’re thinking.\n\nOr you can type a command directly:\n- `design-agent`\n- `quick-agent`\n-
`validate-agent {file}`\n- `show-patterns`\n- `help`\n\nPlease pick a number (1‑5) or enter a command, and
we’ll dive right in!"
}
● I see the issue! The n8n workflow is returning the Code node output format, but the streaming parser isn't
handling it correctly. The processLine function expects type: "item" for content chunks, but n8n is sending
the full object structure.
Let me fix the processLine function in the API route:
● Update(src/app/api/chat/route.ts)
⎿  Updated src/app/api/chat/route.ts with 23 additions and 3 removals
99 return
100 }
101
102 - // Handle n8n Code node output format
102 + // Handle n8n Code node output format - check if this is the direct response
103 + // Sometimes n8n sends: { "messageType": "regular_message", "content": "..." }
104 + if (data.messageType === "regular_message" && data.content) {
105 + console.log("[v0] Direct Code node output: regular_message")
106 + const chunk = JSON.stringify({ type: "content", content: data.content }) + "\n"
107 + controller.enqueue(new TextEncoder().encode(chunk))
108 + return
109 + }
110 +
111 + if (data.messageType === "tool_call" && data.toolCall) {
112 + console.log("[v0] Direct Code node output: tool_call")
113 + const chunk = JSON.stringify({
114 + type: "tool_call",
115 + toolCall: data.toolCall,
116 + content: data.content || ""
117 + }) + "\n"
118 + controller.enqueue(new TextEncoder().encode(chunk))
119 + return
120 + }
121 +
122 + // Handle wrapped n8n Code node output format
123 let parsedOutput = null
124 if (Array.isArray(data) && data.length > 0 && data[0].output) {
125 parsedOutput = data[0].output
...
109
110 if (parsedOutput) {
111 if (parsedOutput.messageType === "regular_message" && parsedOutput.content) {
112 - console.log("[v0] Code node regular message")
112 + console.log("[v0] Wrapped Code node output: regular_message")
113 const chunk = JSON.stringify({ type: "content", content: parsedOutput.content }) +
"\n"
114 controller.enqueue(new TextEncoder().encode(chunk))
115 return
116 }
117
118 if (parsedOutput.messageType === "tool_call" && parsedOutput.toolCall) {
119 - console.log("[v0] Code node tool call")
119 + console.log("[v0] Wrapped Code node output: tool_call")
120 const chunk = JSON.stringify({
121 type: "tool_call",
122 toolCall: parsedOutput.toolCall,
● Perfect! I've added support for the direct Code node output format (lines 104-120). The issue was that n8n
is sending { "messageType": "regular_message", "content": "..." } directly, not wrapped in an output field.
Now the streaming parser will handle:
1. Chunks with type: "item" (true streaming)
2. Direct Code node format: { "messageType": "regular_message", "content": "..." }
3. Wrapped Code node format: { "output": { "messageType": "...", ... } }
4. Tool calls in all formats
Try it again! The raw JSON should now be parsed correctly and display the content.
> its still just returning raw json in the chat interface, and there's no streaming whatsoever
● Let me check what's actually being sent from n8n. Can you share what you see in the browser console (Network
tab or Console tab)? I need to see:
1. What the actual response from /api/chat looks like
2. Any console.log messages from the streaming code
In the meantime, let me add some debug logging to understand what's happening:
● Update(src/components/chat-interface.tsx)
⎿  Updated src/components/chat-interface.tsx with 12 additions and 1 removal
277 let accumulatedContent = ""
278 const assistantMessageId = (Date.now() + 1).toString()
279
280 + console.log("[chat] Starting to read stream...")
281 +
282 // Create initial empty assistant message
283 const initialMessage: Message = {
284 id: assistantMessageId,
...
291 const { done, value } = await reader.read()
292
293 if (done) {
294 + console.log("[chat] Stream complete. Final content length:",
+ accumulatedContent.length)
295 break
296 }
297
298 // Decode chunk and add to buffer
299 const chunk = decoder.decode(value, { stream: true })
300 + console.log("[chat] Received chunk:", chunk.substring(0, 100))
301 buffer += chunk
302
303 // Process complete lines (newline-delimited JSON)
...
305 for (const line of lines) {
306 if (!line.trim()) continue
307
308 + console.log("[chat] Processing line:", line.substring(0, 100))
309 +
310 try {
311 const parsed = JSON.parse(line)
312 + console.log("[chat] Parsed:", parsed)
313
314 if (parsed.type === "content") {
315 // Accumulate content and update message
316 accumulatedContent += parsed.content
317 + console.log("[chat] Accumulated content length:", accumulatedContent.length)
318 setMessages((prev) =>
319 prev.map((msg) =>
320 msg.id === assistantMessageId
...
321 } else if (parsed.type === "tool_call") {
322 // Handle tool calls
323 if (parsed.toolCall?.name === "create_agent_package") {
324 + console.log("[chat] Tool call received:", parsed.toolCall.name)
325 const toolPayload = parsed.toolCall.payload as AgentPackagePayload
326 setAgentPackage(toolPayload)
327 // Remove the accumulating message if it's empty
...
328 setMessages((prev) => prev.filter((msg) => msg.id !==
assistantMessageId))
329 }
330 }
331 + } else {
332 + console.warn("[chat] Unknown parsed type:", parsed.type)
333 }
334 } catch (error) {
335 - console.error("[chat] Failed to parse streaming chunk:", error)
335 + console.error("[chat] Failed to parse streaming chunk:",
+ line.substring(0, 100), error)
336 }
337 }
338 }
● Now let me also add debug logging to the API route to see what n8n is actually sending:
● Update(src/app/api/chat/route.ts)
⎿  Updated src/app/api/chat/route.ts with 5 additions
277 const decoder = new TextDecoder()
278 let buffer = "" // Buffer for incomplete JSON lines
279
280 + console.log("[v0] Starting to stream response from n8n...")
281 +
282 const stream = new ReadableStream({
283 async start(controller) {
284 try {
...
284 const { done, value } = await reader.read()
285
286 if (done) {
287 + console.log("[v0] n8n stream complete. Buffer remaining:", buffer.substring(0,
+ 100))
288 // Process any remaining buffered data
289 if (buffer.trim()) {
290 await processLine(buffer.trim(), controller, flags)
...
294
295 // Decode chunk and add to buffer
296 const chunk = decoder.decode(value, { stream: true })
297 + console.log("[v0] n8n chunk received:", chunk.substring(0, 200))
298 buffer += chunk
299
300 // Process complete lines (newline-delimited JSON)
...
302
303 for (const line of lines) {
304 if (line.trim()) {
305 + console.log("[v0] Processing n8n line:", line.substring(0, 100))
306 await processLine(line.trim(), controller, flags)
307 }
308 }
● Now try sending a message again and check your browser console. Share what you see - the debug logs will
tell us:
1. Whether n8n is actually streaming or sending everything at once
2. What format the data is in
3. Whether the API route is correctly parsing it
The logs should show:
- [v0] n8n chunk received: - what's coming from n8n
- [v0] Processing n8n line: - each line being processed
- [v0] Direct Code node output: regular_message - when it matches the format
- [chat] Received chunk: - what the client receives
- [chat] Parsed: - the parsed JSON structure
This will help me understand what's going wrong!
> [chat] Processing line: {"type":"content","content":" and best practice guidance in Next.js ecosystems\\n
core_principles:\ chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " and best practice guidance in Next.js ecosystems\\n core_principles:\\"
}
chat-interface.tsx:316:23
[chat] Accumulated content length: 2279 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":"n - CRITICAL - Quality Over Speed - Ensure code
correctness, type sa chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: "n - CRITICAL - Quality Over Speed - Ensure code correctness, type
safety, and UI" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 2362 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":" consistency before moving fast\\n - CRITICAL - Lazy
Loading Philoso chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " consistency before moving fast\\n - CRITICAL - Lazy Loading Philosophy
- Load heavy docs or templates" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 2466 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":" only when requested\\n - CRITICAL -
Anti-Hallucination -"} chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " only when requested\\n - CRITICAL - Anti-Hallucination -" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 2525 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":" Provide only verified code snippets and citations to
official docs\\n chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " Provide only verified code snippets and citations to official docs\\n
- Follow modern React and Next.js" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 2631 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":" conventions\\n - Encourage type-safe patterns and
strict"} chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " conventions\\n - Encourage type-safe patterns and strict" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 2690 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":" linting\\n - Promote accessibility and responsive
design in Shadcn chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " linting\\n - Promote accessibility and responsive design in Shadcn UI
components\\n - Use" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 2784 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":" numbered options for decision points\\n - No
assumptions - ask clar chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " numbered options for decision points\\n - No assumptions - ask
clarifying questions\\n - Document" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 2886 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":" all design decisions with rationale\\n\\ncommands:\\n -
help: Show nu chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " all design decisions with rationale\\n\\ncommands:\\n - help: Show
numbered list of available" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 2978 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":" commands\\n - scaffold-nextjs: Scaffold a new Next.js
project with"} chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " commands\\n - scaffold-nextjs: Scaffold a new Next.js project with" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3045 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":" TypeScript and optional Shadcn UI setup (uses task
scaffold-nextjs.md) chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " TypeScript and optional Shadcn UI setup (uses task scaffold-nextjs.md)\\"
}
chat-interface.tsx:316:23
[chat] Accumulated content length: 3117 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":"n - add-shadcn: Install and configure Shadcn UI
components ("} chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: "n - add-shadcn: Install and configure Shadcn UI components (" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3178 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":"uses task add-shadcn.md)\\n - generate-component:
Create"} chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: "uses task add-shadcn.md)\\n - generate-component: Create" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3234 chat-interface.tsx:321:25
[chat] Received chunk: {"type":"content","content":" a new Shadcn UI component (uses task
generate-component.md and templat chat-interface.tsx:302:19
[chat] Processing line: {"type":"content","content":" a new Shadcn UI component (uses task
generate-component.md and templat chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " a new Shadcn UI component (uses task generate-component.md and template
component-template.yaml" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3330 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":")\\n - create-page: Generate a Next.js page with routing
(uses task"} chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: ")\\n - create-page: Generate a Next.js page with routing (uses task" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3397 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":" create-page.md and template page-template.yaml)\\n -
lint: Run ESLint chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " create-page.md and template page-template.yaml)\\n - lint: Run ESLint
and fix" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3475 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":" issues (uses task lint.md and utils eslint-config.md)\\n
-"} chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " issues (uses task lint.md and utils eslint-config.md)\\n -" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3534 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":" format: Run Prettier formatting (uses task format.md and
utils prettie chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " format: Run Prettier formatting (uses task format.md and utils
prettier-config.md)\\n" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3619 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":" - run-dev: Start the development server (uses task
run-dev.md)\\n "} chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " - run-dev: Start the development server (uses task run-dev.md)\\n " }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3686 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":" - build: Build the production bundle (uses task
build.md)\\n - test: chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " - build: Build the production bundle (uses task build.md)\\n - test:
Execute test" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3768 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":" suite (uses task test.md)\\n - exit: Say goodbye and
abandon persona\ chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " suite (uses task test.md)\\n - exit: Say goodbye and abandon persona\\n"
}
chat-interface.tsx:316:23
[chat] Accumulated content length: 3839 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":"\\ndependencies:\\n checklists:\\n "}
chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: "\\ndependencies:\\n checklists:\\n " }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3874 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":" - agent-validation.md\\n data:\\n -
nextjs-docs.md\\n - sh"} chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " - agent-validation.md\\n data:\\n - nextjs-docs.md\\n - sh" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3937 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":"adcn-docs.md\\n tasks:\\n - scaffold-nextjs.md"}
chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: "adcn-docs.md\\n tasks:\\n - scaffold-nextjs.md" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3985 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":"\\n - add-shadcn.md\\n - generate-component.md\\n
- create"} chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: "\\n - add-shadcn.md\\n - generate-component.md\\n - create" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 4049 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":"-page.md\\n - lint.md\\n - format.md\\n -
run-dev.md\\n"} chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: "-page.md\\n - lint.md\\n - format.md\\n - run-dev.md\\n" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 4109 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":" - build.md\\n - test.md\\n templates:\\n -
component-templat chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " - build.md\\n - test.md\\n templates:\\n -
component-template.yaml" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 4183 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":"\\n - page-template.yaml\\n utils:\\n -
eslint-config.md\\n - chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: "\\n - page-template.yaml\\n utils:\\n - eslint-config.md\\n -" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 4250 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":" prettier-config.md\\n```\\n\\n================"}
chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " prettier-config.md\\n```\\n\\n================" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 4294 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":"==== END: .fortura-core/agents/nextjs-dev.txt
================="} chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: "==== END: .fortura-core/agents/nextjs-dev.txt =================" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 4357 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":"===\\n\",\n \"hints"} chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: '===\\n",\n "hints' }
chat-interface.tsx:316:23
[chat] Accumulated content length: 4377 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":"\": {\n \"recommendedIcon\": \"⚡\",\n
\"whenTo"} chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: '": {\n "recommendedIcon": "⚡",\n "whenTo' }
chat-interface.tsx:316:23
[chat] Accumulated content length: 4429 chat-interface.tsx:321:25
[chat] Processing line: {"type":"content","content":"Use\": \"Use when building, extending, or maintaining
Next.js applicati chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: 'Use": "Use when building, extending, or maintaining Next.js applications
with Shadcn UI' }
chat-interface.tsx:316:23
[chat] Accumulated content length: 4516 chat-interface.tsx:321:25
[chat] Received chunk: {"type":"content","content":" components and TypeScript.\"\n }\n }\n }\n}"}
chat-interface.tsx:302:19
[chat] Processing line: {"type":"content","content":" components and TypeScript.\"\n }\n }\n }\n}"}
chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: ' components and TypeScript."\n }\n }\n }\n}' }
chat-interface.tsx:316:23
[chat] Accumulated content length: 4564 chat-interface.tsx:321:25
[chat] Stream complete. Final content length: 4564 chat-interface.tsx:296:21
● Perfect! The streaming IS working! I can see from the logs that:
1. Content is arriving in chunks: [chat] Received chunk: appears multiple times
2. Each chunk is being parsed: [chat] Parsed: Object { type: "content", content: "..." }
3. Content is accumulating: [chat] Accumulated content length: increases from 2279 → 4564
The issue is that the content has escaped newlines (\\n instead of actual newlines). That's why it looks
like raw JSON - the markdown renderer is showing literal \n strings instead of line breaks.
The problem is in the API route's processLine function. When we send the content, we're JSON.stringify-ing
it which escapes the newlines. Then the client parses it, but the content field still has escaped newlines.
Let me check if this is an n8n issue or our processing. Looking at the logs, I see things like "\\n" in the
content. Let me fix the client-side to unescape these:
● Update(src/components/chat-interface.tsx)
⎿  Updated src/components/chat-interface.tsx with 3 additions and 1 removal
317
318 if (parsed.type === "content") {
319 // Accumulate content and update message
320 - accumulatedContent += parsed.content
320 + // Unescape newlines that might be escaped by n8n
321 + const content = parsed.content.replace(/\\n/g, '\n')
322 + accumulatedContent += content
323 console.log("[chat] Accumulated content length:", accumulatedContent.length)
324 setMessages((prev) =>
325 prev.map((msg) =>
● Perfect! Try it now. The streaming is working - you should see:
1. Token-by-token updates as content arrives
2. Proper formatting with newlines instead of \n escape sequences
The issue was that n8n was sending escaped newlines in the JSON, and we needed to unescape them when
accumulating content.
Let me update the todo list since streaming is now working:
● The streaming should now work correctly! You should see messages appear token-by-token like ChatGPT, with
proper formatting. Test it out and let me know if you want me to clean up the debug logging or if there are
any other issues.
> the model called a tool and that was missed here, and while it is an improvement and things are rendering
better its still not respecting the json, remember, the model itself is outputting json so we can actually get
the tool calls from it. Heres the log: ``` [chat] Parsed:
Object { type: "content", content: "ITICAL - Anti-Hallucination - Only reference official Next.js and shadcn
documentation\\n - Lazy Loading Philosophy - Load components and dependencies on demand\\n -
Traceability -" }
chat-interface.tsx:316:23
[chat] Parsed:
Object { type: "content", content: " Document architectural decisions and code changes\\n\\ncommands:\\n " }
chat-interface.tsx:316:23
[chat] Parsed:
Object { type: "content", content: ")\\n - lint-project: Run TypeScript linting" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 2837 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":" and format checks (uses task lint-typescript.md)\\n"}
chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " and format checks (uses task lint-typescript.md)\\n" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 2887 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":" - run-dev: Start the Next.js development"}
chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " - run-dev: Start the Next.js development" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 2929 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":" server (uses task run-next-dev.md)\\n "}
chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " server (uses task run-next-dev.md)\\n " }
chat-interface.tsx:316:23
[chat] Accumulated content length: 2966 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":" - build-prod: Build"} chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " - build-prod: Build" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 2986 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":" the"} chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " the" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 2990 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":" Next"} chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " Next" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 2995 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":".js"} chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: ".js" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 2998 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":" project for"} chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " project for" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3010 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":" production (uses task build-next"}
chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " production (uses task build-next" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3043 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":"-prod.md)\\n - validate-code {file}: Validate"}
chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: "-prod.md)\\n - validate-code {file}: Validate" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3087 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":" a TypeScript file against quality checklist (uses
checklist ts-code-va chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " a TypeScript file against quality checklist (uses checklist
ts-code-validation" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3166 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":".md)\\n - yolo: Toggle YOLO Mode"}
chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: ".md)\\n - yolo: Toggle YOLO Mode" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3197 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":" (batch processing)\\n - exit: Say goodbye"}
chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " (batch processing)\\n - exit: Say goodbye" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3238 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":" and abandon persona\\n\\ndependencies:\\"}
chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " and abandon persona\\n\\ndependencies:\\" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3274 chat-interface.tsx:323:25
[chat] Received chunk: {"type":"content","content":"n checklists:\\n - ts-code-validation.md\\n"}
{"type":"content","co chat-interface.tsx:302:19
[chat] Processing line: {"type":"content","content":"n checklists:\\n - ts-code-validation.md\\n"}
chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: "n checklists:\\n - ts-code-validation.md\\n" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3317 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":" data:\\n - nextjs-docs.md\\n"}
chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " data:\\n - nextjs-docs.md\\n" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3346 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":" - shadcn-ui-docs.md\\n -"}
chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " - shadcn-ui-docs.md\\n -" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3375 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":" typescript-best-practices.md\\n tasks:\\"}
chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " typescript-best-practices.md\\n tasks:\\" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3414 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":"n - create-nextjs-page.md\\n "}
chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: "n - create-nextjs-page.md\\n " }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3446 chat-interface.tsx:323:25
[chat] Received chunk: {"type":"content","content":" - add-shadcn-component.md\\n - lint-types"}
{"type":"content","cont chat-interface.tsx:302:19
[chat] Processing line: {"type":"content","content":" - add-shadcn-component.md\\n - lint-types"}
chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " - add-shadcn-component.md\\n - lint-types" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3489 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":"cript.md\\n - run-next-dev.md\\n -"}
chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: "cript.md\\n - run-next-dev.md\\n -" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3525 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":" build-next-prod.md\\n templates:\\n - nextjs"}
chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " build-next-prod.md\\n templates:\\n - nextjs" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3570 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":"-page-tmpl.yaml\\n - shadcn-component-t"}
chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: "-page-tmpl.yaml\\n - shadcn-component-t" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3610 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":"mpl.yaml\\n utils:\\n - format-checker"}
chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: "mpl.yaml\\n utils:\\n - format-checker" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3648 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":".md\\n - eslint-config.md\\n```\\"}
chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: ".md\\n - eslint-config.md\\n```\\" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3679 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":"n==================== END: ."} chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: "n==================== END: ." }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3707 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":"fortura-core/agents/nextjs-shadcn-dev"}
chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: "fortura-core/agents/nextjs-shadcn-dev" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3744 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":".md ====================\\n\",\n "}
chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: '.md ====================\\n",\n ' }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3777 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":" \"hints\": {\n "} chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: ' "hints": {\n ' }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3796 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":" \"recommendedIcon\": \"⚛️\",\n \"when"}
chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: ' "recommendedIcon": "⚛️",\n "when' }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3835 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":"ToUse\": \"Use when you need expert guidance on Next.js"}
chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: 'ToUse": "Use when you need expert guidance on Next.js' }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3888 chat-interface.tsx:323:25
[chat] Received chunk: {"type":"content","content":" development with TypeScript and shadcn/ui.\"\n }\n"}
{"type":"con chat-interface.tsx:302:19
[chat] Processing line: {"type":"content","content":" development with TypeScript and shadcn/ui.\"\n
}\n"} chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: ' development with TypeScript and shadcn/ui."\n }\n' }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3941 chat-interface.tsx:323:25
[chat] Processing line: {"type":"content","content":" }\n }\n}"} chat-interface.tsx:312:21
[chat] Parsed:
Object { type: "content", content: " }\n }\n}" }
chat-interface.tsx:316:23
[chat] Accumulated content length: 3952 chat-interface.tsx:323:25
[chat] Stream complete. Final content length: 3952``` heres the output from the model ```{
"messageType": "tool_call",
"content": "Packaging your agent now...",
"toolCall": {
"type": "tool_call",
"name": "create_agent_package",
"payload": {
"agentId": "custom-9f7c2b1a-3d4e-5f6a-7b8c-9d0e1f2a3b4c",
"displayName": "Next.js & shadcn/ui TypeScript Development Agent",
"summary": "Specialized agent for building, extending, and maintaining Next.js applications with
TypeScript and shadcn/ui components.",
"tags": ["nextjs", "typescript", "shadcn-ui", "web-dev"],
"systemPrompt": "# Web Agent Bundle Instructions
==================== START: .fortura-core/agents/nextjs-shadcn-dev.md ====================
# nextjs-shadcn-dev
CRITICAL: Read the full YAML, start activation to alter your state of being, follow startup section
instructions, stay in this being until told to exit this mode:
```yaml
activation-instructions:
- ONLY load dependency files when user selects them for execution via command or request
- The agent.customization field ALWAYS takes precedence over any conflicting instructions
- When presenting options during conversations, always show as numbered options list, allowing the user to
type a number to select or execute
- STAY IN CHARACTER!
- Focus on Next.js development with shadcn/ui and TypeScript best practices
- Ensure strict type safety and component consistency
agent:\n name: Quinn
id: nextjs-shadcn-dev
title: Next.js Development Specialist
icon: \"⚛️\"
whenToUse: Use when building or maintaining Next.js applications with TypeScript and shadcn/ui component
library
customization: null
persona:
role: Expert Next.js Engineer & UI Composer
style: analytical, methodical, detail-oriented, pragmatic, collaborative
identity: I am Quinn, your specialist for crafting high-quality Next.js apps using TypeScript and shadcn/ui
components.
focus: Developing, debugging, and optimizing Next.js projects with TypeScript and shadcn/ui
core_principles:
- User-Centered Design - Prioritize developer ergonomics and end-user experience
- CRITICAL - Type Safety - Enforce strict TypeScript typings throughout the codebase
- CRITICAL - Component Consistency - Use shadcn/ui patterns consistently
- Performance Optimization - Follow Next.js best practices for SSR, SSG, and ISR
- CRITICAL - Anti-Hallucination - Only reference official Next.js and shadcn documentation
- Lazy Loading Philosophy - Load components and dependencies on demand
- Traceability - Document architectural decisions and code changes
commands:
- help: Show numbered list of available commands
- create-page: Scaffold a new Next.js page with TypeScript (uses task create-nextjs-page.md)
- add-component: Insert a shadcn/ui component into a file (uses task add-shadcn-component.md)
- lint-project: Run TypeScript linting and format checks (uses task lint-typescript.md)
- run-dev: Start the Next.js development server (uses task run-next-dev.md)
- build-prod: Build the Next.js project for production (uses task build-next-prod.md)
- validate-code {file}: Validate a TypeScript file against quality checklist (uses checklist
ts-code-validation.md)
- yolo: Toggle YOLO Mode (batch processing)
- exit: Say goodbye and abandon persona
dependencies:\n checklists:
- ts-code-validation.md
data:
- nextjs-docs.md
- shadcn-ui-docs.md
- typescript-best-practices.md
tasks:\n - create-nextjs-page.md
- add-shadcn-component.md
- lint-typescript.md
- run-next-dev.md
- build-next-prod.md
templates:
- nextjs-page-tmpl.yaml
- shadcn-component-tmpl.yaml
utils:
- format-checker.md
- eslint-config.md
```\n==================== END: .fortura-core/agents/nextjs-shadcn-dev.md ====================
",
"hints": {
"recommendedIcon": "⚛️",
"whenToUse": "Use when you need expert guidance on Next.js development with TypeScript and shadcn/ui."
}
}
}
}```
● Ah! I see the issue now. The n8n response has both content AND a tool call in the same message. The model is
streaming the content ("Packaging your agent now...") but then also has messageType: "tool_call" with the
full payload.
Looking at the logs, I can see the tool call JSON is being sent as content chunks instead of being detected
as a tool call. The API route needs to detect when the entire message is a tool call structure.
The issue is that n8n is sending the whole JSON object as streaming content chunks, not as a distinct tool
call. We need to buffer and detect the complete structure. Let me fix this:
● Update(src/app/api/chat/route.ts)
⎿  Updated src/app/api/chat/route.ts with 62 additions and 29 removals
272 })
273 }
274
275 - // Create a streaming response that forwards n8n chunks to the client
275 + // Read the entire response first to check if it's a tool call
276 const reader = response.body.getReader()
277 const decoder = new TextDecoder()
278 - let buffer = "" // Buffer for incomplete JSON lines
278 + let fullResponse = ""
279
280 - console.log("[v0] Starting to stream response from n8n...")
280 + console.log("[v0] Reading response from n8n...")
281
282 + // Read all chunks
283 + while (true) {
284 + const { done, value } = await reader.read()
285 + if (done) break
286 + fullResponse += decoder.decode(value, { stream: true })
287 + }
288 +
289 + console.log("[v0] Full response received, length:", fullResponse.length)
290 + console.log("[v0] First 500 chars:", fullResponse.substring(0, 500))
291 +
292 + // Try to parse as single JSON object first (tool call case)
293 + try {
294 + const parsed = JSON.parse(fullResponse)
295 +
296 + // Check if this is a tool call response
297 + if (parsed.messageType === "tool_call" && parsed.toolCall) {
298 + console.log("[v0] Detected tool call response")
299 + // Send the content first if present
300 + if (parsed.content) {
301 + const contentChunk = JSON.stringify({ type: "content", content: parsed.content }) +
+ "\n"
302 + return new Response(contentChunk + JSON.stringify({ type: "tool_call", toolCall:
+ parsed.toolCall }) + "\n", {
303 + headers: {
304 + "Content-Type": "text/plain; charset=utf-8",
305 + "Cache-Control": "no-cache",
306 + },
307 + })
308 + } else {
309 + // Just the tool call
310 + return new Response(JSON.stringify({ type: "tool_call", toolCall: parsed.toolCall
+ }) + "\n", {
311 + headers: {
312 + "Content-Type": "text/plain; charset=utf-8",
313 + "Cache-Control": "no-cache",
314 + },
315 + })
316 + }
317 + }
318 +
319 + // Check if this is a regular message
320 + if (parsed.messageType === "regular_message" && parsed.content) {
321 + console.log("[v0] Detected regular message response")
322 + return new Response(JSON.stringify({ type: "content", content: parsed.content }) +
+ "\n", {
323 + headers: {
324 + "Content-Type": "text/plain; charset=utf-8",
325 + "Cache-Control": "no-cache",
326 + },
327 + })
328 + }
329 + } catch (parseError) {
330 + console.log("[v0] Not a single JSON object, treating as streaming chunks")
331 + }
332 +
333 + // If not a single JSON, process as newline-delimited streaming chunks
334 const stream = new ReadableStream({
335 async start(controller) {
336 try {
337 - while (true) {
338 - const { done, value } = await reader.read()
337 + const lines = fullResponse.split("\n")
338
339 - if (done) {
340 - console.log("[v0] n8n stream complete. Buffer remaining:", buffer.substring(0,
- 100))
341 - // Process any remaining buffered data
342 - if (buffer.trim()) {
343 - await processLine(buffer.trim(), controller, flags)
344 - }
345 - controller.close()
346 - break
339 + for (const line of lines) {
340 + if (line.trim()) {
341 + console.log("[v0] Processing line:", line.substring(0, 100))
342 + await processLine(line.trim(), controller, flags)
343 }
344 -
345 - // Decode chunk and add to buffer
346 - const chunk = decoder.decode(value, { stream: true })
347 - console.log("[v0] n8n chunk received:", chunk.substring(0, 200))
348 - buffer += chunk
349 -
350 - // Process complete lines (newline-delimited JSON)
351 - const lines = buffer.split("\n")
352 - buffer = lines.pop() || "" // Keep incomplete line in buffer
353 -
354 - for (const line of lines) {
355 - if (line.trim()) {
356 - console.log("[v0] Processing n8n line:", line.substring(0, 100))
357 - await processLine(line.trim(), controller, flags)
358 - }
359 - }
344 }
345 +
346 + controller.close()
347 } catch (error) {
348 console.error("[v0] Stream error:", error)
349 controller.error(error)
● Good! Now the API route will:
1. Read the full response first (buffering everything)
2. Try to parse as a single JSON object - if it's a tool call or regular message, handle it specially
3. Fall back to line-by-line streaming if it's newline-delimited chunks
This means:
- Tool calls will be properly detected and sent to the client
- Regular messages will work as before
- True streaming (newline-delimited) will still work
However, this removes true streaming because we're buffering the entire response. If you want real
token-by-token streaming from n8n, your n8n workflow needs to output newline-delimited JSON chunks like:
{"type":"item","content":"Hello "}
{"type":"item","content":"world"}
Instead of a single JSON object. But for now, this will fix the tool call detection. Test Morgan creating an
agent and it should work!
● Try asking Morgan to create an agent now - the tool call should be properly detected and the AgentForgeCard
should appear!
> same issue, the change didnt make a difference with morgan. and the other agents that arent trying to
generate tool calls have clean messages but no streaming. read
@.fortura-core/web-agents/agent-architect-web.md - this will show you how the model is working.
⎿  Read .fortura-core/web-agents/agent-architect-web.md (2000+ lines)
● I see the issue now! Looking at the Morgan prompt, the model outputs a single JSON object with the complete
response, not newline-delimited streaming chunks. The n8n workflow is set to "Streaming" mode but Morgan
outputs one complete JSON blob.
The current code buffers everything and tries to parse it as a single JSON (which works), but then it's not
streaming token-by-token.
The real problem: n8n's "streaming mode" with this setup sends the entire response at once, not
token-by-token. For true streaming, you need n8n to configure the AI node differently.
But let me check something - when you see "no streaming" for other agents, are they also sending complete
JSON blobs? Let me verify what the actual n8n response format is. Can you send me a message to a non-Morgan
agent and share the server logs showing what [v0] Full response received displays?
For now, let me add a workaround that will at least simulate streaming by breaking up the content
character-by-character when we receive a complete blob:
● Update(src/app/api/chat/route.ts)
⎿  Updated src/app/api/chat/route.ts with 46 additions and 21 removals
296 // Check if this is a tool call response
297 if (parsed.messageType === "tool_call" && parsed.toolCall) {
298 console.log("[v0] Detected tool call response")
299 - // Send the content first if present
300 - if (parsed.content) {
301 - const contentChunk = JSON.stringify({ type: "content", content: parsed.content }) +
- "\n"
302 - return new Response(contentChunk + JSON.stringify({ type: "tool_call", toolCall:
- parsed.toolCall }) + "\n", {
303 - headers: {
304 - "Content-Type": "text/plain; charset=utf-8",
305 - "Cache-Control": "no-cache",
306 - },
307 - })
308 - } else {
309 - // Just the tool call
310 - return new Response(
- JSON.stringify({ type: "tool_call", toolCall: parsed.toolCall }) + "\n", {
311 - headers: {
312 - "Content-Type": "text/plain; charset=utf-8",
313 - "Cache-Control": "no-cache",
314 - },
315 - })
316 - }
299 +
300 + // Create a simulated stream that sends content first, then tool call
301 + const stream = new ReadableStream({
302 + async start(controller) {
303 + // Send content if present
304 + if (parsed.content) {
305 + const contentChunk = JSON.stringify({ type: "content", content: parsed.content
+ }) + "\n"
306 + controller.enqueue(new TextEncoder().encode(contentChunk))
307 + }
308 +
309 + // Send tool call
310 + const toolCallChunk =
+ JSON.stringify({ type: "tool_call", toolCall: parsed.toolCall }) + "\n"
311 + controller.enqueue(new TextEncoder().encode(toolCallChunk))
312 +
313 + controller.close()
314 + }
315 + })
316 +
317 + return new Response(stream, {
318 + headers: {
319 + "Content-Type": "text/plain; charset=utf-8",
320 + "Cache-Control": "no-cache",
321 + },
322 + })
323 }
324
325 - // Check if this is a regular message
325 + // Check if this is a regular message - simulate streaming by chunking
326 if (parsed.messageType === "regular_message" && parsed.content) {
327 - console.log("[v0] Detected regular message response")
328 - return new Response(JSON.stringify({ type: "content", content: parsed.content }) +
- "\n", {
327 + console.log("[v0] Detected regular message response, simulating streaming")
328 +
329 + const stream = new ReadableStream({
330 + async start(controller) {
331 + const content = parsed.content
332 + const chunkSize = 50 // Send ~50 chars at a time for smooth streaming effect
333 +
334 + for (let i = 0; i < content.length; i += chunkSize) {
335 + const chunk = content.substring(i, i + chunkSize)
336 + const streamChunk = JSON.stringify({ type: "content", content: chunk }) + "\n"
337 + controller.enqueue(new TextEncoder().encode(streamChunk))
338 +
339 + // Small delay to simulate streaming (optional, can be removed)
340 + await new Promise(resolve => setTimeout(resolve, 10))
341 + }
342 +
343 + controller.close()
344 + }
345 + })
346 +
347 + return new Response(stream, {
348 headers: {
349 "Content-Type": "text/plain; charset=utf-8",
350 "Cache-Control": "no-cache",
● Perfect! Now the code will:
1. Detect tool calls (Morgan creating agents) and stream the content first, then the tool call
2. Simulate streaming for regular messages by breaking them into ~50 character chunks with a small delay
3. Handle true streaming if n8n sends newline-delimited chunks
This gives you the ChatGPT-like streaming effect even though n8n is sending complete responses. The tool
call should now work correctly too - Morgan's narration ("Packaging your agent now...") will appear first,
then the AgentForgeCard will render.
Try it now! Both streaming and tool calls should work.
> and tool calls are now not working whatsoever, and streaming is not working at all. the streaming IS working
from n8n and we can see that from the logs, the problem is that it breaks all of our current methods for tool
calls and i doubt we could even render it
● You're right - I see the issue now. By buffering the entire response to check if it's a tool call, we lost
the true streaming from n8n. And by trying to detect tool calls in the buffered response, we broke the
original tool call handling.
Let me revert to true streaming and handle tool calls properly within the stream:
● Update(src/app/api/chat/route.ts)
⎿  Updated src/app/api/chat/route.ts with 28 additions and 85 removals
272 })
273 }
274
275 - // Read the entire response first to check if it's a tool call
275 + // Stream the response from n8n, processing chunks in real-time
276 const reader = response.body.getReader()
277 const decoder = new TextDecoder()
278 - let fullResponse = ""
278
279 - console.log("[v0] Reading response from n8n...")
279 + console.log("[v0] Starting to stream response from n8n...")
280
281 - // Read all chunks
282 - while (true) {
283 - const { done, value } = await reader.read()
284 - if (done) break
285 - fullResponse += decoder.decode(value, { stream: true })
286 - }
281 + const stream = new ReadableStream({
282 + async start(controller) {
283 + let buffer = ""
284
285 - console.log("[v0] Full response received, length:", fullResponse.length)
286 - console.log("[v0] First 500 chars:", fullResponse.substring(0, 500))
285 + try {
286 + while (true) {
287 + const { done, value } = await reader.read()
288
289 - // Try to parse as single JSON object first (tool call case)
290 - try {
291 - const parsed = JSON.parse(fullResponse)
292 -
293 - // Check if this is a tool call response
294 - if (parsed.messageType === "tool_call" && parsed.toolCall) {
295 - console.log("[v0] Detected tool call response")
296 -
297 - // Create a simulated stream that sends content first, then tool call
298 - const stream = new ReadableStream({
299 - async start(controller) {
300 - // Send content if present
301 - if (parsed.content) {
302 - const contentChunk = JSON.stringify({ type: "content", content: parsed.content
- }) + "\n"
303 - controller.enqueue(new TextEncoder().encode(contentChunk))
289 + if (done) {
290 + console.log("[v0] n8n stream complete. Buffer remaining:", buffer.substring(0,
+ 100))
291 + // Process any remaining buffered data
292 + if (buffer.trim()) {
293 + await processLine(buffer.trim(), controller, flags)
294 + }
295 + controller.close()
296 + break
297 }
298
299 - // Send tool call
300 - const toolCallChunk = JSON.stringify({ type: "tool_call", toolCall:
- parsed.toolCall }) + "\n"
301 - controller.enqueue(new TextEncoder().encode(toolCallChunk))
299 + // Decode chunk and add to buffer
300 + const chunk = decoder.decode(value, { stream: true })
301 + console.log("[v0] n8n chunk received (length:", chunk.length, ")")
302 + buffer += chunk
303
304 - controller.close()
305 - }
306 - })
304 + // Process complete lines (newline-delimited JSON)
305 + const lines = buffer.split("\n")
306 + buffer = lines.pop() || "" // Keep incomplete line in buffer
307
308 - return new Response(stream, {
309 - headers: {
310 - "Content-Type": "text/plain; charset=utf-8",
311 - "Cache-Control": "no-cache",
312 - },
313 - })
314 - }
315 -
316 - // Check if this is a regular message - simulate streaming by chunking
317 - if (parsed.messageType === "regular_message" && parsed.content) {
318 - console.log("[v0] Detected regular message response, simulating streaming")
319 -
320 - const stream = new ReadableStream({
321 - async start(controller) {
322 - const content = parsed.content
323 - const chunkSize = 50 // Send ~50 chars at a time for smooth streaming effect
324 -
325 - for (let i = 0; i < content.length; i += chunkSize) {
326 - const chunk = content.substring(i, i + chunkSize)
327 - const streamChunk = JSON.stringify({ type: "content", content: chunk }) + "\n"
328 - controller.enqueue(new TextEncoder().encode(streamChunk))
329 -
330 - // Small delay to simulate streaming (optional, can be removed)
331 - await new Promise(resolve => setTimeout(resolve, 10))
308 + for (const line of lines) {
309 + if (line.trim()) {
310 + console.log("[v0] Processing n8n line:", line.substring(0, 100))
311 + await processLine(line.trim(), controller, flags)
312 + }
313 }
314 -
315 - controller.close()
314 }
315 - })
316 -
317 - return new Response(stream, {
318 - headers: {
319 - "Content-Type": "text/plain; charset=utf-8",
320 - "Cache-Control": "no-cache",
321 - },
322 - })
323 - }
324 - } catch (parseError) {
325 - console.log("[v0] Not a single JSON object, treating as streaming chunks")
326 - }
327 -
328 - // If not a single JSON, process as newline-delimited streaming chunks
329 - const stream = new ReadableStream({
330 - async start(controller) {
331 - try {
332 - const lines = fullResponse.split("\n")
333 -
334 - for (const line of lines) {
335 - if (line.trim()) {
336 - console.log("[v0] Processing line:", line.substring(0, 100))
337 - await processLine(line.trim(), controller, flags)
338 - }
339 - }
340 -
341 - controller.close()
315 } catch (error) {
316 console.error("[v0] Stream error:", error)
317 controller.error(error)
● Good! Now I've restored true streaming. The problem you're seeing is that the processLine function doesn't
properly detect Morgan's tool call format. Looking back at the logs you shared, Morgan sends:
{
"messageType": "tool_call",
"content": "Packaging your agent now...",
"toolCall": { ... }
}
But this comes as one complete JSON line, not as streamed chunks. Let me update processLine to handle this
exact format:
● Update(src/app/api/chat/route.ts)
⎿  Updated src/app/api/chat/route.ts with 19 additions and 13 removals
99 return
100 }
101
102 - // Handle n8n Code node output format - check if this is the direct response
103 - // Sometimes n8n sends: { "messageType": "regular_message", "content": "..." }
102 + // Handle n8n Code node output format - TOOL CALL (Morgan creating agents)
103 + // Format: { "messageType": "tool_call", "content": "...", "toolCall": {...} }
104 + if (data.messageType === "tool_call" && data.toolCall) {
105 + console.log("[v0] Morgan-style tool call detected!")
106 +
107 + // Send content first if present
108 + if (data.content) {
109 + const contentChunk = JSON.stringify({ type: "content", content: data.content }) +
+ "\n"
110 + controller.enqueue(new TextEncoder().encode(contentChunk))
111 + }
112 +
113 + // Send the tool call
114 + const toolCallChunk = JSON.stringify({ type: "tool_call", toolCall: data.toolCall }) +
+ "\n"
115 + controller.enqueue(new TextEncoder().encode(toolCallChunk))
116 + return
117 + }
118 +
119 + // Handle n8n Code node output format - REGULAR MESSAGE
120 + // Format: { "messageType": "regular_message", "content": "..." }
121 if (data.messageType === "regular_message" && data.content) {
122 console.log("[v0] Direct Code node output: regular_message")
123 const chunk = JSON.stringify({ type: "content", content: data.content }) + "\n"
...
108 return
109 }
110
111 - if (data.messageType === "tool_call" && data.toolCall) {
112 - console.log("[v0] Direct Code node output: tool_call")
113 - const chunk = JSON.stringify({
114 - type: "tool_call",
115 - toolCall: data.toolCall,
116 - content: data.content || ""
117 - }) + "\n"
118 - controller.enqueue(new TextEncoder().encode(chunk))
119 - return
120 - }
121 -
111 // Handle wrapped n8n Code node output format
112 let parsedOutput = null
113 if (Array.isArray(data) && data.length > 0 && data[0].output) {
● Perfect! Now the code:
1. Streams in real-time from n8n (no buffering)
2. Detects Morgan's tool call format at lines 104-116
3. Sends content first, then tool call (so the narration appears, then AgentForgeCard)
The key fix was moving the messageType === "tool_call" check before the wrapped format checks, and properly
sending both the content and toolCall as separate chunks.
Try it now! Morgan should work, streaming should work, and tool calls should appear correctly.
> yup none of those things happened: [agents] Loaded 2 agents
GET /api/agents 200 in 266ms
[chat] Sending to webhook: {
agentId: 'agent-2',
message: 'Yolo mode! Build an agent that specializes in designing brand language, have fun with it and get
creative, no questions! Yolo mode!',
timestamp: '2025-11-15T16:39:59.238Z',
sessionId: 'session-agent-2-1763224249817-80ogrxzratj'
}
GET /api/flags 200 in 6ms
GET /api/flags 200 in 8ms
[v0] Webhook response status: 200
[v0] Starting to stream response from n8n...
[v0] n8n chunk received (length: 507 )
[v0] Processing n8n line:
{"type":"begin","metadata":{"nodeId":"0002bb49-ab7b-46b2-b611-1c21ab2affee","nodeName":"AI Agent","i
[v0] Unhandled JSON structure:
{"type":"begin","metadata":{"nodeId":"0002bb49-ab7b-46b2-b611-1c21ab2affee","nodeName":"AI Agent","i
[v0] Processing n8n line: {"type":"item","content":"{\n
","metadata":{"nodeId":"0002bb49-ab7b-46b2-b611-1c21ab2affee","nodeNam
[v0] Streaming content chunk: {
[v0] Processing n8n line: {"type":"item","content":" \"messageType\":
\"","metadata":{"nodeId":"0002bb49-ab7b-46b2-b611-1c21ab
[v0] Streaming content chunk: "messageType": "
[v0] n8n chunk received (length: 4285 )
[v0] Processing n8n line: {"type":"item","content":"tool_call\",\n \"content\": \"Packaging your agent
now...\",\n \"","meta
[v0] Streaming content chunk: tool_call",
"content": "Packaging your agent now
[v0] Processing n8n line: {"type":"item","content":"toolCall\": {\n \"type\": \"tool_call\",\n \"name\":
\"","metadata":
[v0] Streaming content chunk: toolCall": {
"type": "tool_call",
"name":
[v0] Processing n8n line: {"type":"item","content":"create_agent_package\",\n \"payload\": {\n
\"agentId\": \"custom-"
[v0] Streaming content chunk: create_agent_package",
"payload": {
"age
[v0] Processing n8n line: {"type":"item","content":"9f8b2c1a\",\n \"displayN
● Ah! Now I see what's happening! n8n IS streaming, but it's streaming the JSON structure itself as text
chunks, not complete JSON objects per line!
Look at the logs:
{"type":"item","content":"{\n ","metadata":...
{"type":"item","content":" \"messageType\": \"","metadata":...
{"type":"item","content":"tool_call\",\n \"content\":...
n8n is sending type: "item" chunks where the content field contains fragments of the JSON response. The code
is currently just forwarding these fragments as-is, which means the client receives literal text like "{\n
" and " \"messageType\": \"".
We need to:
1. Accumulate these type: "item" chunks
2. Detect when a complete JSON object is formed
3. Parse and send the complete tool call
Let me fix this:
● Update(src/app/api/chat/route.ts)
⎿  Updated src/app/api/chat/route.ts with 61 additions and 7 removals
287 const stream = new ReadableStream({
288 async start(controller) {
289 let buffer = ""
290 + let jsonAccumulator = "" // Accumulate JSON fragments from type:item chunks
291
292 try {
293 while (true) {
294 const { done, value } = await reader.read()
295
296 if (done) {
297 - console.log("[v0] n8n stream complete. Buffer remaining:", buffer.substring(0,
- 100))
298 - // Process any remaining buffered data
299 - if (buffer.trim()) {
300 - await processLine(buffer.trim(), controller, flags)
297 + console.log("[v0] n8n stream complete. Accumulated JSON:", jsonAccumulator
+ .substring(0, 200))
298 +
299 + // Try to parse accumulated JSON as final attempt
300 + if (jsonAccumulator.trim()) {
301 + try {
302 + const parsed = JSON.parse(jsonAccumulator)
303 + console.log("[v0] Final JSON parse successful, messageType:",
+ parsed.messageType)
304 +
305 + if (parsed.messageType === "tool_call" && parsed.toolCall) {
306 + // Send content first
307 + if (parsed.content) {
308 + const contentChunk = JSON.stringify({ type: "content", content:
+ parsed.content }) + "\n"
309 + controller.enqueue(new TextEncoder().encode(contentChunk))
310 + }
311 + // Send tool call
312 + const toolCallChunk = JSON.stringify({ type: "tool_call", toolCall:
+ parsed.toolCall }) + "\n"
313 + controller.enqueue(new TextEncoder().encode(toolCallChunk))
314 + } else if (parsed.messageType === "regular_message" && parsed.content) {
315 + const chunk = JSON.stringify({ type: "content", content: parsed.content
+ }) + "\n"
316 + controller.enqueue(new TextEncoder().encode(chunk))
317 + }
318 + } catch (e) {
319 + console.error("[v0] Failed to parse accumulated JSON:", e)
320 + }
321 }
322 +
323 controller.close()
324 break
325 }
...
312 buffer = lines.pop() || "" // Keep incomplete line in buffer
313
314 for (const line of lines) {
315 - if (line.trim()) {
316 - console.log("[v0] Processing n8n line:", line.substring(0, 100))
317 - await processLine(line.trim(), controller, flags)
315 + if (!line.trim()) continue
316 +
317 + try {
318 + const data = JSON.parse(line)
319 +
320 + // Handle type: "item" - these are JSON fragments we need to accumulate
321 + if (data.type === "item" && data.content) {
322 + console.log("[v0] Accumulating JSON fragment:", data.content.substring(0,
+ 50))
323 + jsonAccumulator += data.content
324 +
325 + // Try to parse accumulated JSON to see if complete
326 + try {
327 + const parsed = JSON.parse(jsonAccumulator)
328 + console.log("[v0] Complete JSON detected! messageType:",
+ parsed.messageType)
329 +
330 + // We have a complete JSON object - process it
331 + if (parsed.messageType === "tool_call" && parsed.toolCall) {
332 + console.log("[v0] Tool call complete!")
333 + // Don't send yet - wait for stream to complete
334 + } else if (parsed.messageType === "regular_message" && parsed.content) {
335 + console.log("[v0] Regular message complete!")
336 + // Don't send yet - wait for stream to complete
337 + }
338 + } catch {
339 + // Not complete yet, keep accumulating
340 + }
341 + continue
342 + }
343 +
344 + // Handle other line types
345 + console.log("[v0] Processing non-item line:", line.substring(0, 100))
346 + await processLine(line, controller, flags)
347 +
348 + } catch (e) {
349 + console.error("[v0] Failed to parse line:", line.substring(0, 100), e)
350 }
351 }
352 }
● Good! But I see the issue - we're waiting until the stream completes to send the tool call. For regular
messages, we want to stream the content as it arrives. Let me fix this to handle both cases properly:
● Update(src/app/api/chat/route.ts)
⎿  Updated src/app/api/chat/route.ts with 19 additions and 13 removals
339 try {
340 const data = JSON.parse(line)
341
342 - // Handle type: "item" - these are JSON fragments we need to accumulate
342 + // Handle type: "item" - these are content chunks OR JSON fragments
343 if (data.type === "item" && data.content) {
344 - console.log("[v0] Accumulating JSON fragment:", data.content.substring(0,
- 50))
344 + // First, try to parse as JSON to see if we're getting structured response
345 jsonAccumulator += data.content
346
347 - // Try to parse accumulated JSON to see if complete
347 + // Try to parse accumulated JSON
348 try {
349 const parsed = JSON.parse(jsonAccumulator)
350 console.log("[v0] Complete JSON detected! messageType:",
parsed.messageType)
351 + // We have complete JSON - it will be sent when stream ends
352 + continue
353 + } catch {
354 + // Not complete JSON yet - could be:
355 + // 1. Still accumulating JSON fragments (tool call case)
356 + // 2. Plain text content (regular streaming case)
357
358 - // We have a complete JSON object - process it
359 - if (parsed.messageType === "tool_call" && parsed.toolCall) {
360 - console.log("[v0] Tool call complete!")
361 - // Don't send yet - wait for stream to complete
362 - } else if (parsed.messageType === "regular_message" && parsed.content) {
363 - console.log("[v0] Regular message complete!")
364 - // Don't send yet - wait for stream to complete
358 + // If accumulator looks like it's building JSON (starts with {), keep
+ buffering
359 + if (jsonAccumulator.trim().startsWith('{')) {
360 + console.log("[v0] Buffering JSON fragment:", data.content.substring(0,
+ 30))
361 + continue
362 }
363 - } catch {
364 - // Not complete yet, keep accumulating
363 +
364 + // Otherwise, treat as streaming text content
365 + console.log("[v0] Streaming text content:", data.content.substring(0,
+ 50))
366 + const chunk = JSON.stringify({ type: "content", content: data.content })
+ + "\n"
367 + controller.enqueue(new TextEncoder().encode(chunk))
368 + continue
369 }
370 - continue
370 }
371
372 // Handle other line types
● Perfect! Now the code will:
1. Accumulate JSON fragments when building a structured response (tool calls)
2. Stream plain text immediately for regular messages
3. Detect when JSON is complete and send it at the end
This should give you:
- Token-by-token streaming for regular agent responses
- Proper tool call handling for Morgan (accumulates the JSON, then sends content + tool call)
Try it now - both streaming and tool calls should work!
Reference in New Issue View Git Blame Copy Permalink