Expo 빠른 시작

브라우저에서 http://localhost:8081을 엽니다. 입력 필드가 표시될 것입니다. 메시지를 입력하여 AI 챗봇이 실시간으로 응답하는지 확인해 보세요! AI SDK를 사용하면 Expo로 AI 채팅 인터페이스를 빠르고 쉽게 구축할 수 있습니다.

도구로 챗봇 향상시키기

대규모 언어 모델(LLM)은 놀라운 생성 능력을 가지고 있지만, 수학과 같은 이산적인 작업이나 날씨 확인과 같은 외부 세계와의 상호작용에는 어려움을 겪어요. 이때 바로 도구가 필요해요.

도구는 LLM이 호출할 수 있는 작업이에요. 이러한 작업의 결과는 LLM에 다시 보고되어 다음 응답에서 고려될 수 있어요.

예를 들어, 사용자가 현재 날씨에 대해 묻는다면 도구가 없으면 모델은 학습 데이터에 기반한 일반적인 정보만 제공할 수 있어요. 하지만 날씨 도구를 사용하면 최신의 위치별 날씨 정보를 가져와 제공할 수 있죠.

간단한 날씨 도구를 추가하여 챗봇을 향상시켜 보세요.

API 라우트 업데이트하기

app/api/chat+api.ts 파일을 수정해서 새로운 날씨 도구를 포함해 보세요:

import {
  streamText,
  UIMessage,
  convertToModelMessages,
  tool,
  createUIMessageStreamResponse,
  toUIMessageStream,
} from 'ai';
__PROVIDER_IMPORT__;
import { z } from 'zod';

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

  const result = streamText({
    model: __MODEL__,
    messages: await convertToModelMessages(messages),
    tools: {
      weather: tool({
        description: 'Get the weather in a location (fahrenheit)',
        inputSchema: z.object({
          location: z.string().describe('The location to get the weather for'),
        }),
        execute: async ({ location }) => {
          const temperature = Math.round(Math.random() * (90 - 32) + 32);
          return {
            location,
            temperature,
          };
        },
      }),
    },
  });

  return createUIMessageStreamResponse({
    stream: toUIMessageStream({ stream: result.stream }),
    headers: {
      'Content-Type': 'application/octet-stream',
      'Content-Encoding': 'none',
    },
  });
}

업데이트된 코드에서:

1. ai 패키지에서 tool 함수를, 스키마 검증을 위해 zod에서 z를 가져와요.
2. weather 도구를 포함하는 tools 객체를 정의해요. 이 도구는:
   • 모델이 언제 사용해야 하는지 이해하도록 돕는 설명을 포함해요.
   • Zod 스키마를 사용하여 inputSchema를 정의하고, 이 도구를 실행하려면 location 문자열이 필요하다고 명시해요. 모델은 대화의 맥락에서 이 입력을 추출하려고 시도해요. 추출할 수 없으면 사용자에게 누락된 정보를 요청해요.
   • 날씨 데이터를 가져오는 것을 시뮬레이션하는 execute 함수를 정의해요(이 경우 무작위 온도를 반환해요). 이 함수는 서버에서 실행되는 비동기 함수이므로 외부 API에서 실제 데이터를 가져올 수 있어요.

이제 챗봇은 사용자가 묻는 모든 위치의 날씨 정보를 '가져올' 수 있어요. 모델이 날씨 도구를 사용해야 한다고 판단하면 필요한 입력과 함께 도구 호출을 생성해요. 그러면 execute 함수가 자동으로 실행되고, 도구 출력이 tool 메시지로 messages에 추가돼요.

뉴욕 날씨가 어때? 같은 질문을 해보고 모델이 새 도구를 어떻게 사용하는지 확인해 보세요.

UI에 빈 응답이 표시되나요? 이는 모델이 텍스트 응답을 생성하는 대신 도구 호출을 생성했기 때문이에요. 클라이언트에서 message.parts 배열의 tool-weather 부분을 통해 도구 호출과 이후의 도구 결과에 접근할 수 있어요.

UI 업데이트하기

UI에 날씨 도구 호출을 표시하려면 app/(tabs)/index.tsx 파일을 업데이트해 보세요:

import { generateAPIUrl } from '@/utils';
import { useChat } from '@ai-sdk/react';
import { DefaultChatTransport } from 'ai';
import { fetch as expoFetch } from 'expo/fetch';
import { useState } from 'react';
import { View, TextInput, ScrollView, Text, SafeAreaView } from 'react-native';

