vercel/ai

vercel 프로필

최근 기록된 소스 활동: 2026년 10월 13일 18:53

SkillsMP 카탈로그 업데이트: 2026년 10월 17일 00:09

수집된 skills: 13

GitHub 스타: 27,341
GitHub 포크: 5,353

저장소 README

README 원본 파일: README.md

README 원본 보기

README 전체 펼치기

![hero illustration](https://github.com/vercel/ai/blob/HEAD/assets/hero.gif) # AI SDK The [AI SDK](https://ai-sdk.dev/docs) 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](https://ai-sdk.dev/docs/reference) and [Documentation](https://ai-sdk.dev/docs). ## Installation You will need Node.js 22+ and npm (or another package manager) installed on your local development machine. ```shell npm install ai ``` ## Skill 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: ```shell npx skills add vercel/ai ``` ## Unified Provider Architecture The AI SDK provides a [unified API](https://ai-sdk.dev/docs/foundations/providers-and-models) 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), and [more](https://ai-sdk.dev/providers/ai-sdk-providers). By default, the AI SDK uses the [Vercel AI Gateway](https://vercel.com/docs/ai-gateway) to give you access to all major providers out of the box. Just pass a model string for any supported model: ```ts const result = await generateText({ model: 'anthropic/claude-opus-5.5', // or 'openai/gpt-6-astra', 'google/gemini-3.8-flash', etc. prompt: 'Hello!', }); ``` You can also connect to providers directly using their SDK packages: ```shell npm install @ai-sdk/openai @ai-sdk/anthropic @ai-sdk/google ``` ```ts import { anthropic } from '@ai-sdk/anthropic'; const result = await generateText({ model: anthropic('claude-opus-5-5'), // or openai('gpt-6-astra'), google('gemini-3.8-flash'), etc. prompt: 'Hello!', }); ``` ## Usage ### Generating Text ```ts import { generateText } from 'ai'; const { text } = await generateText({ model: 'openai/gpt-6-astra', // use Vercel AI Gateway prompt: 'What is an agent?', }); ``` ### Generating Structured Data ```ts import { generateText, Output } from 'ai'; import { z } from 'zod'; const { output } = await generateText({ model: 'openai/gpt-6-astra', 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 ```ts import { ToolLoopAgent } from 'ai'; const sandboxAgent = new ToolLoopAgent({ model: 'openai/gpt-6-astra', 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](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, e.g.: ```shell npm install @ai-sdk/react ``` #### Agent @/agent/image-generation-agent.ts ```ts import { openai } from '@ai-sdk/openai'; import { ToolLoopAgent, InferAgentUIMessage } from 'ai'; export const imageGenerationAgent = new ToolLoopAgent({ model: 'openai/gpt-6-astra', tools: { generateImage: openai.tools.imageGeneration({ partialImages: 3, }), }, }); export type ImageGenerationAgentMessage = InferAgentUIMessage< typeof imageGenerationAgent >; ``` #### Route (Next.js App Router) @/app/api/chat/route.ts ```tsx 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 ```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 ```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](https://ai-sdk.dev/docs/introduction#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](https://community.vercel.com/c/ai-sdk/62) 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).

저장소 README를 불러오는 중…

이 저장소의 skills

소프트웨어 개발자 소프트웨어 품질 보증 분석가·테스터

직업 카테고리 2개 · 69% 분류됨

AI 어시스턴트로 설치

이 프롬프트를 복사해 사용 중인 AI 어시스턴트에 입력하세요.

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/vercel/ai.