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 beginnen, 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 dem von Ihnen verwendeten KI-Modellanbieter (z. B. OpenAI) müssen Sie den entsprechenden API-Schlüssel festlegen. Normalerweise müssen Sie OPENAI_API_KEY oder andere relevante Umgebungsvariablen in die .env-Datei aufnehmen.

Verwendungsschritte

Grundlegende Texterstellung

import { generateText } from 'ai';
importiere { openai } von '@ai-sdk/openai';
async function main() {
const { text } = await generateText({
model: openai('gpt-4-turbo'), system: 'Sie sind ein freundlicher Benutzer.
system: 'Sie sind ein freundlicher Helfer!' ,
prompt: 'Warum ist der Himmel blau?' ,
});
console.log(text);
}
main();
import { generateText } from 'ai' ;
importieren { OpenAi } '@ai-sdk/openai' ;
Asynchrone Funktionen Main () {
const {text} = warte auf generateText ({
model: OpenAi( 'GPT-4-Turbo' ).
system: 'Du bist ein freundlicher Assistent!' ,
prompt: 'Warum ist der Himmel blau?' ,
});
console.log(text); ;
}
main();

• 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:

importiere { useChat } von 'ai/react' ;
function Chat() {
const { messages, input, handleInputChange, handleSubmit } = useChat();
return (
<div>
<ul>
{messages.map((m, index) =&gt; (
<li key="{index}">{m.role}: {m.content}</li>
))}
</ul>
<form onsubmit="{handleSubmit}">
<input 
value="{input}" 
onchange="{handleInputChange}" 
placeholder="Sagen Sie etwas..."
/>
<button type="submit">Senden Sie</button>
<input type="hidden" name="trp-form-language" value="de"/></form>
</div>
);
}
importiere { useChat } von 'ai/react';
function chat() {
const {message, input, handleinputChange, handlesubmit} = usechat();
Gibt zurück (
DIV
3cul
{ messages.map((m, index) = (
li key = {index} {m.role}: {m.content}/li
))}
/ul
form onsubmit = {handlesubmit}
%3Punkte
Wert

• Beschreibung: Dieses Beispiel demonstriert die Verwendung von useChat-Hooks zur schnellen Erstellung 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'; async function submitMessage()
const stream = await streamUI({
// ... Füllen Sie hier Ihre Konfiguration aus
}); return { ui: stream.value }; const stream = streamUI({ // ...
return { ui: stream.value }; }
}
importiere { streamUI } von 'ai/rsc' ;
asynchrone Funktion subtmessage ( ) {
"Server benutzen";
const stream = warte auf streamUI ( {
// ... Füllen Sie hier Ihre Konfiguration aus
});
Rückgabe { 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.