GPT-3.5+와 같은 언어 모델을 사용한 함수 호출의 도입은, 언어 모델이 렌더링할 사용자 정의 대화형 사용자 인터페이스를 결정하는 길을 열었습니다.
React Server Components 및 Server Actions를 활용하여, AI SDK는 ai/rsc 패키지를 통해 인터페이스 렌더링 기능을 원활하게 통합합니다. ai/rsc를 사용하여 함수 호출을 지원하지 않는 모델을 JSON과 같은 구조화된 출력을 흉내내거나 직접 스트리밍하여 출력할 수 있습니다.
검색 환경 내에서 구성 요소를 직접 렌더링하여 사용자가 말로 표현할 수 없는 것을 더 많이 볼 수 있도록 하세요.
사용자가 에이전트 실행을 해석하기 쉽도록 만들어서, 그들이 뒷면의 마법을 계속해서 이해할 수 있도록 도와주세요.
AI SDK는 AIState와 UIState라는 두 가지 새로운 개념을 소개합니다. 이러한 상태는 서버 측 AI 작업과 애플리케이션에서 렌더링된 클라이언트 측 UI 간의 명확한 역할 분리를 도입합니다. 이 분리로 개발자는 AI 상태를 안전하게 유지할 수 있으며, 시스템 프롬프트나 기타 메타데이터와 같은 것을 포함할 수 있습니다. 한편 UI 상태는 React Server Components가 효율적으로 클라이언트로 스트리밍되도록 설계되었습니다.
AIState는 LLM이 읽어야 하는 모든 컨텍스트의 JSON 표현입니다. 채팅 앱의 경우, AIState는 일반적으로 사용자와 어시스턴트 간의 텍스트 대화 기록을 저장합니다. 실제로, 각 메시지의 createdAt와 같은 다른 값 및 메타 정보를 저장하는 데에도 사용될 수 있습니다. AIState는 기본적으로 서버와 클라이언트 모두에서 액세스/수정할 수 있습니다.
UIState는 애플리케이션이 UI를 표시하는 데 사용하는 것입니다. 이는 완전한 클라이언트 측 상태로 (useState와 매우 유사) LLM에 의해 반환된 데이터 및 UI 요소를 유지할 수 있습니다. 이 상태는 무엇이든 될 수 있지만 서버에서는 액세스할 수 없습니다.
많은 경우, 렌더링하는 인터페이스는 서버로부터 업데이트를 요청해야 할 수 있습니다. 예를 들어, 날씨 앱은 최신 날씨 데이터를 매 5분마다 요청해야 하거나, 버튼을 누르면 검색을 실행해야 할 수도 있습니다. 이를 위해 UI 구성 요소에 서버 액션을 전달하고 필요할 때 호출할 수 있습니다.
예를 들어, createAI에서 handleUserMessage 액션이 등록되어 있다면, 다음과 같이 중첩된 서버 액션을 정의할 수 있습니다:
그런 다음 WeatherCard 컴포넌트에서는 최신 날씨 데이터를 로드하고 클라이언트 UI를 업데이트하기 위해 refreshAction 함수를 onClick 이벤트 핸들러, 효과 또는 폴링과 같은 방법으로 호출할 수 있습니다.
클라이언트 구성 요소에서 AI 상태 업데이트
AI 상태는 언어 모델에 제공된 대화의 맥락을 나타내며 종종 채팅 메시지의 배열입니다. 때로는 사용자가 양식을 작성하거나 슬라이더와 같은 UI 요소와 상호 작용하는 경우와 같이 새 정보로 언어 모델의 상태를 업데이트해야 할 수 있습니다. useAIState 훅을 사용하여 클라이언트에서 AI 상태를 변경할 수 있습니다.
아래 예시에서는 사용자가 주식의 주식을 구매할 수 있는 슬라이더가 있습니다. 사용자가 슬라이더를 변경하면 새 정보로 AI 상태를 업데이트합니다.
AI SDK가 제공하는 강력한 기능 중 하나는 다른 UI 구성 요소 내부에서 UI 구성 요소를 스트리밍할 수 있는 능력입니다. 이를 통해 작은 재사용 가능한 구성 요소로부터 구성된 복잡한 UI를 만들 수 있습니다. 아래 예시에서는 historyChart를 스트리밍 가능한 속성으로 StockCard 구성 요소에 전달합니다. StockCard는 historyChart를 스트리밍하여 렌더링할 수 있으며, 서버가 새 데이터로 응답할 때 자동으로 업데이트됩니다.
2024년 3월 2일에 마지막으로 업데이트되었습니다