Loading pattern preview
Loading preview…
PatternsSDK API
Tool Input Lifecycle Hooks
Tool Input Lifecycle Hooks
Explore tool input lifecycle hooks: onInputStart, onInputDelta, and onInputAvailable. See how to track tool input generation in real-time during streaming.
Loading pattern preview
Loading preview…
Problems solved
Technical challenges this implementation handles out of the box.
- Observe tool input generation with onInputStart
- Stream partial tool arguments via onInputDelta
- React when full tool input becomes available with onInputAvailable
Use cases
Products and workflows this pattern is designed to support.
- Debugging streaming tool argument construction
- UI spinners tied to tool input lifecycle events
- Teaching AI SDK tool input hooks
- Monitoring long tool-argument generation
Setup
Requirements, wiring steps, and what this pattern adds to your project.
Getting started
Pick how you want to pull this pattern in — then wire env vars and routes the same way.
- 1
Install from the preview toolbar
Copy the install command above and run it in your project — Pro patterns include a short-lived token.
- 2
Add environment variables to .env.local
OPENAI_API_KEY
- 3
Point client fetches at your API routes
Replace preview `/view/.../api/...` paths with `/api/...` in the installed files.
- 4
Customize the agent and tool files
Adapt prompts, tools, and stop conditions for your product — Copy for AI in the toolbar helps seed that work.
- 5
Run your dev server and open the pattern route
Install dependencies if needed, then start the app and verify responses.
Environment variables
OPENAI_API_KEYGet key
Capabilities
AI SDK APIs
streamTextconvertToModelMessagestooluseChatonInputStartonInputDeltaonInputAvailableProviders
OpenAI
Files added
6 filesapp/page.tsxapp/layout.tsxapp/api/tool-input-lifecycle/route.tscomponents/input-lifecycle-demo.tsxtools/weather.tstools/weather-ui.tsx
Dependencies
14 totalnpm packages
7AISDKshadcn/uilucide-reactNext.jsReactstreamdownZod
Registry components
alertemptyinput-groupseparatormessage-scrollermessagebubble
Critical files
tools/weather.tsWeather tool demonstrating all three tool input lifecycle hooks: onInputStart, onInputDelta, and onInputAvailable. Core pattern for monitoring tool input generation.
Requirements
- Complexity
- Beginner
- Setup time
- ~5 minutes
- Node
- 24+
- Memory
- 512MB
