128 lines
3.9 KiB
Markdown
128 lines
3.9 KiB
Markdown
|
|
|
|
# AI SDK
|
|
|
|
The [AI SDK](https://ai-sdk.dev/docs) is a TypeScript toolkit designed to help you build AI-powered applications using popular frameworks like Next.js, React, Svelte, Vue and runtimes like Node.js.
|
|
|
|
To learn more about how to use the AI SDK, check out our [API Reference](https://ai-sdk.dev/docs/reference) and [Documentation](https://ai-sdk.dev/docs).
|
|
|
|
## Installation
|
|
|
|
You will need Node.js 18+ and pnpm installed on your local development machine.
|
|
|
|
```shell
|
|
npm install ai
|
|
```
|
|
|
|
## Usage
|
|
|
|
### AI SDK Core
|
|
|
|
The [AI SDK Core](https://ai-sdk.dev/docs/ai-sdk-core/overview) module provides a unified API to interact with model providers like [OpenAI](https://ai-sdk.dev/providers/ai-sdk-providers/openai), [Anthropic](https://ai-sdk.dev/providers/ai-sdk-providers/anthropic), [Google](https://ai-sdk.dev/providers/ai-sdk-providers/google-generative-ai), and more.
|
|
|
|
You will then install the model provider of your choice.
|
|
|
|
```shell
|
|
npm install @ai-sdk/openai
|
|
```
|
|
|
|
###### @/index.ts (Node.js Runtime)
|
|
|
|
```ts
|
|
import { generateText } from 'ai';
|
|
import { openai } from '@ai-sdk/openai'; // Ensure OPENAI_API_KEY environment variable is set
|
|
|
|
const { text } = await generateText({
|
|
model: openai('gpt-4o'),
|
|
system: 'You are a friendly assistant!',
|
|
prompt: 'Why is the sky blue?',
|
|
});
|
|
|
|
console.log(text);
|
|
```
|
|
|
|
### AI SDK UI
|
|
|
|
The [AI SDK UI](https://ai-sdk.dev/docs/ai-sdk-ui/overview) module provides a set of hooks that help you build chatbots and generative user interfaces. These hooks are framework agnostic, so they can be used in Next.js, React, Svelte, and Vue.
|
|
|
|
You need to install the package for your framework:
|
|
|
|
```shell
|
|
npm install @ai-sdk/react
|
|
```
|
|
|
|
###### @/app/page.tsx (Next.js App Router)
|
|
|
|
```tsx
|
|
'use client';
|
|
|
|
import { useChat } from '@ai-sdk/react';
|
|
|
|
export default function Page() {
|
|
const { messages, input, handleSubmit, handleInputChange, status } =
|
|
useChat();
|
|
|
|
return (
|
|
<div>
|
|
{messages.map(message => (
|
|
<div key={message.id}>
|
|
<strong>{`${message.role}: `}</strong>
|
|
{message.parts.map((part, index) => {
|
|
switch (part.type) {
|
|
case 'text':
|
|
return <span key={index}>{part.text}</span>;
|
|
|
|
// other cases can handle images, tool calls, etc
|
|
}
|
|
})}
|
|
</div>
|
|
))}
|
|
|
|
<form onSubmit={handleSubmit}>
|
|
<input
|
|
value={input}
|
|
placeholder="Send a message..."
|
|
onChange={handleInputChange}
|
|
disabled={status !== 'ready'}
|
|
/>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
###### @/app/api/chat/route.ts (Next.js App Router)
|
|
|
|
```ts
|
|
import { streamText } from 'ai';
|
|
import { openai } from '@ai-sdk/openai';
|
|
|
|
export async function POST(req: Request) {
|
|
const { messages } = await req.json();
|
|
|
|
const result = streamText({
|
|
model: openai('gpt-4o'),
|
|
system: 'You are a helpful assistant.',
|
|
messages,
|
|
});
|
|
|
|
return result.toUIMessageStreamResponse();
|
|
}
|
|
```
|
|
|
|
## Templates
|
|
|
|
We've built [templates](https://vercel.com/templates?type=ai) that include AI SDK integrations for different use cases, providers, and frameworks. You can use these templates to get started with your AI-powered application.
|
|
|
|
## Community
|
|
|
|
The AI SDK community can be found on [GitHub Discussions](https://github.com/vercel/ai/discussions) where you can ask questions, voice ideas, and share your projects with other people.
|
|
|
|
## Contributing
|
|
|
|
Contributions to the AI SDK are welcome and highly appreciated. However, before you jump right into it, we would like you to review our [Contribution Guidelines](https://github.com/vercel/ai/blob/main/CONTRIBUTING.md) to make sure you have smooth experience contributing to AI SDK.
|
|
|
|
## Authors
|
|
|
|
This library is created by [Vercel](https://vercel.com) and [Next.js](https://nextjs.org) team members, with contributions from the [Open Source Community](https://github.com/vercel/ai/graphs/contributors).
|