Essential utilities that extend and improve the Vercel AI SDK experience. State management, debugging tools, and streaming data management - everything you need to build advanced AI interfaces like canvas, workflows, and more.
Powerful Zustand-based state management for AI applications. Eliminate prop drilling and manage chat state globally with full TypeScript support.
Debug and monitor your AI applications with real-time insights into tool calls, state changes, and performance metrics.
Handle real-time data streams, user interactions, and complex state updates for advanced interfaces like canvas tools and workflow builders.
Battle-tested tools used in production applications. Optimized for performance, reliability, and scalability in real-world AI applications.
Full TypeScript support with intelligent autocompletion, type safety, and comprehensive type definitions for all AI SDK tools.
Works seamlessly with React, Next.js, and other modern frameworks. Compatible with SSR, concurrent features, and edge runtime environments.
import { useChat } from 'ai-sdk-zustand' function Chat() { useChat({ api: '/api/chat' }) return ( <div> <MessageList /> <MessageInput /> </div> ) } function MessageList() { const messages = useChatMessages() return ( <div> {messages.map(msg => ( <div key={msg.id}> {msg.content} </div> ))} </div> ) }
import { AIDevtools } from '@ai-sdk/devtools' function App() { return ( <div> <Chat /> {process.env.NODE_ENV === 'development' && ( <AIDevtools /> )} </div> ) } // Automatically tracks: // - Tool calls // - State changes // - Performance metrics // - Error handling
import { useArtifacts } from '@ai-sdk/artifacts' function ArtifactViewer() { const { artifacts, save, load } = useArtifacts() return ( <div> {artifacts.map(artifact => ( <div key={artifact.id}> <h3>{artifact.title}</h3> <pre>{artifact.content}</pre> <button onClick={() => save(artifact)}> Save </button> </div> ))} </div> ) }
Install individual packages or get the complete toolkit for building AI applications.