Blog

Hướng Dẫn Sử Dụng Vercel AI SDK Cho Người Mới Bắt Đầu

Rebecca Kovács

Rebecca Kovács

10 tháng 6 2025

Hướng Dẫn Sử Dụng Vercel AI SDK Cho Người Mới Bắt Đầu

Chào mừng bạn đến với hướng dẫn dứt khoát dành cho người mới bắt đầu về Vercel AI SDK. Trong một thế giới nơi trí tuệ nhân tạo đang nhanh chóng biến đổi bối cảnh kỹ thuật số, khả năng tích hợp AI vào các ứng dụng web đã chuyển từ một chuyên môn hẹp thành một năng lực cốt lõi cho các nhà phát triển hiện đại. Hướng dẫn này được thiết kế để đưa bạn từ một người mới bắt đầu tò mò trở thành một nhà phát triển ứng dụng AI có năng lực.

Trong một thời gian dài, việc kết nối khoảng cách giữa một Mô hình Ngôn ngữ Lớn (LLM) mạnh mẽ và một giao diện web thân thiện với người dùng là một nỗ lực phức tạp. Các nhà phát triển phải vật lộn với các API của nhà cung cấp khác nhau, quản lý trạng thái phức tạp và tự triển khai các tính năng như truyền phát phản hồi (response streaming). Vercel AI SDK được tạo ra để giải quyết chính xác những vấn đề này. Đây là một bộ công cụ ưu tiên TypeScript, cung cấp một lớp trừu tượng thống nhất, thanh lịch bao trùm sự phức tạp của việc xây dựng trải nghiệm được hỗ trợ bởi AI.

Đây không chỉ là một hướng dẫn nhanh. Trong suốt quá trình hướng dẫn này, chúng ta sẽ xây dựng một chatbot AI hoàn chỉnh, giàu tính năng từ đầu bằng cách sử dụng Next.js và mô hình Gemini của Google. Chúng ta sẽ đi xa hơn một ví dụ "hello world" đơn giản. Bạn sẽ học được:

Đến cuối hướng dẫn toàn diện này, bạn sẽ không chỉ có một chatbot nâng cao, hoạt động được, mà còn có kiến thức khái niệm sâu sắc cần thiết để tự tin xây dựng các ứng dụng được hỗ trợ bởi AI độc đáo và mạnh mẽ của riêng bạn với Vercel AI SDK.

💡
Bạn muốn một công cụ Kiểm thử API tuyệt vời có thể tạo Tài liệu API đẹp mắt?

Bạn muốn một nền tảng tích hợp, Tất cả trong Một cho Nhóm Phát triển của bạn làm việc cùng nhau với năng suất tối đa?

Apidog đáp ứng mọi nhu cầu của bạn và thay thế Postman với mức giá phải chăng hơn nhiều!
button

Chương 1: Nền tảng và Thiết lập

Mọi cấu trúc vĩ đại đều cần một nền tảng vững chắc. Trong chương này, chúng ta sẽ thiết lập môi trường phát triển, cài đặt các công cụ cần thiết và sắp xếp các khóa API của chúng ta. Chúng ta cũng sẽ dành một chút thời gian để hiểu "tại sao" đằng sau mỗi lựa chọn chúng ta đưa ra.

Điều kiện tiên quyết

Trước khi chúng ta viết một dòng mã nào, hãy đảm bảo hộp công cụ của bạn đã sẵn sàng.

  1. Truy cập Google AI Studio.
  2. Đăng nhập bằng tài khoản Google của bạn.
  3. Nhấp vào "Get API key" (Lấy khóa API) và sau đó "Create API key in new project" (Tạo khóa API trong dự án mới).
  4. Sao chép khóa được tạo và lưu trữ ở nơi an toàn tạm thời. Hãy coi khóa này như một mật khẩu; đừng bao giờ để lộ công khai.

Bước 1: Khởi tạo Dự án Next.js

Chúng ta sẽ sử dụng Next.js, framework React hàng đầu để xây dựng các ứng dụng cấp độ sản xuất. Mô hình App Router của nó tích hợp hoàn hảo với bản chất tập trung vào máy chủ của các ứng dụng AI.

Mở terminal của bạn và thực thi lệnh này để tạo một dự án mới:

npx create-next-app@latest vercel-ai-tutorial

Trình cài đặt sẽ nhắc bạn với một số câu hỏi. Sử dụng các cài đặt này để theo dõi một cách liền mạch:

Sau khi cài đặt hoàn tất, điều hướng vào thư mục dự án mới tạo của bạn:

