Store

High-performance state management for AI applications. Drop-in replacement for @ai-sdk/react with 3-5x performance improvements, O(1) message lookups, and built-in optimizations.

npm install @ai-sdk-tools/store

Why Use This?

❌ Regular useChat

• State trapped in one component
• Props everywhere for cross-component access
• Everything re-renders on any change
• Complex state management

✅ @ai-sdk-tools/store

• Global state access from any component
• No prop drilling needed
• Optimized re-renders with selective subscriptions
• Simplified architecture

Migration (30 seconds)

◇ One Line Change

Replace your import and everything else works exactly the same:

// Before
import { useChat } from '@ai-sdk/react'

// After - ONLY CHANGE NEEDED
import { useChat } from '@ai-sdk-tools/store'

Core Benefits

🌍 Global State

Access chat state from any component without prop drilling.

// Any component can access the state
function Header() {
  const { messages } = useChat()
  return <div>{messages.length} messages</div>
}

⚡ Performance

Optimized re-renders with selective subscriptions.

// Only re-renders when messages change
function MessageList() {
  const { messages } = useChat()
  return <div>{messages.map(...)}</div>
}

🔧 TypeScript

Full type safety with auto-completion and error checking.

// Full TypeScript support
const { messages, input, handleInputChange } = useChat<{
  role: 'user' | 'assistant'
  content: string
}>()

🔄 Compatibility

Drop-in replacement with the same API as @ai-sdk/react.

// Same API, better performance
const { messages, input, handleSubmit } = useChat({
  api: '/api/chat',
  onFinish: (message) => console.log(message)
})

Getting Started

1. Install the package

npm install @ai-sdk-tools/store

2. Create the store

// store.ts
import { createAIStore } from '@ai-sdk-tools/store'

export const store = createAIStore({
  initialMessages: [],
  onFinish: (message) => {
    console.log('Message finished:', message)
  },
})

3. Use in components

// ChatInput.tsx
import { useChat } from '@ai-sdk-tools/store'

export function ChatInput() {
  const { input, handleInputChange, handleSubmit } = useChat()
  
  return (
    <form onSubmit={handleSubmit}>
      <input
        value={input}
        onChange={handleInputChange}
        placeholder="Type a message..."
      />
    </form>
  )
}

Advanced Usage

Custom Hooks

Create custom hooks for specific parts of the state:

// Custom hook for messages only
function useMessages() {
  const { messages } = useChat()
  return messages
}

// Custom hook for loading state
function useIsLoading() {
  const { isLoading } = useChat()
  return isLoading
}

State Selectors

Use selectors to get specific parts of the state:

// Get only the last message
function useLastMessage() {
  const { messages } = useChat()
  return messages[messages.length - 1]
}

// Get message count
function useMessageCount() {
  const { messages } = useChat()
  return messages.length
}

API Reference

useChat

The main hook for accessing chat state and actions:

const {
  messages,        // Array of messages
  input,          // Current input value
  handleInputChange, // Input change handler
  handleSubmit,   // Form submit handler
  isLoading,      // Loading state
  error,          // Error state
  reload,         // Reload function
  stop,           // Stop function
  setMessages,    // Set messages function
  setInput,       // Set input function
} = useChat()

createAIStore

Create a new AI store instance:

const store = createAIStore({
  initialMessages: [], // Initial messages
  onFinish: (message) => {
    // Called when a message is finished
  },
  onError: (error) => {
    // Called when an error occurs
  },
})

Examples

Live Demo

Try the store in action with our interactive demo.

Try it out →

GitHub

View source code and more examples on GitHub.

View on GitHub →