AI 기반 프론트엔드 UI 컴포넌트 생성기 (Next.js, GPT4, Langchain, CopilotKit)

by Philip21at 2024년 5월 19일

원본출처: https://dev.to/tcms/ai-powered-frontend-ui-components-generator-nextjs-gpt4-langchain-copilotkit-1hac

요약

이 글에서는, 구현 튜토리얼을 통해 AI 기반 프런트엔드 UI 컴포넌트 생성기를 구축하는 방법을 배울 수 있습니다. 이 생성기는 Next.js와 Tailwind CSS를 사용한 UI 컴포넌트를 생성합니다.

다음 방법을 다룰 예정입니다.

Next.js, Typescript, Tailwind CSS를 사용한 UI 컴포넌트 생성기 웹앱을 빌드 합니다.
AI 기능을 UI 컴포넌트 생성기에 연동하기 위해서 CopilotKit을 사용합니다.
내장된 코드 편집기를 사용해서 생성된 코드를 변경할 수 있도록 합니다.

전제 조건

이 튜토리얼을 완전히 이해하기 위해서는 React 혹은 Next.js에 대한 기본적인 이해가 필요합니다.

다음은 AI 기반 UI 컴포넌트 생성기를 구축하는 데 필요한 도구입니다.

Ace Code Editor - 네이티브 에디터의 기능과 성능에 필적하는 자바스크립트로 작성된 임베드 가능한 코드 에디터입니다.
Langchain - AI 에이전트가 웹을 검색하고 주제를 조사하기 위한 프레임워크를 제공합니다.
Open AI API - ChatGPT 모델을 사용하여 다양한 작업을 수행할 수 있는 API 키를 제공합니다.
Tavily AI - 검색엔진으로, AI 에이전트가 어플리케이션 내에서 실시간으로 정보에 접근하고 조사할 수 있게 해줍니다.
CopilotKit - 오픈소스 Copilot 프레임워크로, 커스텀 AI 챗봇, 인앱 AI 에이전트, 텍스트 영역을 구축할 수 있습니다.

프로젝트 설정 및 패키지 설치

먼저, 터미널에서 아래 코드를 실행해서 Next.js 어플리케이션을 생성하세요.

npx create-next-app@latest aiuigenerator

원하는 프로젝트 환경설정을 선택하세요. 이 튜토리얼에서는 Typescript와 Next.js App Router를 사용할 예정입니다.

다음으로 Ace 코드 편집기와 Langchain 패키지들, 그리고 종속 패키지들까지 모두 설치합니다.

npm install react-ace @langchain/langgraph

마지막으로 CopilotKit 패키지들을 설치하세요. 이 패키지들을 사용하면 리액트 상태값에서 데이터를 가져올 수 있게 되고, AI Copilot을 어플리케이션에 추가할 수 있습니다.

npm install @copilotkit/react-ui @copilotkit/react-textarea @copilotkit/react-core @copilotkit/backend

축하합니다! 이제 AI 기반 블로그를 구축할 준비가 되었습니다.

UI 컴포넌트 생성기의 프론트엔드 구축하기

이 섹션에서는 생성기의 사용자 인터페이스 정의를 위해 정적 컨텐츠와 함께 UI 컴포넌트 생성기의 프론트엔드를 구축하는 법을 안내합니다.

시작하려면, 코드 편집기에서/[root]/src/app로 이동한 후components 폴더를 생성하세요. 그리고 components 폴더 안에서 Header.tsx와 CodeTutorial.tsx 두 파일을 생성하세요.

Header.tsx 파일 안에는 생성기의 네비게이션바를 렌더링하는 Header 함수 컴포넌트 코드를 아래와 같이 추가합니다.

"use client";
 
import Link from "next/link";

export default function Header() {
  return (
    <>
      <header className="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-gray-800 border-b border-gray-200 text-sm py-3 sm:py-0 ">
        <nav
          className="relative max-w-7xl w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8"
          aria-label="Global">
          <div className="flex items-center justify-between">
            <Link
              className="w-full flex-none text-xl text-white font-semibold p-6"
              href="/"
              aria-label="Brand">
              AI-UI-Components-Generator
            </Link>
          </div>
        </nav>
      </header>
    </>
  );
}

CodeTutorial.tsx 파일 안에는 UI 컴포넌트 생성기 홈페이지를 렌더링 하는 코드를 추가합니다. 컴포넌트는 생성기에 의해 생성된 UI 컴포넌트 코드와 내장된 코드 에디터, 그리고 생성된 구현 튜토리얼을 보여줍니다.

