AI

jotai-ai is a utility package compatible with Vercel AI SDK.

install

yarn add jotai-ai

chatAtoms

chatAtoms is a collection of atoms for a chatbot like useChat.

import { useAtomValue, useAtom, useSetAtom } from 'jotai'
import { chatAtoms } from 'jotai-ai'

const {
  messagesAtom,
  inputAtom,
  submitAtom,
  isLoadingAtom,
} = chatAtoms()

function Messages () {
  const messages = useAtomValue(messagesAtom)
  return (
    <>
      {messages.length > 0
        ? messages.map(m => (
          <div key={m.id} className='whitespace-pre-wrap'>
            {m.role === 'user' ? 'User: ' : 'AI: '}
            {m.content}
          </div>
        ))
        : null}
    </>
  )
}

function ChatInput() {
  const [input, handleInputChange] = useAtom(inputAtom)
  const handleSubmit = useSetAtom(submitAtom)
  return (
    <form onSubmit={handleSubmit}>
      <input
        value={input}
        placeholder='Say something...'
        onChange={handleInputChange}
      />
    </form>
  )
}

function App() {
  const isLoading = useAtomValue(isLoadingAtom)
  return (
    <main>
      <Messages />
      <ChatInput />
      {isLoading ? <div>Loading...</div> : null}
    </main>
  )
}

Comparison with useChat

useChat is a hook provided by Vercel AI SDK, which is a wrapper of swr in React, swrv in Vue, and sswr in Svelte. They actually have the different behaviors in the different frameworks.

chatAtoms provider a more flexible way to create the chatbot, which is based on jotai atoms, so you can use it in framework-agnostic way.

Also, chatAtoms is created out of the Component lifecycle, so you can share the atoms between different components.