Vercel AI SDK

Einführung von Tracing, multimodalen Anhängen, JSON-Streaming an Clients und mehr.

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:

• Tracing (experimentell): Instrumentierung von AI SDK-Funktionen mithilfe von OpenTelemetry
• Multimodale Dateianhänge (experimentell): Dateianhänge mit useChat senden
• useObject-Hook (experimentell): Strukturierte Objektgenerierung an den Client streamen
• Zusätzliche LLM-Einstellungen: Roh-JSON für Tools und strukturierte Objektgenerierung, Stoppsequenzen und Senden benutzerdefinierter Header

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.

Nachverfolgung

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.

Multimodale Dateianhänge

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:

Dateiliste

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>
);

URLs

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.

useObject-Hook

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.

Additional LLM Settings

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:

• JSON schema support for tools and structured object generation: As an alternative to Zod schemas, you can now use JSON schemas directly with the jsonSchema function. You can supply the type annotations and an optional validation function, giving you more flexibility especially when building applications with dynamic tools and structure generation.
• Stop sequences: Text sequences that stop generations have been an important feature when working with earlier language models that used raw text prompts. They are still relevant for many use cases, allowing you more control over the end of a text generation. You can now use the stopSequences option to define stop sequences in streamText and generateText.
• Sending custom headers: Custom headers are important for many use cases, like sending tracing information, enabling beta provider features, and more. You can now send custom headers using the headers option in most AI SDK functions.

With these additional settings, you have more control and flexibility when working with language models in the Vercel AI SDK.

Conclusion

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.

• Start a new AI project: Ready to build something new? Check out our multi-modal chatbot guide.
• Explore our templates: Visit our Template Gallery to see the AI SDK in action and get inspired for your next project.
• Join the community: Let us know what you’re building with the AI SDK in our GitHub Discussions.

We can't wait to see what you'll build next with Vercel AI SDK 3.3!

Contributors

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!