"use client";

import Markdown from "react-markdown";
import { useState } from "react";
import AceEditor from "react-ace";
import React from "react";

export default function CodeTutorial() {
  const [code, setCode] = useState<string[]>([
    `<h1 class="text-red-500">Hello World</h1>`,
  ]);
  const [codeToDisplay, setCodeToDisplay] = useState<string>(code[0] || "");
  const [codeTutorial, setCodeTutorial] = useState(``);

  function onChange(newCode: any) {
    setCodeToDisplay(newCode);
  }

  return (
    <>
      <main className=" min-h-screen px-4">
        <div className="w-full h-full min-h-[70vh] flex justify-between gap-x-1 ">
          <div className="w-2/3 min-h-[60vh] rounded-lg bg-white shadow-lg p-2 border mt-8 overflow-auto">
            <div
              className="w-full min-h-[60vh] rounded-lg"
              dangerouslySetInnerHTML={{ __html: codeToDisplay }}
            />
          </div>
          <AceEditor
            placeholder="Placeholder Text"
            mode="html"
            theme="monokai"
            name="blah2"
            className="w-[50%] min-h-[60vh] p-2 mt-8 rounded-lg"
            onChange={onChange}
            fontSize={14}
            lineHeight={19}
            showPrintMargin={true}
            showGutter={true}
            highlightActiveLine={true}
            value={codeToDisplay}
            setOptions={{
              enableBasicAutocompletion: true,
              enableLiveAutocompletion: true,
              enableSnippets: false,
              showLineNumbers: true,
              tabSize: 2,
            }}
          />
        </div>
        <div className="w-10/12 mx-auto">
          <div className="mt-8">
            <h1 className="text-white text-center text-xl font-semibold p-6">
              Code Tutorial
            </h1>
            {codeTutorial ? (
              <Markdown className="text-white">{codeTutorial}</Markdown>
            ) : (
              <div className="text-white">
                The Code Tutorial Will Appear Here
              </div>
            )}
          </div>
        </div>
      </main>
    </>
  );
}

다음으로 /[root]/src/page.tsx 파일로 이동하여 CodeTutorial과 Header 컴포넌트를 Home 함수 컴포넌트 안에서 렌더링 하는 코드를 다음과 같이 추가합니다.

import React from "react";
import Header from "./components/Header";
import CodeTutorial from "./components/CodeTutorial";

export default function Home() {
  return (
    <>
      <Header />
      <CodeTutorial />
    </>
  );
}

그 다음, global.css 파일의 CSS 코드를 지우고 아래 CSS 코드를 추가합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  height: 100vh;
  background-color: rgb(16, 23, 42);
}

pre {
  margin: 1rem;
  padding: 1rem;
  border-radius: 10px;
  background-color: black;
  overflow: auto;
}

h2,
p {
  padding-bottom: 1rem;
  padding-top: 1rem;
}

code {
  margin-bottom: 2rem;
}

마지막으로, npm run dev 명령어를 실행시키고http://localhost:3000로 접속 합니다.

이제 아래와 같은 UI 컴포넌트 생성기 프론트엔드 화면이 브라우저에 떠야 합니다.

CopilotKit을 사용해서 컴포넌트 생성기에 AI 기능 연동하기

이번 섹션에서는, CopilotKit을 사용해서 UI 컴포넌트와 구현 튜토리얼을 생성하는 AI copilot을 추가하는 법을 살펴볼 예정입니다.

CopilotKit은 프론트엔드와 백엔드패키지 모두 제공합니다. 이 패키지들은 AI 에이전트를 사용함으로써 백엔드에서 데이터를 처리하고, 이 데이터들을 리액트 상태값으로 연결해서 사용할 수 있게 해줍니다.

먼저 CopilotKit React를 블로그 프론트엔드 단에 추가해 보겠습니다.

블로그 프론트엔드에 CopilotKit 추가하기

여기에서는 UI 컴포넌트 생성기를 CopilotKit 프론트엔드와 통합하여 UI 컴포넌트 코드 및 구현 튜토리얼 생성을 용이하게 하는 과정을 안내합니다.

시작하기 위해, /[root]/src/app/components/CodeTutorial.tsx 파일 상단에 useMakeCopilotReadable과 useCopilotAction 커스텀 훅을 import 하는 코드조각을 아래와 같이 추가합니다.