export default function App() {
  const [input, setInput] = useState('');
  const { messages, error, sendMessage } = useChat({
    transport: new DefaultChatTransport({
      fetch: expoFetch as unknown as typeof globalThis.fetch,
      api: generateAPIUrl('/api/chat'),
    }),
    onError: error => console.error(error, 'ERROR'),
  });

  if (error) return <Text>{error.message}</Text>;

  return (
    <SafeAreaView style={{ height: '100%' }}>
      <View
        style={{
          height: '95%',
          display: 'flex',
          flexDirection: 'column',
          paddingHorizontal: 8,
        }}
      >
        <ScrollView style={{ flex: 1 }}>
          {messages.map(m => (
            <View key={m.id} style={{ marginVertical: 8 }}>
              <View>
                <Text style={{ fontWeight: 700 }}>{m.role}</Text>
                {m.parts.map((part, i) => {
                  switch (part.type) {
                    case 'text':
                      return <Text key={`${m.id}-${i}`}>{part.text}</Text>;
                    case 'tool-weather':
                      return (
                        <Text key={`${m.id}-${i}`}>
                          {JSON.stringify(part, null, 2)}
                        </Text>
                      );
                  }
                })}
              </View>
            </View>
          ))}
        </ScrollView>

        <View style={{ marginTop: 8 }}>
          <TextInput
            style={{ backgroundColor: 'white', padding: 8 }}
            placeholder="Say something..."
            value={input}
            onChange={e => setInput(e.nativeEvent.text)}
            onSubmitEditing={e => {
              e.preventDefault();
              sendMessage({ text: input });
              setInput('');
            }}
            autoFocus={true}
          />
        </View>
      </View>
    </SafeAreaView>
  );
}

이 변경으로 UI가 다양한 메시지 부분을 처리하도록 업데이트돼요. 텍스트 부분은 이전과 같이 텍스트 내용을 표시해요. 날씨 도구 호출의 경우 도구 호출과 결과의 JSON 표현을 표시해요.

이제 날씨에 대해 묻으면 채팅 인터페이스에 도구 호출과 결과가 표시되는 것을 볼 수 있어요.

다단계 도구 호출 활성화

채팅 인터페이스에 도구 결과가 표시되지만, 모델이 이 정보를 사용하여 원래 질문에 답하지 않는다는 것을 눈치챘을 수도 있습니다. 이는 모델이 도구 호출을 생성하면 기술적으로 생성을 완료했기 때문입니다.

이 문제를 해결하려면 stopWhen을 사용하여 다단계 도구 호출을 활성화할 수 있습니다. 기본적으로 stopWhen은 isStepCount(1)로 설정되어 있으며, 이는 도구 결과가 있을 때 첫 번째 단계 후 생성이 중지된다는 의미입니다. 이 조건을 변경하면 모델이 도구 결과를 자동으로 다시 보내 지정한 중지 조건이 충족될 때까지 추가 생성을 트리거하도록 할 수 있습니다. 이 경우에는 모델이 계속 생성하여 날씨 도구 결과를 사용해 원래 질문에 답할 수 있도록 하려는 것입니다.

API 라우트 업데이트

app/api/chat+api.ts 파일을 수정하여 stopWhen 조건을 포함하세요:

import {
  streamText,
  UIMessage,
  convertToModelMessages,
  tool,
  isStepCount,
  createUIMessageStreamResponse,
  toUIMessageStream,
} from 'ai';
__PROVIDER_IMPORT__;
import { z } from 'zod';

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

  const result = streamText({
    model: __MODEL__,
    messages: await convertToModelMessages(messages),
    stopWhen: isStepCount(5),
    tools: {
      weather: tool({
        description: 'Get the weather in a location (fahrenheit)',
        inputSchema: z.object({
          location: z.string().describe('The location to get the weather for'),
        }),
        execute: async ({ location }) => {
          const temperature = Math.round(Math.random() * (90 - 32) + 32);
          return {
            location,
            temperature,
          };
        },
      }),
    },
  });

  return createUIMessageStreamResponse({
    stream: toUIMessageStream({ stream: result.stream }),
    headers: {
      'Content-Type': 'application/octet-stream',
      'Content-Encoding': 'none',
    },
  });
}

Expo 앱으로 돌아가서 특정 위치의 날씨를 물어보세요. 이제 모델이 날씨 도구 결과를 사용하여 질문에 답하는 것을 볼 수 있을 것입니다.

stopWhen: isStepCount(5)로 설정하면 모델이 주어진 생성에 대해 최대 5개의 "단계"를 사용할 수 있습니다. 이는 더 복잡한 상호 작용을 가능하게 하며, 필요한 경우 모델이 여러 단계에 걸쳐 정보를 수집하고 처리할 수 있게 합니다. 화씨를 섭씨로 변환하는 도구를 추가하면 이 동작을 직접 확인할 수 있습니다.

도구 더 추가하기

app/api/chat+api.ts 파일을 수정하여 화씨를 섭씨로 변환하는 새 도구를 추가하세요:

