GetNotes Tools
vercel/ai
Tool นี้คืออะไร
Vercel AI SDK เป็นไลบรารีที่ครอบคลุมสำหรับนักพัฒนาที่ต้องการสร้างแอปพลิเคชัน AI แบบสตรีมมิ่งด้วย React, Svelte และ Vue โดยช่วยให้สามารถจัดการสถานะการแชทและเชื่อมต่อกับผู้ให้บริการ AI หลากหลายได้อย่างง่ายดาย
ข้อมูลโปรเจกต์
ดาว
25.5K
Forks
4.8K
License
ไม่ระบุ
อัปเดต GitHub ล่าสุด
14 ก.ค. 2569
เพิ่มใน GetNotes
14 ก.ค. 2569
Repository
vercel/ai
รูปแบบ
เหมาะกับงาน
เหมาะกับอาชีพ
Ecosystem
Next.js · React · Svelte · TypeScript · Vue
แปลและเรียบเรียงโดย AI
เนื้อหาฉบับภาษาไทย
ใช้อ่านเพื่อทำความเข้าใจเบื้องต้น โปรดตรวจสอบรายละเอียดสำคัญกับเอกสารต้นฉบับด้านล่าง
Vercel AI SDK
Vercel AI SDK เป็นไลบรารีที่ครอบคลุมสำหรับสร้างแอปพลิเคชันที่ขับเคลื่อนด้วย AI ด้วย React, Svelte และ Vue โดยมีเครื่องมือสำหรับสตรีมข้อความ, จัดการสถานะการแชท และผสานรวมกับผู้ให้บริการ AI ต่างๆ เช่น OpenAI, Anthropic และ Google
คุณสมบัติ
- Streaming UI: สร้างส่วนต่อประสานผู้ใช้แบบไดนามิกที่สตรีมมิ่งสำหรับการตอบสนองจาก AI
- Provider Agnostic: ทำงานร่วมกับ OpenAI, Anthropic, Google Gemini และอื่นๆ
- Framework Support: ผสานรวมได้อย่างราบรื่นกับ React, Svelte และ Vue
- Edge-ready: ปรับให้เหมาะสมสำหรับ Vercel Edge Functions
การติดตั้ง
npm install ai
# หรือ
yarn add ai
# หรือ
pnpm add aiการใช้งาน
การเติมข้อความแชท (Chat Completion)
import { useChat } from 'ai/react';
function MyChatComponent() {
const { messages, input, handleInputChange, handleSubmit } = useChat();
return (
<div>
{messages.map(m => (
<div key={m.id}>
{m.role}: {m.content}
</div>
))}
<form onSubmit={handleSubmit}>
<input value={input} onChange={handleInputChange} placeholder="Say something..." />
<button type="submit">Send</button>
</form>
</div>
);
}การมีส่วนร่วม
เรายินดีรับการมีส่วนร่วม! โปรดดู คู่มือการมีส่วนร่วม ของเรา
เอกสารโปรเจกต์
อ่านเอกสารต้นฉบับ
README วิธีติดตั้ง วิธีใช้งาน และข้อกำหนดจาก repository ต้นฉบับ
AI SDK
The AI SDK is a provider-agnostic TypeScript toolkit designed to help you build AI-powered applications and agents using popular UI frameworks like Next.js, React, Svelte, Vue, Angular, and runtimes like Node.js.
To learn more about how to use the AI SDK, check out our API Reference and Documentation.
Installation
You will need Node.js 22+ and npm (or another package manager) installed on your local development machine.
npm install aiSkill for Coding Agents
If you use coding agents such as Claude Code or Cursor, we highly recommend adding the AI SDK skill to your repository:
npx skills add vercel/aiUnified Provider Architecture
The AI SDK provides a unified API to interact with model providers like OpenAI, Anthropic, Google, and more.
By default, the AI SDK uses the Vercel AI Gateway to give you access to all major providers out of the box. Just pass a model string for any supported model:
const result = await generateText({
model: 'anthropic/claude-opus-4.6', // or 'openai/gpt-5.4', 'google/gemini-3-flash', etc.
prompt: 'Hello!',
});You can also connect to providers directly using their SDK packages:
npm install @ai-sdk/openai @ai-sdk/anthropic @ai-sdk/googleimport { anthropic } from '@ai-sdk/anthropic';
const result = await generateText({
model: anthropic('claude-opus-4-6'), // or openai('gpt-5.4'), google('gemini-3-flash'), etc.
prompt: 'Hello!',
});Usage
Generating Text
import { generateText } from 'ai';
const { text } = await generateText({
model: 'openai/gpt-5.4', // use Vercel AI Gateway
prompt: 'What is an agent?',
});Generating Structured Data
import { generateText, Output } from 'ai';
import { z } from 'zod';
const { output } = await generateText({
model: 'openai/gpt-5.4',
output: Output.object({
schema: z.object({
recipe: z.object({
name: z.string(),
ingredients: z.array(
z.object({ name: z.string(), amount: z.string() }),
),
steps: z.array(z.string()),
}),
}),
}),
prompt: 'Generate a lasagna recipe.',
});Agents
import { ToolLoopAgent } from 'ai';
const sandboxAgent = new ToolLoopAgent({
model: 'openai/gpt-5.4',
system: 'You are an agent with access to a shell environment.',
tools: {
shell: openai.tools.localShell({
execute: async ({ action }) => {
const [cmd, ...args] = action.command;
const sandbox = await getSandbox(); // Vercel Sandbox
const command = await sandbox.runCommand({ cmd, args });
return { output: await command.stdout() };
},
}),
},
});UI Integration
The AI SDK UI 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, e.g.:
npm install @ai-sdk/reactAgent @/agent/image-generation-agent.ts
import { openai } from '@ai-sdk/openai';
import { ToolLoopAgent, InferAgentUIMessage } from 'ai';
export const imageGenerationAgent = new ToolLoopAgent({
model: 'openai/gpt-5.4',
tools: {
generateImage: openai.tools.imageGeneration({
partialImages: 3,
}),
},
});
export type ImageGenerationAgentMessage = InferAgentUIMessage<
typeof imageGenerationAgent
>;Route (Next.js App Router) @/app/api/chat/route.ts
import { imageGenerationAgent } from '@/agent/image-generation-agent';
import { createAgentUIStreamResponse } from 'ai';
export async function POST(req: Request) {
const { messages } = await req.json();
return createAgentUIStreamResponse({
agent: imageGenerationAgent,
messages,
});
}UI Component for Tool @/component/image-generation-view.tsx
import { openai } from '@ai-sdk/openai';
import { UIToolInvocation } from 'ai';
export default function ImageGenerationView({
invocation,
}: {
invocation: UIToolInvocation<ReturnType<typeof openai.tools.imageGeneration>>;
}) {
switch (invocation.state) {
case 'input-available':
return <div>Generating image...</div>;
case 'output-available':
return <img src={`data:image/png;base64,${invocation.output.result}`} />;
}
}Page @/app/page.tsx
'use client';
import { ImageGenerationAgentMessage } from '@/agent/image-generation-agent';
import ImageGenerationView from '@/component/image-generation-view';
import { useChat } from '@ai-sdk/react';
export default function Page() {
const { messages, status, sendMessage } =
useChat<ImageGenerationAgentMessage>();
const [input, setInput] = useState('');
const handleSubmit = e => {
e.preventDefault();
sendMessage({ text: input });
setInput('');
};
return (
<div>
{messages.map(message => (
<div key={message.id}>
<strong>{`${message.role}: `}</strong>
{message.parts.map((part, index) => {
switch (part.type) {
case 'text':
return <div key={index}>{part.text}</div>;
case 'tool-generateImage':
return <ImageGenerationView key={index} invocation={part} />;
}
})}
</div>
))}
<form onSubmit={handleSubmit}>
<input
value={input}
onChange={e => setInput(e.target.value)}
disabled={status !== 'ready'}
/>
</form>
</div>
);
}Templates
We've built templates 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 the Vercel Community 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 to make sure you have smooth experience contributing to AI SDK.
Authors
This library is created by Vercel and Next.js team members, with contributions from the Open Source Community.