import {
  useCopilotAction,
  useMakeCopilotReadable,
} from "@copilotkit/react-core";

CodeTutorial 함수 내에서, 상태 변수값 정의 아래에, useMakeCopilotReadable 훅을 사용해서 생성된 인앱 챗봇 컨택스트를 생성하는 코드를 추가해줍니다. 이 훅은 copilot이 코드를 읽을 수 있게 해줍니다.

useMakeCopilotReadable(codeToDisplay);

그 아래에, 다음 코드를 더 추가합니다. generateCodeAndImplementationTutorial을 셋팅하는 useCopilotAction 훅을 사용함으로써 UI 컴포넌트 코드와 구현 튜토리얼 생성을 활성화 합니다.

액션이 받는 파라미터 code가 UI 컴포넌트 코드 생성을 활성화, tutorial이 구현 튜토리얼의 생성을 활성화 합니다.

액션은 UI 컴포넌트 주어진 프롬프트 기반으로 코드와 구현 튜토리얼이 생성되는 것을 핸들링 할 수 있는 함수를 갖습니다.

핸들러 함수 안에서는, 아래 코드 처럼 codeToDisplay 상태는 새로 생성된 코드로 갱신되고, code Tutorial 상태는 새로 생성된 튜토리얼로 업데이트 됩니다.

useCopilotAction(
    {
      name: "generateCodeAndImplementationTutorial",
      description:
        "Create Code Snippet with React.js(Next.js), tailwindcss and an implementation tutorial of the code generated.",
      parameters: [
        {
          name: "code",
          type: "string",
          description: "Code to be generated",
          required: true,
        },
        {
          name: "tutorial",
          type: "string",
          description:
            "Markdown of step by step guide tutorial on how to use the generated code accompanied with the code. Include introduction, prerequisites and what happens at every step accompanied with code generated earlier. Don't forget to add how to render the code on browser.",
          required: true,
        },
      ],
      handler: async ({ code, tutorial }) => {
        setCode((prev) => [...prev, code]);
        setCodeToDisplay(code);
        setCodeTutorial(tutorial);
      },
    },
    [codeToDisplay, codeTutorial]
  );

그 다음에 /[root]/src/app/page.tsx 파일로 이동하여, 상단에 CopilotKit 프론트엔드 패키지와 스타일을 아래 코드와 같이 import 합니다.

import { CopilotKit } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";

그리고나서 CopilotKit을 사용해서 CopilotSidebar와 CodeTutorial 컴포넌트를 감쌉니다. CopilotKit 컴포넌트에 CopilotKit의 백엔드 엔드포인트를 URL(`/api/copilotkit/`)로 명시하면 CopilotSidebar는 인앱 챗봇을 렌더링 합니다. 이 챗봇을 활용해 UI 컴포넌트 코드와 구현 튜토리얼을 생성하라는 메시지를 전달할 수 있습니다.

export default function Home() {
  return (
    <>
      <Header />
      <CopilotKit url="/api/copilotkit">
        <CopilotSidebar
          instructions="Help the user generate code. Ask the user if to generate its tutorial."
          defaultOpen={true}
          labels={{
            title: "Code & Tutorial Generator",
            initial: "Hi! 👋 I can help you generate code and its tutorial.",
          }}>
          <CodeTutorial />
        </CopilotSidebar>
      </CopilotKit>
    </>
  );
}

개발 서버를 실행하고, http://localhost:3000로 접속하세요. UI 컴포넌트 생성기 안에 인앱 챗봇이 통합된 화면이 보여야 합니다.

블로그에 CopilotKit 백엔드 추가하기

이제 CopilotKit 백엔드를 UI 컴포넌트 생성기와 연동하는 과정을 안내하겠습니다. CopilotKit 백엔드는 프론트엔드 요청을 처리하고 함수 호출이나 GPT와 같은 다양한 LLM 백엔드를 제공합니다.

또한, 웹상의 다양한 주제를 탐색할 수 있는 Tavily라는 AI 에이전트를 연동할 것입니다.

우선, 루트 디렉터리에 .env.local 파일을 생성합니다. 그리고 ChatGPT와 Tavily 검색 API 키를 아래와 같이 환경변수 파일로 넣어줍니다.

OPENAI_API_KEY="Your ChatGPT API key"
TAVILY_API_KEY="Your Tavily Search API key"

Chat GPT API 키를 받으려면 https://platform.openai.com/api-keys를 확인해 보세요.

