`useChat`이 툴 결과를 다음 턴에 이어붙이는 방식 — Vercel AI SDK 4.x 멀티스텝 루프 파헤치기

// useChat이 반환하는 메시지 구조 (AI SDK 4.2+)
{
  role: "assistant",
  parts: [
    { type: "step-start" },
    { type: "text", text: "날씨를 확인해볼게요." },
    {
      type: "tool-invocation",
      toolInvocation: {
        toolCallId: "call_abc123",
        toolName: "getWeather",
        args: { city: "서울" },
        // state 변화: "partial-call" (인수 스트리밍 중)
        //          → "call" (인수 완성, 실행 대기)
        //          → "result" (실행 완료)
        state: "result",
        result: { temp: 22, condition: "맑음" }
      }
    },
    { type: "step-start" },
    { type: "text", text: "서울 현재 기온은 22도입니다." }
  ]
}

// app/chat/page.tsx
const { messages, input, handleSubmit, handleInputChange } = useChat({
  maxSteps: 5, // 클라이언트 재전송 왕복 한도
  onToolCall: async ({ toolCall }) => {
    if (toolCall.toolName === "getUserLocation") {
      return new Promise((resolve) => {
        navigator.geolocation.getCurrentPosition(
          (pos) => resolve({
            lat: pos.coords.latitude,
            lng: pos.coords.longitude
          }),
          () => resolve({ error: "위치 접근 거부됨" })
        );
      });
    }
  },
});

// app/api/chat/route.ts
import { streamText, tool } from "ai";
import { openai } from "@ai-sdk/openai";
import { z } from "zod";
 
export async function POST(req: Request) {
  const { messages } = await req.json();
 
  const result = streamText({
    model: openai("gpt-4o"),
    messages,
    // 이 시나리오에서는 execute 없는 툴만 있으므로
    // streamText의 maxSteps는 실질적으로 의미가 없다.
    // 재전송 한도는 useChat 쪽 maxSteps로 제어된다.
    tools: {
      getUserLocation: tool({
        description: "사용자의 현재 위치를 가져옵니다",
        parameters: z.object({}),
        // execute 생략 = 클라이언트 사이드 툴
      }),
    },
  });
 
  return result.toDataStreamResponse();
}

// app/chat/page.tsx — 훅은 상위에서 한 번만 호출
"use client";
import { useChat } from "@ai-sdk/react";
import { MessageList } from "@/components/MessageList";
 
export default function ChatPage() {
  const chat = useChat({ maxSteps: 3 });
 
  return (
    <>
      <MessageList
        messages={chat.messages}
        addToolResult={chat.addToolResult}
      />
      <form onSubmit={chat.handleSubmit}>
        <input value={chat.input} onChange={chat.handleInputChange} />
      </form>
    </>
  );
}

// components/MessageList.tsx — prop으로 전달받은 상태만 사용
import type { UseChatHelpers } from "@ai-sdk/react";
 
type Props = Pick<UseChatHelpers, "messages" | "addToolResult">;
 
export function MessageList({ messages, addToolResult }: Props) {
  return (
    <div>
      {messages.map((message) => (
        <div key={message.id}>
          {message.role === "assistant" &&
            message.parts?.map((part, idx) => {
              // 같은 메시지 안에서 text 파트가 여러 개일 수 있으므로
              // 인덱스를 포함한 고유 키를 만들어야 한다.
              const baseKey = `${message.id}:${idx}`;
 
              if (part.type === "text") {
                return <p key={baseKey}>{part.text}</p>;
              }
 
              if (
                part.type === "tool-invocation" &&
                part.toolInvocation.state === "call" &&
                part.toolInvocation.toolName === "deleteFile"
              ) {
                const { toolCallId, args } = part.toolInvocation;
                return (
                  <ConfirmCard
                    key={toolCallId}
                    message={`${args.path} 파일을 삭제할까요?`}
                    onApprove={() =>
                      addToolResult({
                        toolCallId,
                        result: { approved: true, deletedPath: args.path },
                      })
                    }
                    onReject={() =>
                      addToolResult({
                        toolCallId,
                        result: { approved: false, reason: "사용자 거부" },
                      })
                    }
                  />
                );
              }
 
              if (
                part.type === "tool-invocation" &&
                part.toolInvocation.state === "result"
              ) {
                return (
                  <ToolResultBadge
                    key={part.toolInvocation.toolCallId}
                    name={part.toolInvocation.toolName}
                    result={part.toolInvocation.result}
                  />
                );
              }
            })}
        </div>
      ))}
    </div>
  );
}

// app/api/chat/route.ts — 서버 사이드 멀티스텝
import { streamText, tool } from "ai";
import { anthropic } from "@ai-sdk/anthropic";
import { z } from "zod";
 
export async function POST(req: Request) {
  const { messages } = await req.json();
 
  const result = streamText({
    model: anthropic("claude-3-5-sonnet-20241022"),
    messages,
    maxSteps: 5, // 서버 내부 루프 한도
    tools: {
      getWeather: tool({
        description: "도시의 현재 날씨를 가져옵니다",
        parameters: z.object({ city: z.string() }),
        execute: async ({ city }) => {
          return { temp: 22, condition: "맑음", city };
        },
      }),
      searchRestaurants: tool({
        description: "날씨와 위치에 맞는 맛집을 검색합니다",
        parameters: z.object({
          city: z.string(),
          weather: z.string(),
        }),
        execute: async ({ city, weather }) => {
          return { restaurants: ["식당A", "식당B"] };
        },
      }),
    },
  });
 
  return result.toDataStreamResponse();
}