ToolInput crashes the tree while tool input is streaming (input is undefined, CodeBlock calls code.split)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.4k
- Forks
- 283
- Avg merge
- 32m
- Merged PRs (30d)
- 1
Description
Components: tool.tsx (ToolInput), code-block.tsx (CodeBlockContent)
What happens
While a tool part is in input-streaming, part.input is undefined. ToolInput renders <CodeBlock code={JSON.stringify(input, null, 2)} /> (tool.tsx:125); JSON.stringify(undefined) returns undefined, and createRawTokens calls code.split("\n") on it (code-block.tsx:171, from the useMemo at :384):
TypeError: Cannot read properties of undefined (reading 'split')
createRawTokens src/components/ai-elements/code-block.tsx:171
CodeBlockContent src/components/ai-elements/code-block.tsx:384
React unmounts the tree, so the whole chat stops rendering, not just the tool card. The props type allows it: ToolPart["input"] is unknown.
Repro
Render a tool part in every state:
<Tool>
<ToolHeader type="dynamic-tool" state={part.state} toolName={part.toolName} />
<ToolContent>
<ToolInput input={part.input} />
<ToolOutput output={part.output} errorText={part.errorText} />
</ToolContent>
</Tool>
and stream a tool call whose input arrives in deltas. Observed stream: tool-input-start → tool-input-delta → tool-input-available; the crash happens on the render between the first two.
Observed with @ai-sdk/langchain 3.0.99, ai 7.0.99, @ai-sdk/react 4.0.102, React 19.3.0, Vite 8.3.0, components added from the @ai-elements registry on 2026-09-13. The same code is on main today. The throw is in render code, so the framework should not matter.
Workaround
Render ToolInput only once the input exists: {part.input !== undefined && <ToolInput input={part.input} />}.
Possible fix
Return null (or a pending placeholder) from ToolInput when input === undefined, or make CodeBlock tolerate a non-string code.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in tool.tsx at ToolInput and trace its input into CodeBlockContent in code-block.tsx, especially createRawTokens and the useMemo. Reproduce the input-streaming sequence with undefined input, then verify the tool card and surrounding chat continue rendering through input-available without a split-related error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 88/100