Generative UI & AI

date

Jun 20, 2024

slug

generative-ui

author

status

Public

tags

Next.js

GPT

summary

type

Post

thumbnail

category

🤖 Computer Science

updatedAt

Jun 25, 2024 05:58 AM

1. Generative UI란?

• 개인화 요소: 읽기 쉬운 폰트 및 색상 대비, 선호하는 좌석 유형, 비행 옵션 우선순위 (비용, 여행 시간 등)

• 사용자 목표와 최종 결과에 초점을 맞춘 경험 디자인.
• 인터페이스 설계보다 사용자 목표 달성에 중점.
• 디자이너는 개별 사용자 요구에 맞춘 인터페이스 생성.

• 디자이너는 사용자의 목표와 비즈니스 목표를 이해하고, 이를 AI 시스템에 반영하여 인터페이스를 설계함

2. 구현해보기 with Vercel AI SDK

• AI SDK Core, SDK UI, SDK RSC

import { generateText } from "ai"
import { openai } from "@ai-sdk/openai"

const { text } = await generateText({
	model: openai("gpt-4-turbo"), // or anthropic("claude-3-opus-20240229"), etc.
	prompt: "What is love?"
})

• LLM 모델은 놀라운 생성 기능을 가지지만, 여러 단계를 거쳐야 하는 작업이나 외부 세계와의 상호 작용이 어려움. → 사용자가 만든 도구들을 LLM에게 제시하고, LLM은 어떤 도구를 선택할지 결정한 후, 도구의 input 만을 결정함

import { z } from 'zod';
import { generateText, tool } from 'ai';

const result = await generateText({
  model: yourModel,
  tools: {
	  // 날씨 결정 도구
    weather: tool({
      description: 'Get the weather in a location',
      parameters: z.object({
        location: z.string().describe('The location to get the weather for'),
      }),
      execute: async ({ location }) => (
	      const { data } = axios.get(`/weather?location=${location}`);
	      return { data, location };
      ),
    }),
    recommendedPlace: (...),
  },
  toolChoice: 'required', // 모델이 반드시 도구를 선택하도록 지정
  prompt:
    'What is the weather in San Francisco and what attractions should I visit?',
});

Scenario: 메뉴를 탐색하지 않고 빠르게 동작을 수행할 수 있는 신사업 봇을 만들자! (송금, 결제 내역 확인 등)

|-- playground       // 라우팅 경로 
|  |-- _action       // Server function
|  |  |-- index.tsx
|  |-- _component    
|  |  |-- chat       // Generative UI 폴더
|  |  |  |-- UserMessage.tsx
|  |  |  |-- BotMessage.tsx
|  |  |  |-- TranslateMessage.tsx
|  |  |  |-- (...)
|  |  |-- SectionPlaygroundAI.tsx      // UI State Render
|  |  |-- (...)
|  |-- layout.tsx
|  |-- page.tsx      // AI Provider 감싸기

UI State: 클라이언트 컴포넌트에 렌더링된 부분 전체를 상태 관리한다.

{ id: number, display: ReactNode }

AI State: Server function에서 형식에 맞추어 LLM 모델이 이전 히스토리를 이해할 수 있도록 상태 관리한다.

{ id: string, role: LLMRole, content: string | Array<ToolCallPart> | (...) }

Action: 두 State를 변화시킬 Server function을 등록한다.

// action.tsx
export const AI = createAI({
  actions: {
    submitUserMessage,
  },
  initialUIState,
  initialAIState,
});

// page.tsx
<main className="p-10 flex flex-col min-h-screen z-10 relative">
	<h1 className="text-3xl z-10">Playground</h1>
		// provider 로 감싸기
	  <AI>
	    <SectionPlaygroundAI />
    </AI>
  </div>
 </main>

'use client';