cd vercel-ai-tutorial

Bước 2: Cài đặt Vercel AI SDK

Bây giờ, hãy thêm các gói AI SDK vào dự án của chúng ta.

npm install ai @ai-sdk/react @ai-sdk/google zod

Hãy cùng phân tích từng gói này làm gì:

Bước 3: Bảo mật Khóa API của bạn

Đừng bao giờ mã hóa cứng khóa API trong mã ứng dụng của bạn. Đó là một rủi ro bảo mật lớn. Tiêu chuẩn chuyên nghiệp là sử dụng các biến môi trường (environment variables). Next.js có hỗ trợ tích hợp cho việc này với các tệp .env.local.

Tạo tệp trong thư mục gốc của dự án:

touch .env.local

Bây giờ, mở tệp mới này và thêm khóa Google AI của bạn:

# .env.local
# This file is for local development and should NOT be committed to git.
GOOGLE_GENERATIVE_AI_API_KEY=YOUR_GOOGLE_AI_API_KEY

Thay thế YOUR_GOOGLE_AI_API_KEY bằng khóa bạn đã sao chép trước đó. Next.js tự động tải tệp này và làm cho khóa có sẵn trên máy chủ (server), đó chính xác là nơi chúng ta cần nó.

Chương 2: Xây dựng Xương sống của Chatbot

Với dự án đã được thiết lập, đã đến lúc xây dựng các thành phần cốt lõi của ứng dụng: điểm cuối API phía máy chủ (server-side API endpoint) giao tiếp với AI và giao diện người dùng phía máy khách (client-side UI) mà người dùng sẽ tương tác.

Kiến trúc Client-Server của một Ứng dụng AI

Chatbot của chúng ta sẽ có hai phần chính:

  1. Một Route API Phía Máy chủ (/api/chat/route.ts): Đây là một môi trường an toàn chạy trên máy chủ. Công việc chính của nó là nhận lịch sử trò chuyện từ trình duyệt của người dùng, thêm khóa API bí mật của chúng ta, chuyển tiếp yêu cầu đến dịch vụ Google AI và sau đó truyền phát (stream) phản hồi trở lại cho người dùng. Giữ logic này trên máy chủ là rất quan trọng cho bảo mật—nó đảm bảo khóa API của chúng ta không bao giờ bị lộ ra công khai.
  2. Một Giao diện Người dùng Phía Máy khách (page.tsx): Đây là thành phần React chạy trong trình duyệt của người dùng. Nó chịu trách nhiệm hiển thị lịch sử trò chuyện, thu thập đầu vào của người dùng và gửi đầu vào đó đến route API của chúng ta.

Sự phân tách này là nền tảng để xây dựng các ứng dụng web an toàn và hiệu suất cao.

Bước 4: Tạo Trình xử lý Route API

Hãy tạo điểm cuối phía máy chủ. Trong thư mục src/app của bạn, tạo một thư mục mới tên là api, và bên trong đó, một thư mục khác tên là chat. Cuối cùng, tạo một tệp có tên route.ts bên trong thư mục chat.

Đường dẫn cuối cùng sẽ là src/app/api/chat/route.ts.

Điền mã sau vào tệp này:

// src/app/api/chat/route.ts

import { google } from '@ai-sdk/google';
import { streamText } from 'ai';

// Cấu hình cụ thể của Vercel để cho phép truyền phát phản hồi trong tối đa 30 giây
export const maxDuration = 30;

// Trình xử lý route API chính
export async function POST(req: Request) {
  try {
    // Trích xuất mảng `messages` từ phần thân yêu cầu (request body)
    const { messages } = await req.json();

    // Gọi nhà cung cấp AI với lịch sử cuộc trò chuyện
    const result = await streamText({
      model: google('models/gemini-1.5-pro-latest'),
      // Mảng `messages` cung cấp cho mô hình ngữ cảnh cho cuộc trò chuyện
      messages,
    });

    // Phản hồi bằng một phản hồi truyền phát (streaming response)
    return result.toDataStreamResponse();
  } catch (error) {
    // Đây là một thực hành tốt để xử lý các lỗi tiềm ẩn
    if (error instanceof Error) {
      return new Response(JSON.stringify({ error: error.message }), { status: 500 });
    }
    return new Response(JSON.stringify({ error: 'An unknown error occurred' }), { status: 500 });
  }
}

Hãy cùng phân tích tệp quan trọng này:

Bước 5: Xây dựng Giao diện Người dùng

