diff --git a/docs/third-party-libraries/ai.mdx b/docs/third-party-libraries/ai.mdx new file mode 100644 index 0000000000..c26e09d053 --- /dev/null +++ b/docs/third-party-libraries/ai.mdx @@ -0,0 +1,83 @@ +--- +title: AI +description: A Jōtai utility package compatible with Vercel AI SDK. +nav: 9.01 +keywords: ai,vercel +--- + +[jotai-ai](https://github.com/himself65/jotai-ai) is a utility package compatible with [Vercel AI SDK](https://sdk.vercel.ai/docs). + +## install + +``` +yarn add jotai-ai +``` + +## chatAtoms + +`chatAtoms` is a collection of atoms for a chatbot like [`useChat`](https://sdk.vercel.ai/docs/api-reference/use-chat). + +```js +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 => ( +
+ {m.role === 'user' ? 'User: ' : 'AI: '} + {m.content} +
+ )) + : null} + + ) +} + +function ChatInput() { + const [input, handleInputChange] = useAtom(inputAtom) + const handleSubmit = useSetAtom(submitAtom) + return ( +
+ +
+ ) +} + +function App() { + const isLoading = useAtomValue(isLoadingAtom) + return ( +
+ + + {isLoading ?
Loading...
: null} +
+ ) +} +``` + +### 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 state between different components easily. + +Even you are using `useChat` in React, its requirements React 18.0.0+.