Feature: Implement Vercel AI Chat Interface

[Codehagen]

Feature Request: Implement Vercel AI Chat Interface

Introduction:
We aim to enhance our application by integrating a new developer experience using Vercel's AI SDK 3.0. This will allow us to stream AI responses directly to React Server Components, leveraging capabilities such as up-to-date information retrieval and dynamic UI rendering.

Current behavior:
Currently, the application does not include AI-driven chat capabilities.

Suggested solution:
Implement a basic AI chat interface that uses the Vercel AI SDK to process and render responses. The system will start by handling simple text streaming without retrieval, and will later incorporate more complex functionalities like live data retrieval and rendering.

Example of desired functionality:

• Stream AI responses to React Server Components.
• Initially handle simple text inputs and outputs.
• Progress to include live data retrieval and custom UI components.

Implementation Steps:

1. Import and set up the Vercel AI SDK in the project.
2. Create a basic chat interface that allows users to input text and receive responses.
3. Use the AI SDK to send user inputs and receive text outputs, streamed directly to React Server Components.
4. Plan further integration to handle complex scenarios like live data retrieval using OpenAI-compatible functions or tools.

Initial Code Example:

import { render } from 'ai/rsc'
import OpenAI from 'openai'
import { z } from 'zod'

const openai = new OpenAI()

async function submitMessage(userInput) { // 'What is the weather in SF?'
  'use server'

  return render({
    provider: openai,
    model: 'gpt-4-0125-preview',
    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(),
        render: async function* ({ city }) {
          yield <Spinner/>
          const weather = await getWeather(city)
          return <Weather info={weather} />
        }
      }
    }
  })
}

Task List:

• Set up the Vercel AI SDK in the application.
• Develop the initial chat interface for input and output. (You can use what is in /aimagic)
• Implement the basic streaming of text responses using the provided example.
• Test the AI chat functionality to ensure accuracy and responsiveness.
• Document the setup and functionality for future reference and development.

Additional context:
This feature is inspired by the new possibilities opened up by Vercel's generative UI capabilities in their AI SDK. It promises to bring innovative AI integration into our application, enhancing user interaction and information retrieval.

Resources:

• Vercel AI SDK Documentation
• Example Video on YouTube

By completing this feature, we aim to provide a cutting-edge AI chat interface that enhances user engagement and provides real-time, interactive responses directly within our application.

[ousszizou]

.take

[github-actions]

Thanks for taking this issue! Let us know if you have any questions!

[alexghirelli]

What's the purpose for this?

[shouryan01]

I guess it's to implement the advertised AI features lol

[alexghirelli]

I guess it's to implement the advertised AI features lol

Yes, I already understood that. So it's just pure interface. Have you already thought about how to feed it the badget data? Otherwise I don't see the point of implementing this interface when there are still so many core functions that have much more priority