Zum Inhalt springen

Custom Data Parts im Frontend

Überblick

Persistent Data Parts landen in message.parts und können über den Part-Typ gefiltert werden. Du iterierst über die Parts einer Message und renderst je nach type unterschiedliche Komponenten — Text als Paragraph, Data Parts als spezialisierte UI-Elemente.

Transient Data Parts sind nicht in message.parts enthalten. Sie werden über den onData-Callback in useChat empfangen und eignen sich für fluechtige Informationen wie Ladefortschritt oder temporaere Statusmeldungen, die nicht in der Chat-Historie erscheinen sollen.

Progressive Updates funktionieren über IDs: Wenn der Server ein Data Part mit derselben ID erneut sendet, wird das bestehende Part aktualisiert statt ein neues hinzugefuegt (siehe ID Reconciliation).

Frontend-Beispiel

'use client';
import { useChat } from '@ai-sdk/react';

export function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    onData(data) {
      // Transient Data Parts (nicht in message.parts gespeichert)
      console.log('Transient:', data);
    },
  });

  return (
    <div>
      {messages.map((m) => (
        <div key={m.id}>
          {m.parts.map((part, i) => {
            switch (part.type) {
              case 'text':
                return <p key={i}>{part.text}</p>;
              case 'data-weather':
                return <WeatherCard key={i} data={part.data} />;
              case 'data-notification':
                return <NotificationBanner key={i} data={part.data} />;
              default:
                return null;
            }
          })}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
      </form>
    </div>
  );
}

Persistent vs Transient

Eigenschaft	Persistent Data Parts	Transient Data Parts
Zugriff	`message.parts` (type `'data-${NAME}'`)	`onData`-Callback in useChat
Persistenz	Ja — Teil der Message-Historie	Nein — nur waehrend des Streams
Use Case	Quellen, Ergebnisse, eingebettete Daten	Ladefortschritt, temporaere Status
ID-Reconciliation	Ja (bei gesetzter ID)	Nein

Data Parts filtern

// Alle Weather-Parts einer Message
const weatherParts = message.parts.filter(
  (p) => p.type === 'data-weather'
);

// Letztes Data Part eines bestimmten Typs
const latestWeather = weatherParts.at(-1);

Siehe auch

Challenge 7.1: Custom Data Parts — Hands-on mit Data Parts
Challenge 8.2: Streaming Custom Data to Frontend — Data Parts in Workflows
Custom Data Parts streamen — Server-seitige Erstellung

Quellen