const SectionPlaygroundAI: React.FC = () => {
  const [messages, setMessages] = useUIState<typeof AI>();
  const { submitUserMessage } = useActions<typeof AI>();
  const [form] = Form.useForm();

  const handleFinish = async ({ currentInput }: { currentInput: string }) => {
	  // UI 상태 업데이트
    setMessages((currentMessages) => [
      ...currentMessages,
      { id: Date.now(), type: 'user', display: <UserMessage>{currentInput}</UserMessage> },
    ]);

    try {
		  // Action 호출
      const responseMessage = await submitUserMessage(currentInput);
	    // response를 UI 상태에 업데이트
      setMessages((currentMessages) => [...currentMessages, responseMessage]);
      form.resetFields();
    } catch (e) {
      message.error('AI 서버와의 통신이 원활하지 않습니다.');
    }
  };

  return (
    <section className="rounded-2xl flex flex-col flex-wrap p-6 gap-5 border border-solid border-indigo-500 relative box-content">
      <ul className="flex flex-col gap-4 max-h-[calc(100vh-220px)] mb-16 overflow-y-auto whitespace-pre-line leading-snug">
	      {(...) // UI 메세지 리스트 렌더}
      </ul>
        <Form layout="inline" onFinish={handleFinish}>
        {(...) // 인풋 입력 폼} 
        </Form>
      </article>
    </section>
  );
};

export default SectionPlaygroundAI;

const submitUserMessage = async (content: string) => {
  'use server';
  const aiState = getMutableAIState<typeof AI>();
  aiState.update(...); // 유저 input 히스토리에 추가
	
	// streamable UI 정의
  const reply = createStreamableUI(
	  <BotMessage tool="Loading..." noBg>
      <Skeleton className="w-2/3 mt-2" active />
    </BotMessage>);

  const defaultParameters = z.object({
    isSelect: z.boolean(),
    reason: z.string().describe('The reason why you choose this tool. Answer In Korean.'),
  });

  const { toolResults, toolClls, text } = await generateText({
    model: openai('gpt-4o'),
    messages: aiState.get().map((info: any) => ({
      role: info.role,
      content: info.content,
      name: info.name,
    })),
    tools: {
	    // streaming tool
      translateToKorean: {
        description: 'If user want to translate the input that from another language to Korean.',
        parameters: defaultParameters,
        // function name return
        execute: async (params) => params,
      },
      // generating tool
      send: {
        description: 'send money to another company/user',
        parameters: z.object({
          amount: z.number().optional(),
          receiverName: z.string().describe('name of the receiver').optional(),
          reason: z.string().describe('The reason why you choose this tool. Answer In Korean.'),
        }),
        execute: async ({ amount, receiverName, reason }) => {
          let label = `${receiverName}님께 \n ${amount?.toLocaleString()}원을 보낼게요.`;
          if (!receiverName?.length)
            label = `${amount?.toLocaleString()}원을 \n 어느 분께 송금할까요?`;
          if (!amount) label = `${receiverName}님께 \n 얼마를 송금할까요?`;
          reply.update(
            <BotMessage tool="송금봇" reason={reason}>
              <SendMoneyMessage label={label} receiverName={receiverName} amount={amount} />
            </BotMessage>
          );
          reply.done();
          return { reason };
        },
      },
    },
  });

  const generativeUIActions: Record<any, (args: any) => Promise<any>> = {
    translateToKorean: async (content: string) => {
      const { partialObjectStream } = await streamObject({
        model: openai('gpt-4-turbo'),
        system:
          'You need to translate the input to Korean. Please also provide important word list.',
        prompt: content,
        schema: z.object({
          originText: z.string().describe('The original language text.'),
          sentence: z.string().describe('KOREAN translation of the input.'),
          wordList: z.array(
            z.object({
              word: z.string(),
              mean: z.string(),
            })
          ),
        }),
      });
			
			// 객체 스트리밍 로직
      for await (const partialObject of partialObjectStream) {
        reply.update(
          <BotMessage tool="번역봇" reason={toolResults?.[0]?.result?.reason}>
            <TranslateMessage
              originText={partialObject?.originText}
              sentence={partialObject?.sentence}
              wordList={partialObject?.wordList ?? []}
            />
          </BotMessage>
        );
      }
      reply.done();
    },
  };
	
	// tool이 선택되지 않은 경우
  if (toolResults.length === 0) {
	  // 어시스턴트 응답 히스토리 추가
    aiState.done([...aiState.get(), { role: 'assistant', content: text }]);
    reply.update(<BotMessage>{text}</BotMessage>);
    reply.done();
  } else {
    if (['translateToKorean', (...)].includes(toolResults?.[0]?.toolName)) {
      generativeUIActions[toolResults?.[0]?.toolName]?.(content);
    }
    aiState.done(...); // function calling에 대한 히스토리 추가
  }
	
	// 클라이언트 UI 리턴
  return {
    id: Date.now(),
    display: reply.value,
  };
};

3. Reference