Bây giờ đến phần thú vị: xây dựng giao diện người dùng (UI). Nhờ gói @ai-sdk/react, điều này lại đơn giản đến bất ngờ. Mở tệp trang chính tại src/app/page.tsx và thay thế toàn bộ nội dung của nó bằng đoạn mã sau:

// src/app/page.tsx

'use client';

import { useChat } from '@ai-sdk/react';
import { useRef, useEffect } from 'react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading, error } = useChat();

  // Một ref đến container có thể cuộn của tin nhắn
  const messagesContainerRef = useRef<HTMLDivElement>(null);

  // Effect để cuộn xuống cuối container tin nhắn bất cứ khi nào tin nhắn thay đổi
  useEffect(() => {
    if (messagesContainerRef.current) {
      messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
    }
  }, [messages]);

  return (
    <div className="flex flex-col h-screen bg-gray-50">
      {/* Container tin nhắn */}
      <div ref={messagesContainerRef} className="flex-1 overflow-y-auto p-8 space-y-4">
        {messages.map(m => (
          <div
            key={m.id}
            className={`flex gap-3 ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}
          >
            {/* Hiển thị avatar của người dùng */}
            {m.role === 'user' && (
              <div className="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold">U</div>
            )}

            {/* Bong bóng tin nhắn */}
            <div
              className={`max-w-xl p-3 rounded-2xl shadow-md whitespace-pre-wrap ${
                m.role === 'user'
                  ? 'bg-blue-500 text-white rounded-br-none'
                  : 'bg-white text-black rounded-bl-none'
              }`}
            >
              <span className="font-bold block">{m.role === 'user' ? 'You' : 'AI Assistant'}</span>
              {m.content}
            </div>

            {/* Hiển thị avatar của AI */}
            {m.role !== 'user' && (
              <div className="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-white font-bold">AI</div>
            )}
          </div>
        ))}
      </div>

      {/* Form nhập liệu */}
      <div className="p-4 bg-white border-t">
        <form onSubmit={handleSubmit} className="flex items-center gap-4 max-w-4xl mx-auto">
          <input
            className="flex-1 p-3 border rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"
            value={input}
            placeholder="Ask me anything..."
            onChange={handleInputChange}
            disabled={isLoading}
          />
          <button
            type="submit"
            className="px-6 py-3 bg-blue-500 text-white rounded-full font-semibold hover:bg-blue-600 disabled:bg-blue-300 disabled:cursor-not-allowed"
            disabled={isLoading}
          >
            Send
          </button>
        </form>
        {error && (
          <p className="text-red-500 mt-2 text-center">{error.message}</p>
        )}
      </div>
    </div>
  );
}

Đây là một lượng mã đáng kể, nhưng hầu hết là để tạo một giao diện người dùng hoàn chỉnh bằng Tailwind CSS. Hãy tập trung vào logic:

Bước 6: Chạy Ứng dụng của bạn

Bây giờ bạn đã xây dựng một chatbot AI hoàn chỉnh, có cấu trúc tốt. Hãy khởi động nó!

npm run dev

Điều hướng đến http://localhost:3000 trong trình duyệt của bạn. Bạn sẽ thấy một giao diện trò chuyện hoàn chỉnh. Hãy hỏi nó một câu hỏi. Bạn sẽ thấy tin nhắn của mình xuất hiện ngay lập tức, và phản hồi của AI sẽ được truyền phát từng token một.

Chương 3: Các Khả năng Nâng cao - Trao Siêu năng lực cho Chatbot của bạn

Chatbot của chúng ta thông minh, nhưng kiến thức của nó bị giới hạn trong dữ liệu huấn luyện của nó. Nó không thể truy cập thông tin trực tiếp hoặc thực hiện các hành động trong thế giới thực. Trong chương này, chúng ta sẽ cung cấp cho nó "Công cụ" (Tools) để khắc phục những hạn chế này.

Công cụ là gì?

Công cụ (Tool) là một hàm bạn định nghĩa mà LLM có thể chọn thực thi. Bạn mô tả công cụ cho mô hình, và khi nó nghĩ rằng công cụ đó cần thiết để trả lời truy vấn của người dùng, nó sẽ tạm dừng việc tạo văn bản và thay vào đó xuất ra một đối tượng "tool call" đặc biệt. Mã của bạn sau đó thực thi hàm với các đối số được cung cấp bởi mô hình, và kết quả được gửi lại cho mô hình. Mô hình sau đó sử dụng thông tin mới này để tạo ra phản hồi cuối cùng, chính xác hơn.

Hãy trao quyền cho chatbot của chúng ta với hai công cụ:

  1. Một công cụ để lấy thời tiết hiện tại cho một địa điểm.
  2. Một công cụ để chuyển đổi nhiệt độ từ Fahrenheit sang Celsius.

Điều này sẽ cho phép bot của chúng ta trả lời các câu hỏi như, "Thời tiết ở London là bao nhiêu độ C?"—một tác vụ đòi hỏi nhiều bước và dữ liệu bên ngoài.

Bước 7: Nâng cấp API để Hỗ trợ Công cụ

Chúng ta cần định nghĩa các công cụ của mình trong lệnh gọi streamText trên máy chủ. Mở src/app/api/chat/route.ts và sửa đổi nó để bao gồm định nghĩa tools mới.

// src/app/api/chat/route.ts
import { google } from '@ai-sdk/google';
import { streamText, tool } from 'ai';
import { z } from 'zod';

export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = await streamText({
    model: google('models/gemini-1.5-pro-latest'),
    messages,
    // Định nghĩa các công cụ mà mô hình có thể sử dụng
    tools: {
      getWeather: tool({
        description: 'Get the current weather for a specific location. Always returns temperature in Fahrenheit.',
        parameters: z.object({
          location: z.string().describe('The city and state, e.g., San Francisco, CA'),
        }),
        execute: async ({ location }) => {
          // Trong một ứng dụng thực tế, bạn sẽ lấy dữ liệu từ một API thời tiết thực
          console.log(`Fetching weather for ${location}`);
          return {
            temperature: Math.floor(Math.random() * (100 - 30 + 1) + 30),
            high: Math.floor(Math.random() * (100 - 80 + 1) + 80),
            low: Math.floor(Math.random() * (50 - 30 + 1) + 30),
            conditions: ['Sunny', 'Cloudy', 'Rainy'][Math.floor(Math.random() * 3)],
          };
        },
      }),
      convertFahrenheitToCelsius: tool({
        description: 'Convert a temperature from Fahrenheit to Celsius.',
        parameters: z.object({
          temperature: z.number().describe('The temperature in Fahrenheit'),
        }),
        execute: async ({ temperature }) => {
          console.log(`Converting ${temperature}°F to Celsius`);
          return {
            celsius: Math.round((temperature - 32) * (5 / 9)),
          };
        },
      }),
    },
  });

  return result.toDataStreamResponse();
}

Hãy phân tích đối tượng tools:

Bước 8: Bật Lệnh gọi Công cụ Nhiều bước trong Giao diện người dùng

Chỉ định nghĩa các công cụ trên máy chủ là chưa đủ. Theo mặc định, khi mô hình thực hiện lệnh gọi công cụ, cuộc trò chuyện dừng lại. Chúng ta cần cho hook useChat của chúng ta biết để tự động gửi kết quả của lệnh gọi công cụ đó trở lại cho mô hình để nó có thể tiếp tục suy luận và đưa ra câu trả lời cuối cùng.

Điều này cực kỳ đơn giản. Trong src/app/page.tsx, cập nhật khởi tạo hook useChat:

// src/app/page.tsx

// ...
export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading, error } = useChat({
    // Cho hook biết để tự động gửi kết quả công cụ bổ sung trở lại mô hình
    experimental_sendExtraToolMessages: true,
  });
  // ... phần còn lại của component
}

Chỉ vậy thôi. Thuộc tính experimental_sendExtraToolMessages: true kích hoạt luồng sử dụng công cụ nhiều bước.

Bước 9: Giao diện người dùng tốt hơn cho các Lời gọi Công cụ

Giao diện người dùng hiện tại của chúng ta chỉ hiển thị m.content. Khi một công cụ được gọi, thông tin thú vị nằm trong một thuộc tính khác trên đối tượng tin nhắn. Hãy tạo một component chuyên dụng để hiển thị các lời gọi công cụ một cách đẹp mắt.

Đầu tiên, hãy cập nhật vòng lặp tin nhắn chính trong src/app/page.tsx để hiển thị các lời gọi này.

// src/app/page.tsx

// ... bên trong câu lệnh return của component Chat
<div ref={messagesContainerRef} className="flex-1 overflow-y-auto p-8 space-y-4">
  {messages.map(m => (
    <div
      key={m.id}
      className={`flex gap-3 ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}
    >
      {/* ... avatars ... */}
      <div
        className={`max-w-xl p-3 rounded-2xl shadow-md whitespace-pre-wrap ${
          m.role === 'user'
            ? 'bg-blue-500 text-white rounded-br-none'
            : 'bg-white text-black rounded-bl-none'
        }`}
      >
        <span className="font-bold block">{m.role === 'user' ? 'You' : 'AI Assistant'}</span>

        {/* Hiển thị các lời gọi công cụ */}
        {m.toolInvocations?.map(tool => (
          <div key={tool.toolCallId} className="my-2 p-2 bg-gray-100 rounded text-sm text-gray-700">
            <p className="font-semibold">Tool Call: `{tool.toolName}`</p>
            <pre className="mt-1 p-1 bg-gray-200 rounded text-xs">
              {JSON.stringify(tool.args, null, 2)}
            </pre>
          </div>
        ))}

        {m.content}
      </div>
      {/* ... avatars ... */}
    </div>
  ))}
  {isLoading && messages[messages.length - 1]?.role === 'assistant' && (
      <div className="flex justify-start p-8 space-x-3">
          <div className="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-white font-bold">AI</div>
          <div className="p-3 rounded-2xl shadow-md bg-white">
              <div className="typing-indicator">
                  <span></span><span></span><span></span>
              </div>
          </div>
      </div>
  )}
</div>
// ...

Tôi cũng đã thêm một chỉ báo gõ đơn giản xuất hiện khi trợ lý đang suy nghĩ. Bạn sẽ cần thêm một chút CSS cho nó. Trong tệp src/app/globals.css của bạn, thêm:

/* src/app/globals.css */

.typing-indicator span {
  height: 8px;
  width: 8px;
  background-color: #9E9EA1;
  border-radius: 50%;
  display: inline-block;
  animation: a 1.2s infinite ease-in-out;
}
.typing-indicator span:nth-child(1) { animation-delay: -0.4s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.2s; }
@keyframes a {
  0%, 60%, 100% { transform: scale(0.2); }
  30% { transform: scale(1); }
}

Bây giờ, chạy lại ứng dụng. Hỏi nó, "Thời tiết ở New York là bao nhiêu độ C?" Bạn sẽ thấy một chuỗi sự kiện hấp dẫn diễn ra trong giao diện người dùng của bạn:

  1. Mô hình sẽ gọi công cụ getWeather trước tiên. Bạn sẽ thấy lệnh gọi công cụ được hiển thị trong giao diện người dùng.
  2. Kết quả (một nhiệt độ ngẫu nhiên theo Fahrenheit) được gửi lại cho mô hình.
  3. Mô hình, biết rằng nó cần Celsius, sẽ gọi công cụ convertFahrenheitToCelsius, sử dụng nhiệt độ từ kết quả của công cụ đầu tiên làm đầu vào.
  4. Cuối cùng, với nhiệt độ Celsius trong tay, nó sẽ tạo ra một phản hồi ngôn ngữ tự nhiên trả lời câu hỏi ban đầu của bạn.

Đây là sức mạnh của việc xây dựng AI Agents, và Vercel AI SDK làm cho việc điều phối phức tạp này trở nên đáng ngạc nhiên là đơn giản.

Chương 4: Tiếp theo nên đi đâu?

Bạn đã xây dựng thành công một chatbot nâng cao, được hỗ trợ bởi AI. Bạn đã đi từ một khung trống đến một ứng dụng giàu tính năng có thể truyền phát phản hồi, xử lý trạng thái tải và lỗi, và tận dụng các công cụ để tương tác với dữ liệu bên ngoài theo cách nhiều bước.

Hướng dẫn này đã cung cấp cho bạn một nền tảng vững chắc, nhưng nó chỉ là khởi đầu. Vercel AI SDK còn nhiều điều hơn nữa để cung cấp. Dưới đây là một số con đường để bạn tiếp tục khám phá:

Tương lai của phát triển web là thông minh, tương tác và cá nhân hóa. Với Vercel AI SDK, giờ đây bạn sở hữu các công cụ và kiến thức để đi đầu trong cuộc cách mạng này. Chúc bạn xây dựng thành công!

💡
Bạn muốn một công cụ Kiểm thử API tuyệt vời có thể tạo Tài liệu API đẹp mắt?

Bạn muốn một nền tảng tích hợp, Tất cả trong Một cho Nhóm Phát triển của bạn làm việc cùng nhau với năng suất tối đa?

Apidog đáp ứng mọi nhu cầu của bạn và thay thế Postman với mức giá phải chăng hơn nhiều!
button

Thực hành thiết kế API trong Apidog

Khám phá cách dễ dàng hơn để xây dựng và sử dụng API

Đăng ký miễn phíTải xuống