Array Output Mode - AI SDK

Structured Object Generation Array Mode

This is a Next.js project that uses the streamObject function from the Vercel AI SDK to stream structured objects. This project showcases the new output mode which allows you to stream structured objects by complete object rather than by token. This solves layout shift issues common to AI applications using structured object generation.

Key Features:

• Structured Object Streaming: Utilizes streamObject from the Vercel AI SDK to generate and stream structured data.
• Array Output Mode: Demonstrates a new output strategy that streams complete objects, preventing layout shifts often seen with token-by-token streaming in AI applications.
• Next.js Integration: Built as a Next.js project, leveraging its capabilities for server-side rendering and API routes.
• Easy Setup: Provides clear instructions for cloning the repository, installing dependencies, configuring environment variables (OpenAI API Key), and running the development server.

Use Cases:

This template is ideal for developers looking to build AI applications that require reliable and visually stable streaming of structured data. It's particularly useful for:

• Chatbots or AI assistants that need to output complex JSON structures without UI flickering.
• Applications generating lists, tables, or other structured content from AI models.
• Projects aiming to improve the user experience of AI-generated content by ensuring complete data objects are rendered at once.

Getting Started

First, clone the repository:

git clone https://github.com/vercel-labs/structured-object-generation-array-mode.git

Then, install the dependencies:

pnpm install

Copy the .env.example file to .env.local and fill in the required environment variables:

OPENAI_API_KEY=sk-...

Finally, run the development server:

pnpm dev

Open http://localhost:3000 with your browser to see the result.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.
• Vercel AI SDK - learn about the Vercel AI SDK.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.