Vercel AI SDK : créer des applications alimentées par l'IA avec les frameworks frontaux les plus répandus

Introduction générale

Le Vercel AI SDK est un outil open source développé par l'équipe Vercel pour aider les développeurs à créer des applications d'IA à l'aide de frameworks tels que React, Svelte, Vue et Solid. Il prend en charge plusieurs fournisseurs de modèles de langage, notamment OpenAI, Anthropic, Google Gémeaux Le SDK fournit une interface API unifiée qui permet aux développeurs d'intégrer rapidement des fonctionnalités d'IA dans leurs projets. Le SDK offre également des capacités de réponse en temps réel et de génération d'interface utilisateur, ce qui simplifie grandement le processus de développement des applications d'IA.

Liste des fonctions

• Interface API unifiée : prise en charge de plusieurs fournisseurs de modèles d'IA, tels que OpenAI, Anthropic, Google, etc.
• Réponse en temps réel : permet de générer et d'afficher des réponses textuelles en temps réel, ce qui améliore l'expérience de l'utilisateur.
• Génération de l'interface utilisateur : utilisation de l'outil Réagir Les composants du serveur génèrent une interface utilisateur dynamique.
• Prise en charge de plusieurs cadres : compatible avec React, Svelte, Vue et Solid, offrant une large applicabilité.
• Soutien à la communauté : fournit une communauté de discussions GitHub où les utilisateurs peuvent poser des questions et partager des projets.

Utiliser l'aide

montage

Pour commencer à utiliser le Vercel AI SDK, vous aurez besoin des éléments suivants

1. Préparation environnementale :
   • Assurez-vous que Node.js 18+ et pnpm sont installés.
   • Créez un nouveau projet ou ajoutez ce SDK à un projet existant.
2. Installer le SDK :
   • Ouvrez votre terminal et naviguez jusqu'au répertoire de votre projet.
   • Exécutez la commande pnpm add ai pour installer le SDK.
3. Configurer les variables d'environnement :
   • En fonction du fournisseur de modèle d'IA que vous utilisez (par exemple OpenAI), définissez la clé API appropriée. En général, vous devrez ajouter OPENAI_API_KEY ou d'autres variables d'environnement pertinentes au fichier .env.

Étapes d'utilisation

Génération de textes de base

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）;
}
主要的（）;

• Description : Ce code montre comment générer du texte en utilisant les modèles d'OpenAI. generateText est l'une des fonctions principales fournies par le Vercel AI SDK, vous permettant de générer rapidement des réponses textuelles pilotées par l'IA.

Construire l'interface de chatSi vous souhaitez créer une interface de discussion, vous pouvez utiliser les crochets useChat ou useCompletion :

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点
价值

• Description : Cet exemple démontre l'utilisation des hooks useChat pour construire rapidement une interface de chat qui prend en charge les réponses en temps réel. Chaque fois que l'utilisateur envoie un message, l'IA génère et affiche une réponse en temps réel.

Générer l'interface utilisateurPour générer des interfaces utilisateur, le SDK Vercel AI prend en charge l'utilisation de composants serveur 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};
}

• Description : Il s'agit d'un exemple simple montrant comment générer des éléments d'interface utilisateur dynamiques à l'aide de la fonction streamUI. Avec RSC, le serveur peut générer et gérer directement l'état de l'interface utilisateur, offrant ainsi une expérience utilisateur plus fluide.

Utilisation avancée

• Prise en charge de plusieurs modèles : passez facilement d'un fournisseur de modèle d'IA à l'autre en modifiant les paramètres du modèle.
• Gestion des erreurs et débogage : utilisez les mécanismes de gestion des erreurs et les outils de débogage du SDK pour vous assurer que vos applications d'IA fonctionnent de manière stable.

Avec ces étapes et ces exemples, vous pouvez commencer à créer des applications basées sur l'IA qui exploitent la puissance fournie par le Vercel AI SDK pour augmenter la productivité de votre développement. Si vous rencontrez des problèmes lors de son utilisation, nous vous recommandons de visiter les discussions GitHub de Vercel pour bénéficier de l'aide de la communauté.