Das Vercel AI SDK ist ein Toolkit zum Erstellen von KI-Anwendungen mit JavaScript und TypeScript. Seine einheitliche API ermöglicht Ihnen die Verwendung jedes beliebigen Sprachmodells und bietet leistungsstarke UI-Integrationen in führende Web-Frameworks wie Next.js und Svelte.
Vercel AI SDK 3.3 führt vier Hauptfunktionen ein:
Wir haben außerdem die Modellanbieter AWS Bedrock und Chrome AI (Community) sowie viele kleinere Funktionen und Ergänzungen hinzugefügt. Alle Änderungen inklusive kleinerer Features finden Sie in unserem Changelog.
Experimentelle Funktionen ermöglichen es Ihnen, die neueste AI SDK-Funktionalität so schnell wie möglich zu nutzen. Sie können sich jedoch in Patchversionen ändern. Bitte pinnen Sie die Patch-Version an, wenn Sie sich für die Verwendung experimenteller Funktionen entscheiden.
Angesichts der nichtdeterministischen Natur von Sprachmodellen ist Beobachtbarkeit für das Verständnis und die Entwicklung von KI-Anwendungen von entscheidender Bedeutung. Sie müssen in der Lage sein, Timing, Token-Nutzung, Eingabeaufforderungen und Antwortinhalte für einzelne Modellaufrufe zu verfolgen und zu verstehen.
Das Vercel AI SDK unterstützt jetzt die Ablaufverfolgung mit OpenTelemetry, einem Open-Source-Standard zur Aufzeichnung von Telemetrieinformationen, als experimentelle Funktion. Hier ist ein Beispiel dafür, wie die Trace-Visualisierung mit der Vercel Datadog-Integration aussieht:
Trace-Visualisierung mit Datadog und dem Vercel AI SDK
Sie können die AI SDK-Tracing-Daten mit Vercel-Observability-Integrationen wie Datadog, Sentry und Axiom analysieren. Alternativ können Sie LLM-Observability-Anbieter wie LangFuse, Braintrust oder LangSmith nutzen.
Um Telemetrie mit dem Vercel AI SDK verwenden zu können, müssen Sie es für Ihre Anwendung konfigurieren. Wir empfehlen die Verwendung von @vercel/otel. Wenn Sie Next.js verwenden und auf Vercel bereitstellen, können Sie instrumentation.ts mit dem folgenden Code zu Ihrem Projekt hinzufügen:
import { registerOTel } from '@vercel/otel';
export function register() {
registerOTel({ serviceName: 'your-project-nameapp' });
}
Da die Nachverfolgungsfunktion experimentell ist, müssen Sie sich für die Aufzeichnung von Informationen mithilfe der Option „experimental_telemetry“ anmelden. Sie können auch Funktions-IDs zur Identifizierung des Anrufstandorts sowie zusätzliche Metadaten angeben, die Sie aufzeichnen möchten.
const result = await generateText({
model: anthropic('claude-3-5-sonnet-20240620'),
prompt: 'Write a short story about a cat.',
experimental_telemetry: {
isEnabled: true,
functionId: 'my-awesome-function',
metadata: {
something: 'custom',
someOtherThing: 'other-value',
},
},
});
Durch die Aktivierung der Funktion werden Ablaufverfolgungsdaten für Ihre Funktionsaufrufe aufgezeichnet. Weitere Details finden Sie in der AI SDK-Telemetriedokumentation. Wenn Sie beginnen möchten, schauen Sie sich unsere bereitstellbare AI SDK Next.js-Tracing-Vorlage an.
In vielen KI-Chat-Anwendungen müssen Benutzer zusammen mit ihren Nachrichten Anhänge senden, z. B. Bilder, PDFs und verschiedene Mediendateien. Diese Anhänge müssen neben den Nachrichten auch für die Vorschau verfügbar sein, damit sie von Benutzern angezeigt werden können.
Aus diesem Grund haben wir experimentelle_attachments zum handleSubmit()-Handler des useChat()-React-Hooks hinzugefügt.
Bild- und Textanhänge mit useChat versenden
Sehen Sie sich dieses Beispiel in Aktion an und stellen Sie die Vorlage bereit.
Es gibt zwei Möglichkeiten, Anhänge mit einer Nachricht zu senden, entweder durch Bereitstellung eines FileList-Objekts oder einer Liste von URLs für die handleSubmit-Funktion:
Mit FileList können Sie mithilfe des Dateieingabeelements mehrere Dateien als Anhänge zusammen mit einer Nachricht senden. Der useChat-Hook wandelt sie automatisch in Daten-URLs um und sendet sie an den KI-Anbieter.
const { input, handleSubmit, handleInputChange } = useChat();
const [files, setFiles] = useState<FileList | undefined>(undefined);
return (
<form
onSubmit={(event) => {
handleSubmit(event, {
experimental_attachments: files,
});
}}
>
<input
type="file"
onChange={(event) => {
if (event.target.files) {
setFiles(event.target.files);
}
}}
multiple
/>
<input type="text" value={input} onChange={handleInputChange} />
</form>
);
Sie können URLs auch als Anhänge zusammen mit einer Nachricht senden. Dies kann nützlich sein, um Links zu externen Ressourcen oder Medieninhalten zu senden.
const { input, handleSubmit, handleInputChange } = useChat();
const [attachments] = useState<Attachment[]>([
{
name: 'earth.png',
contentType: 'image/png',
url: 'https://example.com/earth.png',
}
]);
return (
<form
onSubmit={event => {
handleSubmit(event, {
experimental_attachments: attachments,
});
}}
>
<input type="text" value={input} onChange={handleInputChange} />
</form>
)
Mehr erfahren Sie in unserem multimodalen Chatbot-Leitfaden.
Strukturierte Datengenerierung ist eine häufige Anforderung in KI-Anwendungen, z.B. zum Extrahieren von Informationen aus Eingaben in natürlicher Sprache. Mit dem neuen useObject-Hook können Sie die Generierung strukturierter Objekte direkt an den Client streamen. Mit dieser experimentellen Funktion, die heute für React verfügbar ist, können Sie dynamische Schnittstellen erstellen, die JSON-Objekte anzeigen, während sie gestreamt werden.
Stellen Sie sich zum Beispiel eine Anwendung vor, in der Sie Ihre Ausgaben als Text zur Erstattung eingeben können. Sie können KI verwenden, um Texteingaben in strukturierte Objekte umzuwandeln und die strukturierte Ausgabe während der Verarbeitung an den Benutzer zu streamen:
Extracting and streaming an expense from plain text with useObject
Here's how you could implement this in a Next.js application. First, define a schema for the expenses. The schema is shared between client and server:
import { z } from 'zod';
export const expenseSchema = z.object({
expense: z.object({
category: z
.string()
.describe(
'Category of the expense. Allowed categories: ' +
'TRAVEL, MEALS, ENTERTAINMENT, OFFICE SUPPLIES, OTHER.',
),
amount: z.number().describe('Amount of the expense in USD.'),
date: z
.string()
.describe('Date of the expense. Format yyyy-mmm-dd, e.g. 1952-Feb-19.'),
details: z.string().describe('Details of the expense.'),
}),
});
export type PartialExpense = DeepPartial<typeof expenseSchema>['expense'];
export type Expense = z.infer<typeof expenseSchema>['expense'];
Then, you use streamObject on the server to call the language model and stream an object:
import { anthropic } from '@ai-sdk/anthropic';
import { streamObject } from 'ai';
import { expenseSchema } from './schema';
// Allow streaming responses up to 30 seconds
export const maxDuration = 30;
export async function POST(req: Request) {
const { expense }: { expense: string } = await req.json();
const result = await streamObject({
model: anthropic('claude-3-5-sonnet-20240620'),
system:
'You categorize expenses into one of the following categories: ' +
'TRAVEL, MEALS, ENTERTAINMENT, OFFICE SUPPLIES, OTHER.' +
// provide date (including day of week) for reference:
'The current date is: ' +
new Date()
.toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: '2-digit',
weekday: 'short',
})
.replace(/(\w+), (\w+) (\d+), (\d+)/, '$4-$2-$3 ($1)') +
'. When no date is supplied, use the current date.',
prompt: `Please categorize the following expense: "${expense}"`,
schema: expenseSchema,
onFinish({ object }) {
// you could save the expense to a database here
},
});
return result.toTextStreamResponse();
}
Finally, you consume the expense stream on a client page. While the expense is streaming, we preview the partial expense, and once the generation is finished, we append it to the list of expenses:
'use client';
import { experimental_useObject as useObject } from 'ai/react';
import {
Expense,
expenseSchema,
PartialExpense,
} from '../api/expense/schema';
import { useState } from 'react';
export default function Page() {
const [expenses, setExpenses] = useState<Expense[]>([]);
const { submit, isLoading, object } = useObject({
api: '/api/expense',
schema: expenseSchema,
onFinish({ object }) {
if (object != null) {
setExpenses(prev => [object.expense, ...prev]);
}
},
});
return (
<div>
<form onSubmit={e => {
e.preventDefault();
const input = e.currentTarget.expense as HTMLInputElement;
if (input.value.trim()) {
submit({ expense: input.value });
e.currentTarget.reset();
}
}}
>
<input type="text" name="expense" placeholder="Enter expense details"/>
<button type="submit" disabled={isLoading}>Log expense</button>
</form>
{isLoading && object?.expense && (
<ExpenseView expense={object.expense} />
)}
{expenses.map((expense, index) => (
<ExpenseView key={index} expense={expense} />
))}
</div>
);
}
The expenses are rendered using an ExpenseView that can handle partial objects with undefined properties with .? and ?? (styling is omitted for illustration purposes):
const ExpenseView = ({ expense }: { expense: PartialExpense | Expense }) => (
<div>
<div>{expense?.date ?? ''}</div>
<div>${expense?.amount?.toFixed(2) ?? ''}</div>
<div>{expense?.category ?? ''}</p></div>
<div>{expense?.details ?? ''}</div>
</div>
);
Check out this example in action and deploy the template.
You can use this approach to create generative user interfaces client-side for many different use cases. You can find more details on how to use it in our object generation documentation.
Calling language models is at the heart of the Vercel AI SDK. We have listened to your feedback and extended our functions to support the following features:
With these additional settings, you have more control and flexibility when working with language models in the Vercel AI SDK.
With new features like OpenTelemetry support, useObject, and support for attachments with useChat, it’s never been a better time to start building AI applications.
We can't wait to see what you'll build next with Vercel AI SDK 3.3!
Vercel AI SDK 3.3 is the result of the combined work of our core team at Vercel and many community contributors.
Special thanks for contributing merged pull requests:
gclark-eightfold, dynamicwebpaige, Und3rf10w, elitan, jon-spaeth, jeasonstudio, InfiniteCodeMonkeys, ruflair, MrMaina100, AntzyMo, samuelint, ian-pascoe, PawelKonie99, BrianHung, Ouvill, gmickel, developaul, elguarir, Kunoacc, florianheysen, rajuAhmed1705, suemor233, eden-chan, DraganAleksic99, karl-richter, rishabhbizzle, vladkampov, AaronFriel, theitaliandev, miguelvictor, jferrettiboke, dhruvvbhavsar, lmcgartland, PikiLee
Your feedback and contributions are invaluable as we continue to evolve the SDK.
Das obige ist der detaillierte Inhalt vonVercel AI SDK. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was sind die Operatoren in der Go-Sprache?
Was soll ich tun, wenn der IE-Browser einen Skriptfehler auslöst?
Was bedeutet Fokus
Vier Hauptmerkmale der Blockchain
So stellen Sie Dateien wieder her, die aus dem Papierkorb geleert wurden
Was tun, wenn der Computer keinen Ton hat?
Bitcoin-Handelswebsite
Was sind die Java-Texteditoren?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