import {
  streamText,
  UIMessage,
  convertToModelMessages,
  tool,
  isStepCount,
  createUIMessageStreamResponse,
  toUIMessageStream,
} from 'ai';
__PROVIDER_IMPORT__;
import { z } from 'zod';

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

  const result = streamText({
    model: __MODEL__,
    messages: await convertToModelMessages(messages),
    stopWhen: isStepCount(5),
    tools: {
      weather: tool({
        description: 'Get the weather in a location (fahrenheit)',
        inputSchema: z.object({
          location: z.string().describe('The location to get the weather for'),
        }),
        execute: async ({ location }) => {
          const temperature = Math.round(Math.random() * (90 - 32) + 32);
          return {
            location,
            temperature,
          };
        },
      }),
      convertFahrenheitToCelsius: tool({
        description: 'Convert a temperature in fahrenheit to celsius',
        inputSchema: z.object({
          temperature: z
            .number()
            .describe('The temperature in fahrenheit to convert'),
        }),
        execute: async ({ temperature }) => {
          const celsius = Math.round((temperature - 32) * (5 / 9));
          return {
            celsius,
          };
        },
      }),
    },
  });

  return createUIMessageStreamResponse({
    stream: toUIMessageStream({ stream: result.stream }),
    headers: {
      'Content-Type': 'application/octet-stream',
      'Content-Encoding': 'none',
    },
  });
}

새 도구를 위한 UI 업데이트

UI에 온도 변환 도구 호출을 표시하려면 app/(tabs)/index.tsx 파일을 수정하여 새 도구 부분을 처리하세요:

import { generateAPIUrl } from '@/utils';
import { useChat } from '@ai-sdk/react';
import { DefaultChatTransport } from 'ai';
import { fetch as expoFetch } from 'expo/fetch';
import { useState } from 'react';
import { View, TextInput, ScrollView, Text, SafeAreaView } from 'react-native';

export default function App() {
  const [input, setInput] = useState('');
  const { messages, error, sendMessage } = useChat({
    transport: new DefaultChatTransport({
      fetch: expoFetch as unknown as typeof globalThis.fetch,
      api: generateAPIUrl('/api/chat'),
    }),
    onError: error => console.error(error, 'ERROR'),
  });

  if (error) return <Text>{error.message}</Text>;

  return (
    <SafeAreaView style={{ height: '100%' }}>
      <View
        style={{
          height: '95%',
          display: 'flex',
          flexDirection: 'column',
          paddingHorizontal: 8,
        }}
      >
        <ScrollView style={{ flex: 1 }}>
          {messages.map(m => (
            <View key={m.id} style={{ marginVertical: 8 }}>
              <View>
                <Text style={{ fontWeight: 700 }}>{m.role}</Text>
                {m.parts.map((part, i) => {
                  switch (part.type) {
                    case 'text':
                      return <Text key={`${m.id}-${i}`}>{part.text}</Text>;
                    case 'tool-weather':
                    case 'tool-convertFahrenheitToCelsius':
                      return (
                        <Text key={`${m.id}-${i}`}>
                          {JSON.stringify(part, null, 2)}
                        </Text>
                      );
                  }
                })}
              </View>
            </View>
          ))}
        </ScrollView>

        <View style={{ marginTop: 8 }}>
          <TextInput
            style={{ backgroundColor: 'white', padding: 8 }}
            placeholder="Say something..."
            value={input}
            onChange={e => setInput(e.nativeEvent.text)}
            onSubmitEditing={e => {
              e.preventDefault();
              sendMessage({ text: input });
              setInput('');
            }}
            autoFocus={true}
          />
        </View>
      </View>
    </SafeAreaView>
  );
}

이제 "What's the weather in New York in celsius?"라고 물어보면 더 완전한 상호 작용을 볼 수 있습니다:

1. 모델이 뉴욕의 날씨를 위해 weather 도구를 호출합니다.
2. 도구 결과가 표시됩니다.
3. 그런 다음 화씨를 섭씨로 변환하기 위해 온도 변환 도구를 호출합니다.
4. 모델은 이 정보를 사용하여 뉴욕의 날씨에 대한 자연어 응답을 제공합니다.

이 다단계 접근 방식을 통해 모델은 정보를 수집하고 이를 사용하여 더 정확하고 상황에 맞는 응답을 제공할 수 있으므로 챗봇이 훨씬 더 유용해집니다.

이 간단한 예는 도구가 모델의 기능을 확장할 수 있는 방법을 보여줍니다. 실제 API, 데이터베이스 또는 기타 외부 시스템과 통합되는 더 복잡한 도구를 만들어 모델이 실시간으로 실제 데이터에 접근하고 처리할 수 있게 할 수 있습니다. 도구는 모델의 지식 컷오프와 최신 정보 사이의 간극을 메워줍니다.

폴리필

AI SDK 내부에서 사용되는 일부 함수는 구성과 대상 플랫폼에 따라 Expo 런타임에서 사용하지 못할 수 있습니다.

먼저 다음 패키지를 설치하세요:

import { Platform } from 'react-native';
import structuredClone from '@ungap/structured-clone';

if (Platform.OS !== 'web') {
  const setupPolyfills = async () => {
    const { polyfillGlobal } =
      await import('react-native/Libraries/Utilities/PolyfillFunctions');

    const { TextEncoderStream, TextDecoderStream } =
      await import('@stardazed/streams-text-encoding');

    if (!('structuredClone' in global)) {
      polyfillGlobal('structuredClone', () => structuredClone);
    }

    polyfillGlobal('TextEncoderStream', () => TextEncoderStream);
    polyfillGlobal('TextDecoderStream', () => TextDecoderStream);
  };

  setupPolyfills();
}

export {};

import '@/polyfills';