Skip to content

Commit 2eb7476

Browse files
jeremyphilemonjeremyphilemon
authored
chore: update contents of readme (#2140)
1 parent d7afff5 commit 2eb7476

File tree

2 files changed

+202
-22
lines changed

2 files changed

+202
-22
lines changed

‎assets/hero.gif

1.07 MB
Loading

‎packages/core/README.md

+202-22
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,217 @@
1-
# Vercel AI SDK
1+
![hero illustration](./assets/hero.gif)
22

3-
The Vercel AI SDK is **a library for building AI-powered streaming text and chat UIs**.
3+
# Vercel AI SDK
44

5-
## Features
5+
The [Vercel AI SDK](https://sdk.vercel.ai/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.
66

7-
- React, Svelte, Vue and Solid helpers for streaming text responses and building chat and completion UIs
8-
- React Server Components API for streaming [Generative UI](https://vercel.com/blog/ai-sdk-3-generative-ui)
9-
- First-class support for [OpenAI](https://openai.com), [Anthropic](https://www.anthropic.com), [Mistral](https://mistral.ai), [Perplexity](https://perplexity.ai), [AWS Bedrock](https://aws.amazon.com/bedrock/), [Azure](https://ai.azure.com), [Google Gemini](https://ai.google.dev), [Hugging Face](https://huggingface.co), [Fireworks](https://app.fireworks.ai), [Cohere](https://cohere.com), [LangChain](https://js.langchain.com/docs), [Replicate](https://replicate.com), Ollama, and more.
10-
- Node.js, Serverless, and [Edge Runtime](https://edge-runtime.vercel.app/) support
11-
- Lifecycle callbacks for saving completed streaming responses to a database (in the same request)
7+
To learn more about how to use the Vercel AI SDK, check out our [API Reference](https://sdk.vercel.ai/docs/reference) and [Documentation](https://sdk.vercel.ai/docs).
128

139
## Installation
1410

15-
```sh
16-
pnpm install ai
11+
You will need Node.js 18+ and pnpm installed on your local development machine.
12+
13+
```shell
14+
npm install ai
1715
```
1816

19-
View the full documentation and examples on [sdk.vercel.ai/docs](https://sdk.vercel.ai/docs).
17+
## Usage
2018

21-
## Authors
19+
### AI SDK Core
20+
21+
The [AI SDK Core](https://sdk.vercel.ai/docs/ai-sdk-core/overview) module provides a unified API to interact with model providers like [OpenAI](https://sdk.vercel.ai/providers/ai-sdk-providers/openai), [Anthropic](https://sdk.vercel.ai/providers/ai-sdk-providers/anthropic), [Google](https://sdk.vercel.ai/providers/ai-sdk-providers/google-generative-ai), and more.
22+
23+
You will then install the model provider of your choice.
24+
25+
```shell
26+
npm install @ai-sdk/openai
27+
```
28+
29+
###### @/index.ts (Node.js Runtime)
30+
31+
```ts
32+
import { generateText } from 'ai';
33+
import { openai } from '@ai-sdk/openai'; // Ensure OPENAI_API_KEY environment variable is set
34+
35+
async function main() {
36+
const { text } = await generateText({
37+
model: openai('gpt-4-turbo'),
38+
system: 'You are a friendly assistant!',
39+
prompt: 'Why is the sky blue?',
40+
});
41+
42+
console.log(text);
43+
}
44+
45+
main();
46+
```
47+
48+
### AI SDK UI
49+
50+
The [AI SDK UI](https://sdk.vercel.ai/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, Vue, and SolidJS.
51+
52+
###### @/app/page.tsx (Next.js Pages Router)
2253

23-
This library is created by [Vercel](https://vercel.com) and [Next.js](https://nextjs.org) team members, with contributions from:
54+
```tsx
55+
"use client"
2456

25-
- Jared Palmer ([@jaredpalmer](https://twitter.com/jaredpalmer)) - [Vercel](https://vercel.com)
26-
- Shu Ding ([@shuding\_](https://twitter.com/shuding_)) - [Vercel](https://vercel.com)
27-
- Max Leiter ([@max_leiter](https://twitter.com/max_leiter)) - [Vercel](https://vercel.com)
28-
- Malte Ubl ([@cramforce](https://twitter.com/cramforce)) - [Vercel](https://vercel.com)
29-
- Justin Ridgewell ([@jridgewell](https://github.com/jridgewell))
57+
import { useChat } from 'ai/react'
3058

31-
[Contributors](https://github.com/vercel/ai/graphs/contributors)
59+
export default function Page() {
60+
const { messages, input, handleSubmit, handleInputChange, isLoading } = useChat()
61+
62+
return (
63+
<div>
64+
{messages.map(message => (
65+
<div key={message.id}>
66+
<div>{message.role}</div>
67+
<div>{message.content}</div>
68+
</div>
69+
)}
70+
71+
<form onSubmit={handleSubmit}>
72+
<input
73+
value={input}
74+
placeholder="Send a message..."
75+
onChange={handleInputChange}
76+
disabled={isLoading}
77+
/>
78+
</form>
79+
</div>
80+
)
81+
}
82+
```
83+
84+
###### @/app/api/chat/route.ts (Next.js Pages Router)
85+
86+
```ts
87+
import { CoreMessage, streamText } from 'ai';
88+
import { openai } from '@ai-sdk/openai';
89+
90+
export async function POST(req: Request) {
91+
const { messages }: { messages: CoreMessage[] } = await req.json();
92+
93+
const result = await streamText({
94+
model: openai('gpt-4'),
95+
system: 'You are a helpful assistant.',
96+
messages,
97+
});
98+
99+
return result.toAIStreamResponse();
100+
}
101+
```
32102

33-
## Related: Deploy your own Next.js AI Chatbot
103+
### AI SDK RSC
34104

35-
If you're looking to for a full AI Chatbot application to jumpstart your AI journey, you should checkout [our sister OSS AI Chatbot project](https://github.com/vercel/ai-chatbot) or click the button below to deploy your own to [Vercel](https://vercel.com).
105+
The [AI SDK RSC](https://sdk.vercel.ai/docs/ai-sdk-rsc/overview) module provides an alternative API that also helps you build chatbots and generative user interfaces for frameworks that support [React Server Components](https://nextjs.org/docs/app/building-your-application/rendering/server-components) (RSC).
106+
107+
This API leverages the benefits of [Streaming](https://nextjs.org/docs/app/building-your-application/rendering/server-components#streaming) and [Server Actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations) offered by RSC, thus improving the developer experience of managing states between server/client and building generative user interfaces.
108+
109+
###### @/app/actions.tsx (Next.js App Router)
110+
111+
```tsx
112+
import { streamUI } from 'ai/rsc';
113+
import { z } from 'zod';
114+
115+
async function submitMessage() {
116+
'use server';
117+
118+
const stream = await streamUI({
119+
model: openai('gpt-4-turbo'),
120+
messages: [
121+
{ role: 'system', content: 'You are a friendly bot!' },
122+
{ role: 'user', content: input },
123+
],
124+
text: ({ content, done }) => {
125+
return <div>{content}</div>;
126+
},
127+
tools: {
128+
deploy: {
129+
description: 'Deploy repository to vercel',
130+
parameters: z.object({
131+
repositoryName: z
132+
.string()
133+
.describe('The name of the repository, example: vercel/ai-chatbot'),
134+
}),
135+
generate: async function* ({ repositoryName }) {
136+
yield <div>Cloning repository {repositoryName}...</div>;
137+
await new Promise(resolve => setTimeout(resolve, 3000));
138+
yield <div>Building repository {repositoryName}...</div>;
139+
await new Promise(resolve => setTimeout(resolve, 2000));
140+
return <div>{repositoryName} deployed!</div>;
141+
},
142+
},
143+
},
144+
});
145+
146+
return {
147+
ui: stream.value,
148+
};
149+
}
150+
151+
export const AI = createAI({
152+
initialAIState: {},
153+
initialUIState: {},
154+
actions: {
155+
submitMessage,
156+
},
157+
});
158+
```
159+
160+
###### @/app/layout.tsx (Next.js App Router)
161+
162+
```tsx
163+
import { ReactNode } from 'react';
164+
import { AI } from '@/app/actions';
165+
166+
export default function Layout({ children }: { children: ReactNode }) {
167+
<AI>{children}</AI>;
168+
}
169+
```
170+
171+
###### @/app/page.tsx (Next.js App Router)
172+
173+
```tsx
174+
import { useActions } from 'ai/rsc';
175+
import { ReactNode, useState } from 'react';
176+
177+
export default function Page() {
178+
const [input, setInput] = useState('');
179+
const [messages, setMessages] = useState<ReactNode[]>([]);
180+
const { submitMessage } = useActions();
181+
182+
return (
183+
<div>
184+
<input
185+
value={input}
186+
onChange={event => {
187+
setInput(event.target.value);
188+
}}
189+
/>
190+
<button
191+
onClick={async () => {
192+
const { ui } = await submitMessage(input);
193+
setMessages(currentMessages => [...currentMessages, ui]);
194+
}}
195+
>
196+
Submit
197+
</button>
198+
</div>
199+
);
200+
}
201+
```
202+
203+
## Templates
204+
205+
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.
206+
207+
## Community
208+
209+
The Vercel 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.
210+
211+
## Contributing
212+
213+
Contributions to the Vercel 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 Vercel AI SDK.
214+
215+
## Authors
36216

37-
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/templates/Next.js/nextjs-ai-chatbot)
217+
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).

0 commit comments

Comments
 (0)