SDK IA Vercel

Présentation du traçage, des pièces jointes multimodales, du streaming JSON vers les clients, et bien plus encore.

Le Vercel AI SDK est une boîte à outils permettant de créer des applications d'IA avec JavaScript et TypeScript. Son API unifiée vous permet d'utiliser n'importe quel modèle de langage et fournit de puissantes intégrations d'interface utilisateur dans les principaux frameworks Web tels que Next.js et Svelte.

Vercel AI SDK 3.3 introduit quatre fonctionnalités majeures :

• Tracing (expérimental) : fonctions du SDK AI de l'instrument utilisant OpenTelemetry
• Pièces jointes multimodales (expérimental) : envoyer des pièces jointes avec useChat
• useObject hook (expérimental) : génération d'objets structurés en flux vers le client
• Paramètres LLM supplémentaires : JSON brut pour les outils et la génération d'objets structurés, les séquences d'arrêt et l'envoi d'en-têtes personnalisés

Nous avons également ajouté des fournisseurs de modèles AWS Bedrock et Chrome AI (communauté), ainsi que de nombreuses fonctionnalités et ajouts plus petits. Vous pouvez trouver toutes les modifications, y compris les fonctionnalités mineures, dans notre journal des modifications.

Les fonctionnalités expérimentales vous permettent d'utiliser la dernière fonctionnalité AI SDK dès que possible. Cependant, ils peuvent changer dans les versions de correctifs. Veuillez épingler la version du correctif si vous décidez d'utiliser des fonctionnalités expérimentales.

Tracé

Compte tenu de la nature non déterministe des modèles de langage, l'observabilité est essentielle pour comprendre et développer des applications d'IA. Vous devez être capable de retracer et de comprendre le timing, l'utilisation des jetons, les invites et le contenu des réponses pour les appels de modèles individuels.

Le SDK Vercel AI prend désormais en charge le traçage avec OpenTelemetry, une norme open source pour l'enregistrement des informations de télémétrie, en tant que fonctionnalité expérimentale. Voici un exemple de ce à quoi ressemble la visualisation des traces avec l'intégration Vercel Datadog :

Visualisation de traces avec Datadog et le SDK Vercel AI

Vous pouvez analyser les données de traçage du SDK AI avec les intégrations d'observabilité Vercel telles que Datadog, Sentry et Axiom. Alternativement, vous pouvez utiliser des fournisseurs d'observabilité LLM tels que LangFuse, Braintrust ou LangSmith.

Pour utiliser la télémétrie avec le SDK Vercel AI, vous devez le configurer pour votre application. Nous vous recommandons d'utiliser @vercel/otel . Si vous utilisez Next.js et déployez sur Vercel, vous pouvez ajouter instrumentation.ts avec le code suivant à votre projet :

import { registerOTel } from '@vercel/otel';

export function register() {
  registerOTel({ serviceName: 'your-project-nameapp' });
}

Étant donné que la fonctionnalité de traçage est expérimentale, vous devez choisir d'enregistrer les informations à l'aide de l'option experimental_telemetry. Vous pouvez également fournir des identifiants de fonction pour identifier l'emplacement de l'appel ainsi que des métadonnées supplémentaires que vous souhaitez enregistrer.

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',
    },
  },
});

L'activation de la fonctionnalité enregistrera les données de traçage pour vos appels de fonction. Vous pouvez trouver plus de détails dans la documentation de télémétrie AI SDK. Si vous souhaitez commencer, consultez notre modèle de traçage AI SDK Next.js déployable.

Pièces jointes multimodales

Dans de nombreuses applications de chat IA, les utilisateurs doivent envoyer des pièces jointes avec leurs messages, telles que des images, des PDF et divers fichiers multimédias. Ces pièces jointes doivent également être disponibles pour un aperçu aux côtés des messages devant être consultés par les utilisateurs.

En conséquence, nous avons ajouté experimental_attachments au gestionnaire handleSubmit() du hook useChat() React.

Envoi de pièces jointes d'images et de texte avec useChat

Découvrez cet exemple en action et déployez le modèle.

Il existe deux manières d'envoyer des pièces jointes avec un message, soit en fournissant un objet FileList, soit une liste d'URL à la fonction handleSubmit :

Liste des fichiers

En utilisant FileList, vous pouvez envoyer plusieurs fichiers sous forme de pièces jointes avec un message à l'aide de l'élément d'entrée de fichier. Le hook useChat les convertira automatiquement en URL de données et les enverra au fournisseur d'IA.

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

URL

Vous pouvez également envoyer des URL sous forme de pièces jointes avec un message. Cela peut être utile pour envoyer des liens vers des ressources externes ou du contenu multimédia.

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

Vous pouvez en savoir plus dans notre guide des chatbots multimodaux.

crochet useObject

La génération de données structurées est une exigence courante dans les applications d'IA, par ex. pour extraire des informations à partir d’entrées en langage naturel. Avec le nouveau hook useObject, vous pouvez diffuser la génération d'objets structurés directement sur le client. Cette fonctionnalité expérimentale, disponible aujourd'hui pour React, vous permet de créer des interfaces dynamiques qui affichent les objets JSON au fur et à mesure de leur diffusion.

Par exemple, imaginez une application où vous pourrez saisir vos dépenses sous forme de texte pour le remboursement. Vous pouvez utiliser l'IA pour convertir des entrées textuelles en objets structurés et diffuser la dépense structurée à l'utilisateur au fur et à mesure de son traitement :

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!