Vercel AI SDK: Erstellung von KI-gestützten Anwendungen mit gängigen Front-End-Frameworks

Allgemeine Einführung

Das Vercel AI SDK ist ein Open-Source-Tool, das vom Vercel-Team entwickelt wurde, um Entwickler bei der Erstellung von KI-Anwendungen mit Frameworks wie React, Svelte, Vue und Solid zu unterstützen. Es unterstützt mehrere Sprachmodellanbieter, darunter OpenAI, Anthropic, Google Zwillinge Das SDK bietet eine einheitliche API-Schnittstelle, die es Entwicklern ermöglicht, KI-Funktionen schnell in ihre Projekte zu integrieren. Das SDK bietet außerdem Echtzeit-Streaming-Reaktions- und Benutzeroberflächen-Generierungsfunktionen, die den Entwicklungsprozess für KI-Anwendungen erheblich vereinfachen.

Funktionsliste

• Einheitliche API-Schnittstelle: unterstützt mehrere Anbieter von KI-Modellen, wie OpenAI, Anthropic, Google usw.
• Echtzeit-Streaming-Antwort: Ermöglicht die Generierung und Anzeige von Textantworten in Echtzeit und verbessert so das Benutzererlebnis.
• Generierung der Benutzeroberfläche: mit dem Reagieren Sie Server-Komponenten generieren dynamische Benutzeroberflächen.
• Multi-Framework-Unterstützung: Kompatibel mit React, Svelte, Vue und Solid, was eine breite Anwendbarkeit ermöglicht.
• Community-Support: Bietet eine GitHub-Diskussions-Community, in der Benutzer Fragen stellen und Projekte austauschen können.

Hilfe verwenden

Montage

Um mit dem Vercel AI SDK zu arbeiten, benötigen Sie Folgendes:

1. Vorbereitung der Umwelt:
   • Stellen Sie sicher, dass Sie Node.js 18+ und pnpm installiert haben.
   • Erstellen Sie ein neues Projekt oder fügen Sie dieses SDK zu einem bestehenden Projekt hinzu.
2. Installieren Sie das SDK:
   • Öffnen Sie Ihr Terminal und navigieren Sie zu Ihrem Projektverzeichnis.
   • Führen Sie den Befehl pnpm add ai aus, um das SDK zu installieren.
3. Konfigurieren Sie die Umgebungsvariablen:
   • Je nach Anbieter des KI-Modells, das Sie verwenden (z. B. OpenAI), legen Sie den entsprechenden API-Schlüssel fest. Normalerweise müssen Sie OPENAI_API_KEY oder andere relevante Umgebungsvariablen in die .env-Datei aufnehmen.

Verwendungsschritte

Grundlegende Texterstellung

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

• Beschreibung: Dieser Code zeigt, wie man mit den Modellen von OpenAI Text generiert. generateText ist eine der Kernfunktionen des Vercel AI SDK, mit der man schnell KI-gesteuerte Textantworten erzeugen kann.

Aufbau der Chat-SchnittstelleWenn Sie eine Chat-Schnittstelle erstellen möchten, können Sie die Hooks useChat oder useCompletion verwenden:

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

• Beschreibung: Dieses Beispiel demonstriert die Verwendung von useChat-Hooks zum schnellen Aufbau einer Chat-Schnittstelle, die Antworten in Echtzeit unterstützt. Jedes Mal, wenn der Benutzer eine Nachricht sendet, wird die KI eine Antwort in Echtzeit generieren und anzeigen.

UI generierenFür die Erstellung von Benutzeroberflächen unterstützt das Vercel AI SDK die Verwendung von React Server Components (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};
}

• Beschreibung: Dieses einfache Beispiel zeigt, wie man mit der streamUI-Funktion dynamische UI-Elemente erzeugt. Mit RSC kann der Server den UI-Status direkt generieren und verwalten, was eine reibungslosere Benutzererfahrung ermöglicht.

Erweiterte Nutzung

• Unterstützung mehrerer Modelle: Einfacher Wechsel zwischen verschiedenen KI-Modellanbietern durch Änderung der Modellparameter.
• Fehlerbehandlung und Debugging: Nutzen Sie die Fehlerbehandlungsmechanismen und Debugging-Tools des SDK, um sicherzustellen, dass Ihre KI-Anwendungen stabil laufen.

Mit diesen Schritten und Beispielen können Sie beginnen, KI-basierte Anwendungen zu erstellen, die die Leistung des Vercel AI SDK nutzen, um Ihre Entwicklungsproduktivität zu steigern. Sollten Sie bei der Verwendung auf Probleme stoßen, empfehlen wir Ihnen, die GitHub-Diskussionen von Vercel zu besuchen, um Unterstützung von der Community zu erhalten.