Unveiling the Future of AI: Introducing Vercel AI SDK 3.1 with ModelFusion

Welcome to the Future of AI Development! Today, we're thrilled to unveil the Vercel AI SDK 3.1, revamped and enhanced with the introduction of ModelFusion. This groundbreaking release marks a pivotal step towards providing a comprehensive TypeScript framework for building AI applications. Here’s a detailed look at what’s new and how you can integrate these cutting-edge features into your projects.

Introduction to Vercel AI SDK 3.1

Vercel’s AI SDK 3.1 is a game-changer, equipped with ModelFusion that takes your AI applications to the next level. Whether you're exploring AI for the first time or you’re a seasoned developer, this update brings a suite of tools aimed at simplifying and enhancing your development workflow.

Integrate AI functionalities seamlessly with a unified API, robust pre-built hooks for rapid chat interface deployment, and streaming React Server Components (RSC) for dynamic UI rendering. The Vercel AI SDK 3.1 encapsulates it all, paving the way for innovative AI-powered applications.

Core Components

AI SDK Core

AI SDK Core is the foundation of the Vercel AI SDK, providing a unified API for generating text, structured objects, and tool calls with Large Language Models (LLMs). Inspired by ORM-style abstractions, it simplifies interaction with multiple AI models, enabling developers to focus on what to generate and how to deliver it, rather than the quirks of different model providers.

AI SDK UI

Creating AI-driven chat interfaces has never been easier. With the AI SDK UI, you receive a set of framework-agnostic hooks that expedite chat interface development. These hooks manage state, handle streaming text, and update the UI in real-time, minimizing the boilerplate code required.

AI SDK RSC

AI SDK RSC extends the capabilities of traditional chatbots by enabling generative UI with React Server Components. Move beyond plain text responses and harness the power of component-based dynamic interfaces enriched with real-time data fetched via AI tool calls.

Code Examples

Generating Text

Here’s an example demonstrating how to generate text using the mistral-large-latest model from Mistral AI:

import { generateText } from 'ai';
import { mistral } from '@ai-sdk/mistral';
 
const { text } = await generateText({
  model: mistral("mistral-large-latest"),
  prompt: "Generate a lasagna recipe."
});

To switch to OpenAI's gpt-4-turbo, simply change two lines of code:

import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';
 
const { text } = await generateText({
  model: openai("gpt-4-turbo"),
  prompt: "Generate a lasagna recipe."
});

Generating Structured Data

Utilizing the Vercel AI SDK, generating and validating structured data becomes straightforward. Here’s an example using generateObject:

import { generateObject } from 'ai'
import { z } from 'zod'
import { openai } from '@ai-sdk/openai';
 
const { object } = await generateObject({
  model: openai('gpt-4-turbo'),
  schema: z.object({
    recipe: z.object({
      name: z.string().describe('name of recipe'),
      ingredients: z.array(
        z.object({
          name: z.string().describe('ingredient name'),
          amount: z.string().describe('amount of ingredient')
        })
      ),
      steps: z.array(z.string()).describe('steps to prepare recipe')
    })
  }),
  prompt: 'Generate a lasagna recipe.'
});

The model returns a verified, type-safe object based on your schema.

{
  "name": "Classic Lasagna",
  "ingredients": [
    { "name": "Olive oil", "amount": "2 tablespoons" },
    // Rest of the ingredients
  ],
  "steps": [
    "Preheat oven to 375°F (190°C).",
    "In a large skillet, heat olive oil over medium heat. Add ground beef, onion, and garlic. Cook until beef is browned.",
    // Additional steps
  ]
}

Building a Chat Interface

Simplify the development of streaming chat interfaces with AI SDK UI's useChat hook and the streamText function:

// app/api/chat/route.ts
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';
 
export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = await streamText({
    model: openai('gpt-4-turbo'),
    messages,
  });
 
  return result.toAIStreamResponse();
}

// app/page.tsx
'use client'
import { useChat } from 'ai/react'
 
export default function Page() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();
 
  return (
    <>
      {messages.map(message => (
        <div key={message.id}>
          {message.role === 'user' ? 'User: ' : 'AI: '}
          {message.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={input}
          onChange={handleInputChange}
        />
        <button type="submit">Submit</button>
      </form>
    </>
  );
}

Moving Beyond Text with AI SDK RSC

Transform your LLM applications with rich, dynamic interfaces using streamUI:

import { streamUI } from 'ai/rsc';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';
import { Spinner, Weather } from '@/components';
import { getWeather } from '@/utils';
 
async function submitMessage(userInput) {
  'use server';
 
  const result = streamUI({
    model: openai('gpt-4-turbo'),
    messages: [
      { role: 'system', content: 'You are a helpful assistant' },
      { role: 'user', content: userInput }
    ],
    text: ({ content }) => <p>{content}</p>,
    tools: {
      get_city_weather: {
        description: 'Get the current weather for a city',
        parameters: z.object({ city: z.string().describe('the city') }).required(),
        generate: async function* ({ city }) {
          yield <Spinner />;
          const weather = await getWeather(city);
          yield <Weather data={weather} />;
        }
      }
    }
  });
 
  return result.value();
}

Getting Started and Additional Resources

Ready to integrate Vercel AI SDK 3.1 into your project? Explore our documentation or experiment with different models using our AI playground.

Meet the Authors

• Jared Palmer

  • VP of Product, AI at Vercel.

• Lars Grammel

  • Software Engineer at Vercel.

Conclusion

The Vercel AI SDK 3.1, fortified with ModelFusion, heralds a new era in AI development. Whether simplifying text generation, producing type-safe structured data, or crafting intuitive chat interfaces, this SDK empowers developers to create remarkable AI applications effortlessly.

Explore the full potential of Vercel AI SDK 3.1 and transform your AI applications today.

Take a stride towards the future of AI with Vercel. Start Deploying.

Reference: Jared Palmer and Lars Grammel, "Unveiling the Future of AI: Introducing Vercel AI SDK 3.1 with ModelFusion".