Vercel AI SDK: 널리 사용되는 프런트엔드 프레임워크로 AI 기반 애플리케이션 구축

1.1K 0

일반 소개

Vercel AI SDK는 개발자가 React, Svelte, Vue, Solid와 같은 프레임워크를 사용하여 AI 애플리케이션을 구축할 수 있도록 Vercel 팀에서 개발한 오픈 소스 도구입니다. OpenAI, Anthropic, Google 등 여러 언어 모델 제공업체를 지원합니다. 쌍둥이자리 SDK는 개발자가 AI 기능을 프로젝트에 빠르게 통합할 수 있는 통합 API 인터페이스를 제공합니다. 또한 SDK는 실시간 스트리밍 응답 및 사용자 인터페이스 생성 기능을 제공하여 AI 애플리케이션의 개발 프로세스를 크게 간소화합니다.

기능 목록

통합 API 인터페이스: OpenAI, Anthropic, Google 등 여러 AI 모델 제공업체를 지원합니다.
실시간 스트리밍 응답: 실시간으로 텍스트 응답을 생성하고 표시하여 사용자 경험을 향상시킬 수 있습니다.
사용자 인터페이스 생성: 사용자 인터페이스 생성 시 React 서버 컴포넌트는 동적 UI를 생성합니다.
멀티 프레임워크 지원: React, Svelte, Vue, Solid와 호환되어 폭넓은 적용성을 제공합니다.
커뮤니티 지원: 사용자가 질문하고 프로젝트를 공유할 수 있는 GitHub 토론 커뮤니티를 제공합니다.

도움말 사용

마운팅

Vercel AI SDK를 시작하려면 다음이 필요합니다:

환경 준비:
- Node.js 18+ 및 pnpm이 설치되어 있는지 확인하세요.
- 새 프로젝트를 만들거나 기존 프로젝트에 이 SDK를 추가하세요.
SDK를 설치합니다:
- 터미널을 열고 프로젝트 디렉터리로 이동합니다.
- pnpm add ai 명령을 실행하여 SDK를 설치합니다.
환경 변수를 구성합니다:
- 사용 중인 AI 모델 제공업체(예: OpenAI)에 따라 적절한 API 키를 설정합니다. 일반적으로 .env 파일에 OPENAI_API_KEY 또는 기타 관련 환경 변수를 추가해야 합니다.

사용 단계

기본 텍스트 생성

import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';
async function main() {
const { text } = await generateText({
model: openai('gpt-4-turbo'),
system: '你是一个友好的助手！',
prompt: '为什么天空是蓝色的？',
});
console.log(text);
}
main();
import { generateText } from 'ai';
导入{OpenAi } '@ai-sdk/openai' ;
异步 功能 主要的（ ） {
const {text} =等待generateText（{
模型：OpenAi（ 'GPT-4-Turbo' ），
system: '你是一个友好的助手！',
prompt: '为什么天空是蓝色的？',
});
控制台.log（text）;
}
主要的（）;

설명: 이 코드는 OpenAI의 모델을 사용하여 텍스트를 생성하는 방법을 보여줍니다. generateText는 Vercel AI SDK에서 제공하는 핵심 기능 중 하나로, AI 기반 텍스트 응답을 빠르게 생성할 수 있도록 해줍니다.

채팅 인터페이스 구축하기채팅 인터페이스를 구축하려면 사용Chat 또는 사용완료 훅을 사용하면 됩니다:

import { useChat } from 'ai/react';
function Chat() {
const { messages, input, handleInputChange, handleSubmit } = useChat();
return (
<div>
<ul>
{messages.map((m, index) => (
<li key={index}>{m.role}: {m.content}</li>
))}
</ul>
<form onSubmit={handleSubmit}>
<input 
value={input} 
onChange={handleInputChange} 
placeholder="Say something..."
/>
<button type="submit">Send</button>
</form>
</div>
);
}
import { useChat } from 'ai/react';
功能 聊天（ ） {
const {消息，输入，handleinputChange，handlesubmit} = usechat（）;
返回（
％3CDIV％3E
3cul％3E
{messages.map（（m，index）=％3E（
％3cli键= {index}％3E {m.role}：{m.content}％3C/li％3E
))}
％3C/ul％3E
％3cform onsubmit = {handlesubmit}％3E
％3点
价值

설명: 이 예에서는 useChat 훅을 사용하여 실시간 응답을 지원하는 채팅 인터페이스를 빠르게 구축하는 방법을 보여줍니다. 사용자가 메시지를 제출할 때마다 AI가 실시간으로 응답을 생성하고 표시합니다.

UI 생성사용자 인터페이스 생성을 위해 Vercel AI SDK는 React 서버 컴포넌트(RSC)의 사용을 지원합니다:

import { streamUI } from 'ai/rsc';
async function submitMessage() {
'use server';
const stream = await streamUI({
// ... 这里填写你的配置
});
return { ui: stream.value };
}
import { streamUI } from 'ai/rsc';
异步 功能 subtmessage （ ） {
“使用服务器” ；
const stream =等待流ui（{
// ... 这里填写你的配置
});
返回{ ui ：stream.value};
}