Vào ngày 01/03/2024, Vercel hãng phát triển nền tảng Next.js đã giới thiệu phiên bản 3 của Vercel AI SDK với khả năng hỗ trợ Generative UI (UI tạo sinh) cho phép sản sinh động các thành phần giao diện React Components cho phép các giao diện Chatbot AI có thể tạo ra được các thành phần tương tác trên giao diện Chat theo ngữ cảnh.
Song song với giao diện Chat trên nền chữ dạng Markdown (text), giao diện Voice thông qua việc đọc text (Text to Speech/Speech to Text) thì giao diện UI tạo sinh hy vọng sẽ góp phần làm tăng cường khả năng hiển thị cũng như tương tác với người dùng khi dịch chuyển từ các ứng dụng có giao diện truyền thống, vậy với UI tạo sinh như vậy có tạo nên một làn sóng tiếp theo trong việc dịch chuyển các ứng dụng truyền thống đến gần với GenAI không? Hãy cùng MyGPT tìm hiểu chi tiết xem thư viện GenUI mà Vercel giới thiệu có gì nhé.
Trải nghiệm AI mới dành cho người dùng
Các sản phẩm GenAI Chatbot hiện tại như ChatGPT cho phép người dùng có thể gửi câu nhắc và nhận phản hồi trong nhiều lĩnh vực khác nhau tuy nhiên có một số điểm hạn chế như sau:
- Hạn chế trong việc mô tả hình ảnh hoặc tương tác một cách trực quan đối với người dùng.
- Chỉ phản hồi bằng chữ thuần tuý dưới dạng văn bản Markdown
Với sự giới thiệu bổ sung thêm Tool và Functions Calling sẽ giúp cho các nhà phát triển có thể dễ dàng kết nối với các nguồn dữ liệu bên ngoài theo thời gian thực khi sử dụng các LLMs để cung cấp đến người dùng.
Ví dụ:
Ở ví dụ trên mặc dù rằng với Function calling thì Chatbot của bạn chỉ trả lời với người dùng dưới dạng text, điều này tương đối buồn tẻ đặc biệt với người dùng lười đọc hoặc ngại đặt câu hỏi bằng cách gõ trên bàn phím.
Trải nghiệm mới dành cho nhà phát triển
Với AI SDK 3.0, bạn có thể kết nối phản hồi của mô hình ngôn ngữ cùng với một máy chủ cung cấp thành phần React (streaming React Server Components) trong một tác vụ song song nhằm tạo nên giao diện theo ngữ cảnh mà cuộc thảo luận đó đề cập đến.
Hãy cùng xem xét một ví dụ dưới đây:
Bắt đầu với một ví dụ đơn giản, streaming text với thông tin chưa cập nhật:
import { render } from 'ai/rsc'
import OpenAI from 'openai'
const openai = new OpenAI()
async function submitMessage(userInput) {
'use server'
return render({
provider: openai,
model: 'gpt-4',
messages: [
{ role: 'system', content: 'You are an assistant' },
{ role: 'user', content: userInput }
],
text: ({ content }) => <p>{content}</p>,
})
}Tiếp tục, từ mã trên, chúng ta sẽ bổ sung thêm 2 tác vụ mới:
- Lấy thông tin về thời tiết từ bên ngoài qua function calling
- hiển thị một giao diện UI về thông tin thời tiết
Với tác vụ 1 thì bạn cần phải chắc chắn rằng sử dụng model ngôn ngữ có hỗ trợ Function calling (tham khảo thêm OpenAI function calling) sau đó sử dụng phương thức render để ánh xạ đến một thành phần React trên máy chủ riêng của mình.
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} />
}
}
}
})
}Các website đã sẵn sàng với GenUI/AI chưa?
Bạn thấy thế nào? với AI SDK của Vercel cung cấp, giờ đây các nhà phát triển trên nền tảng React đã có thể phát triển các website ứng dụng AI riêng của mình với giao diện toàn màn hình dưới dạng flow từ trên xuống dưới cho phép người dùng có thể nhìn lại toàn bộ quá trình tương tác (app log activities) từ lúc bắt đầu đến lúc kết thúc mà các dạng ứng dụng web hoặc React cũ không thể làm được rồi đấy.
Hãy cùng xem một bản thử nghiệm mà MyGPT triển khai ở đây các bạn nhé: Xem demo