Tavily 검색 API 키를 받으려면 https://app.tavily.com/home를 확인해 보세요.

그리고 /[root]/src/app으로 이동하여 api 폴더를 생성하세요. api 파일 안으로 다시 이동 후 copilotkit 폴더를 생성하세요.

copilotkit 폴더 안에는 research.ts 파일을 생성하세요. 이 파일에는 POST 요청을 처리하는 백엔드 기능을 설정하는 코드가 위치합니다. 특정 주제를 조사하는 "research" 액션이 조건부로 포함됩니다.

이제 파일 상단에 아래와 같이 모듈을 가져오는 코드를 추가합니다.

import { CopilotBackend, OpenAIAdapter } from "@copilotkit/backend"; // CopilotKit 백엔드 기능을 위해
import { researchWithLangGraph } from "./research"; // 조사 수행을 위한 사용자 정의 기능을 가져옵니다.
import { AnnotatedFunction } from "@copilotkit/shared"; // 메타데이터로 함수에 주석을 달기 위해 가져옵니다.

위 코드 아래 다음과 같이 런타임 환경변수를 정의합니다. 그리고 특정 주제를 조사할 수 있는 researchAction 함수를 정의합니다.

// 코드가 실행될 것으로 예상되는 환경에 대한 런타임 환경 변수를 정의합니다.
export const runtime = "edge";

// 조사하기 위해 주석이 달린 함수를 정의합니다. 이 객체는 함수에 대한 메타 데이터와 구현을 갖고 있습니다.
const researchAction: AnnotatedFunction<any> = {
  name: "research", // 함수 이름
  description: "Call this function to conduct research on a certain topic. Respect other notes about when to call this function", // 함수 내용
  argumentAnnotations: [ // 함수가 받는 인자에 대한 주석
    {
      name: "topic", // 인자 이름
      type: "string", // 인자 타입
      description: "The topic to research. 5 characters or longer.", // 인자 내용
      required: true, // 필수적인 인자인지
    },
  ],
  implementation: async (topic) => { // 실제 함수 구현
    console.log("Researching topic: ", topic); // 조사 주제 로깅
    return await researchWithLangGraph(topic); // research 함수를 호출하고 결과를 받음
  },
};

그리고 위 코드 아래에 다시 POST 요청을 처리하는 비동기 함수를 정의하는 코드를 추가합니다.

// POST 요청을 처리하는 비동기 함수 정의
export async function POST(req: Request): Promise<Response> {
  const actions: AnnotatedFunction<any>[] = []; // 액션을 갖는 배열 초기화

  // 특정 기능에 접근하기 위한 환경변수가 설정되어 있는지 확인
  if (process.env.TAVILY_API_KEY) {
    actions.push(researchAction); // 참인 경우 조사작업을 배열에 추가
  }

  // 위에 정의한 액션으로 Copilot 백엔드 인스턴스를 초기화
  const copilotKit = new CopilotBackend({
    actions: actions,
  });

  // Copilot 백엔드 인스턴스와 OpenAIAdapter를 사용해서 수신한 요청에 대한 응답 생성
  return copilotKit.response(req, new OpenAIAdapter());
}

UI 컴포넌트를 생성하는 법

이제 아까 구축해둔 인앱 챗봇으로 가서 "generate a contact form"과 같은 메세지를 전달해보세요.

생성이 완료되면 아래처럼 구현 튜토리얼과 함께 생성된 "contact form" 컴포넌트가 나타납니다. 내장된 코드 편집기를 사용해서 생성된 코드를 수정할 수도 있습니다.

축하합니다! 이 튜토리얼의 프로젝트를 완료 했습니다.

결론

CopilotKit은 짧은 시간 안에 AI Copilot을 제품에 추가할 수 있도록 돕는 놀라운 도구입니다. AI 챗봇과 어시스턴트에 관심이 있든 복잡한 작업을 자동화하든 CopilotKit을 사용하면 쉽게 할 수 있습니다.

만약 AI 제품을 구축하거나 AI 도구를 소프트웨어 어플리케이션에 통합해야 하는 경우 CopilotKit을 고려해 보세요.

이 튜토리얼의 소스 코드는 GitHub (https://github.com/TheGreatBonnie/AIPoweredUIComponentsGenerator)에서 확인할 수 있습니다.

by Philip21at 2024년 5월 19일

댓글 기능은 준비 중에 있습니다. 내용에 대한 피드백은 devjaewon21@gmail.com으로 주시면 언제든 환영합니다.