Understanding the Anatomy of StreamData

[peterje]

I have a pre-existing ReAct agent that I am trying to instrument with the AI SDK to make the client side experience richer. I'll omit some details for brevity, but my current attempt looks like:

agent.stream().pipeThrough(
  new TransformStream()<StreamEvent,DataStreamString>
    {
      transform: (myCustomChunk, controller) => {
        switch (myCustomChunk.event) {
          case "on_tool_start": {
            controller.enqueue(
              formatDataStreamPart("tool_call", {
                toolCallId: getToolCallID(myCustomChunk),
                toolName: getToolName(myCustomChunk),
                args: getToolArgs(myCustomChunk),
              }),
            );
            break;
          }
          case "on_tool_end": {
            controller.enqueue(
              formatDataStreamPart("tool_result", {
                toolCallId: getToolCallID(myCustomChunk),
                result: getToolResult(myCustomChunk),
              }),
            );
            break;
          }
          case "on_chat_model_stream": {
            controller.enqueue(
              formatDataStreamPart("text", getText(myCustomChunk)),
            );
            break;
          }
        }
      },
    },
);

After wrapping the stream with createDataStreamResponse, the data is being formatted correctly and sent to the client. Here's an example response:

0:"I'll"
0:" help you test the system,"
0:" but I'll need more specific information about what you'"
0:"d like to test or explore. Let"
0:" me start by showing you what courses"
0:" are available so we can better"
0:" focus our testing."
9:{"toolCallId":"call_5e4a50a2-0b51-451d-954d-962bdae2388d","toolName":"list_courses","args":"{\"noOp\":\"\"}"}
a:{"toolCallId":"call_5e4a50a2-0b51-451d-954d-962bdae2388d","result":"[\n  \"Grade 6\",\n  \"Grade 8\",\n  \"Grade 7\",\n  \"Algebra 2\",\n  \"Algebra 1\",\n  \"Geometry\",\n  \"Grade 2\",\n  \"Kindergarten\",\n  \"Grade 1\",\n  \"Grade 4\",\n  \"Extra Support Materials for Algebra 1\",\n  \"Grade 3\",\n  \"Grade 5\"\n]"}
0:"\n\nI"
0:" can help you:\n1. Explore specific"
0:" courses and their units\n2. Look"
0:" up particular lessons\n3. Access practice"
0:" problems\n4. Review assessments\n5. Create"
0:" student-facing materials\n\nWhat specifically would you like to test"
0:" or explore? Please let me know an"
0:"d I'll help guide you through the process."

All seems OK at first, but useChat begins to break. The messages from useChat are updated correctly until the first tool call stream part. After that point, the response continues to stream in correctly at the network layer, but the useChat hook does not do any further processing. Additionally, the onToolCall callback is never called.

Is there a fundamental issue with this format of stream (eg, text then tool calls then more text)? If not, is my integration simply missing required stream parts? It would be helpful to understand the general anatomy of a Stream<StreamDataString> to better understand how to integrate arbitrary systems as providers.

[lgrammel]

You are missing the finish step and finish message parts: https://sdk.vercel.ai/docs/ai-sdk-ui/stream-protocol#data-stream-protocol