Vercel AI SDK Integration
Nuxt AI seamlessly integrates the Vercel AI SDK (ai & @ai-sdk/vue) into your Nuxt application, providing auto-imports for all the SDK's composables and utilities.
What is the Vercel AI SDK?
The Vercel AI SDK is a library that makes it easy to build AI-powered user interfaces with:
- Streaming - First-class support for streaming responses from AI providers
- Vue Hooks - Composables for common AI interaction patterns
- Edge Runtime - Support for Edge Runtime and streaming responses
- Multiple Providers - Support for various AI providers like OpenAI, Anthropic, and more
Features Provided by Nuxt AI
The Nuxt AI module enhances the Vercel AI SDK experience in Nuxt by providing:
Auto-imports
All composables and utilities from the Vercel AI SDK are automatically imported, so you can use them directly in your components:
<script setup>
const { messages, input, handleSubmit } = useChat({
api: '/api/chat'
})
</script>
TypeScript Support
Full TypeScript support for all Vercel AI SDK components and utilities.
Available Functions from ai
The following functions are auto-imported from the Vercel AI SDK:
| Function | Description | Example |
|---|---|---|
streamText | For streaming text | ts const stream = streamText('Hello, world!') |
streamObject | For streaming structured objects | ts const stream = streamObject({ name: 'John', age: 30 }) |
generateText | For generating text | ts const text = generateText('Hello, world!') |
generateObject | For generating structured objects | ts const object = generateObject({ name: 'John', age: 30 }) |
tool | For creating tools | ts const tool = tool({ name: 'John', age: 30 }) |
zodToJsonSchema | For converting Zod schemas to JSON schemas | ts const schema = zodToJsonSchema(z.object({ name: z.string(), age: z.number() })) |
Available Components from @ai-sdk/vue
The following components are auto-imported from the Vercel AI SDK:
| Component | Description | Example |
|---|---|---|
Message | For displaying AI messages | vue <Message :message="message" /> |
ChatMessages | For displaying a list of messages | vue <ChatMessages :messages="messages" /> |
Textarea | For inputting text | vue <Textarea v-model="input" /> |
Available Composables`
The following composables are auto-imported from the Vercel AI SDK:
| Composable | Description | Example |
|---|---|---|
useChat | For building chat interfaces with AI models | vue const { messages, input, handleSubmit } = useChat({ api: '/api/chat' }) |
useCompletion | For simple text completion | vue const { completion, complete } = useCompletion({ api: '/api/completion' }) |
useObjectGeneration | For generating structured objects | vue const { object, generateObject } = useObjectGeneration({ api: '/api/object-generation' }) |
useAssistant | For managing assistants and threads | vue const { assistant, setAssistant } = useAssistant({ api: '/api/assistant' }) |
Getting Started
To start using the Vercel AI SDK in your Nuxt AI application:
- Configure the AI providers you want to use in your
nuxt.config.ts - Create API endpoints in the
server/apidirectory - Use the auto-imported composables in your Vue components
For more detailed examples and a step-by-step guide on running your application with the Vercel AI SDK, visit the official Vercel AI SDK documentation.