AI chat state that scales with your application.

Extends Vercel AI SDK with powerful state management that eliminates prop drilling within your chat components, ensuring better performance and cleaner architecture.

npm i @ai-sdk-tools/store

Used by

◇ Live State Access

│ Messages: 0

│ Status: ready

│ Loading: ○

└ State updated in real-time

◇ Messages (0)

No messages yet. Send one below to see live updates!

Access Chat from Any Component

Say goodbye to prop drilling. Access chat state from any component in your app without passing props through multiple layers.

Optimized Re-renders

Components only re-render when their specific data changes. Better performance through selective subscriptions and state isolation.

Custom Selectors

Create custom selectors for any derived state with full TypeScript support and complete type safety throughout your application.

Zero Breaking Changes

Drop-in replacement with the exact same API. Migrate in seconds without changing any existing code or component structure.

Tool Calls & Custom Types

Full support for custom message types, tool calls, and metadata with the same great developer experience you're used to.

Global State Management

Built on Zustand for reliable, performant global state that works seamlessly with React's concurrent features and SSR.

Implementation

◇ Before (@ai-sdk/react)

// Chat.tsx - Everything in one place
import { useChat } from '@ai-sdk/react'
import { DefaultChatTransport } from 'ai'

function Chat() {
  const { messages, sendMessage, isLoading } = useChat({
    transport: new DefaultChatTransport({
      api: '/api/chat'
    })
  })
  
  // Pass everything as props
  return (
    <div>
      <Header chatCount={messages.length} />
      <MessageList messages={messages} />
      <MessageInput 
        onSend={sendMessage} 
        disabled={isLoading} 
      />
      <StatusBar isLoading={isLoading} />
      <Sidebar messages={messages} />
    </div>
  )
}

// Props drilling nightmare!
// Every component needs props passed down

◇ After (@ai-sdk-tools/store)

// Chat.tsx - Clean initialization
import { useChat } from '@ai-sdk-tools/store'
import { DefaultChatTransport } from 'ai'

function Chat() {
  useChat({
    transport: new DefaultChatTransport({
      api: '/api/chat'
    })
  })
  
  // No props needed!
  return (
    <div>
      <Header />
      <MessageList />
      <MessageInput />
      <StatusBar />
      <Sidebar />
    </div>
  )
}

// MessageList.tsx - Clean component
function MessageList() {
  const messages = useChatMessages()
  const status = useChatStatus()
  
  return (
    <div>
      {messages.map(msg => (
        <div key={msg.id}>{msg.content}</div>
      ))}
      {status === 'streaming' && <div>AI thinking...</div>}
    </div>
  )
}

git: (main)$ npm i @ai-sdk-tools/store

Drop-in replacement for @ai-sdk/react with global state management.