챗봇

챗봇 (Chatbot)

useChat 훅은 챗봇 애플리케이션용 대화형 UI를 아주 쉽게 만들어줘요. AI 제공자로부터 채팅 메시지를 스트리밍하고, 채팅 상태를 관리하며, 새 메시지가 도착하면 자동으로 UI를 갱신합니다. 메시지 스트리밍, 관리 상태, 그리고 어떤 디자인·레이아웃에든 쉽게 붙이는 통합이 핵심 기능이에요.

출처: 공식문서

본문

useChat가 제공하는 기능을 정리하면 이렇게 돼요.

  • 메시지 스트리밍: AI 제공자의 모든 메시지가 실시간으로 채팅 UI에 스트리밍됩니다.
  • 관리 상태(Managed States): 훅이 input, messages, status, error 등의 상태를 대신 관리해줍니다.
  • 손쉬운 통합: 최소한의 노력으로 채팅 AI를 어떤 디자인·레이아웃에든 통합할 수 있어요.

도구를 쓰는 챗봇 예시부터 시작하는 게 좋아요. 다음은 Next.js App Router 기반의 간단한 예제입니다.

프론트엔드 (app/page.tsx):

'use client';

import { useChat } from '@ai-sdk/react';
import { DefaultChatTransport } from 'ai';
import { useState } from 'react';

export default function Page() {
  const { messages, sendMessage, status } = useChat({
    transport: new DefaultChatTransport({
      api: '/api/chat',
    }),
  });

  const [input, setInput] = useState('');

  return (
    <>
      {messages.map(message => (
        <div key={message.id}>
          {message.role === 'user' ? 'User: ' : 'AI: '}
          {message.parts.map((part, index) =>
            part.type === 'text' ? <span key={index}>{part.text}</span> : null,
          )}
        </div>
      ))}

      <form
        onSubmit={e => {
          e.preventDefault();
          if (input.trim()) {
            sendMessage({ text: input });
          }
        }}
      >
        <input
          value={input}
          onChange={e => setInput(e.target.value)}
          disabled={status !== 'ready'}
          placeholder="Say something..."
        />
        <button type="submit" disabled={status !== 'ready'}>Send</button>
      </form>
    </>
  );
}

API 라우트 (app/api/chat/route.ts):

import {
  convertToModelMessages,
  createUIMessageStreamResponse,
  streamText,
  toUIMessageStream,
  UIMessage,
} from 'ai';

// 스트리밍 응답을 최대 30초까지 허용
export const maxDuration = 30;

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

  const result = streamText({
    model: "xai/grok-4.6",
    instructions: 'You are a helpful assistant.',
    messages: await convertToModelMessages(messages),
  });

  return createUIMessageStreamResponse({
    stream: toUIMessageStream({ stream: result.stream }),
  });
}

UI 메시지는 메시지 부분을 담는 새로운 parts 속성을 가져요. content 속성 대신 parts 속성으로 렌더링하는 걸 권장합니다. parts는 텍스트, 도구 호출, 도구 결과 등 다양한 메시지 유형을 지원해서 더 유연하고 복잡한 채팅 UI를 만들 수 있어요.

더 알아보기