- React로 웹사이트 챗봇을 구축하려면 LLMs, 프레임워크, UI 컴포넌트를 조합해야 합니다.
- 먼저 챗봇의 로직과 지식창고를 만든 다음 웹 및 메시징 앱과 같은 채널에 통합할 수 있도록 배포하세요.
- Next.js는 React 앱의 견고한 토대가 되며, Botpress webchat 컴포넌트를 통합하여 봇을 원활하게 임베드할 수 있습니다.
약속 예약, FAQ, 제품 추천 등 거의 모든 웹사이트에 AI 상담 원이나 챗봇을 활용할 수 있습니다.
그리고 실제로 그렇습니다. 챗봇은 브랜드에서 가장 빠르게 성장하는 커뮤니케이션 채널이므로 지금이 바로 챗봇을 도입할 수 있는 적기입니다.
그렇다면 이 모든 컴포넌트를 어떻게 연결할까요? React 외에도 LLM 제공자, AI 에이전트 프레임워크에 대해 고민해야 하며, 이 모든 것을 방문자가 상호작용할 수 있는 UI 구성 요소로 어떻게든 패키징해야 합니다.
좋은 소식은 챗봇 플랫폼이 이러한 문제를 해결해준다는 것입니다. 이 가이드에서는 그 단계를 안내해 드리겠습니다:
- 맞춤형 챗봇 구축
- Next.js와 React로 웹사이트 만들기
- 챗봇을 React 프런트엔드에 통합하기
- 챗봇의 UI 스타일 사용자 지정하기
약간의 노력으로 전문적인 고성능 챗봇을 React 사이트에 원활하게 통합할 수 있습니다.
튜토리얼을 건너뛰고 코드를 확인하실 수 있습니다.
2. 챗봇 구축

퍼즐의 첫 번째 큰 조각인 챗봇에 대해 알아봅시다.
봇을 만들려면 스튜디오로 이동하여 봇 만들기 +를 클릭합니다.
목적을 정의하는 데 도움이 되지만 특별히 발전된 아이디어가 필요하지는 않습니다. 비즈니스에는 정책 문서, FAQ 또는 제품 카탈로그가 있을 것입니다. 이러한 정보에 액세스할 수 있는 간단한 챗봇을 사용하면 반복적인 질문에 답하는 데 소요되는 많은 시간을 절약할 수 있습니다.
제 경우에는 외부 와인 카탈로그에 따라 사용자에게 구매할 와인을 추천하는 봇인 디지털 소믈리에를 구축할 것입니다.
흐름 정의
봇이 무엇을 하든 봇에는 흐름이 필요합니다. 이것이 봇의 동작을 결정하는 로직입니다.
스튜디오에서 왼쪽 패널의 워크플로를 누릅니다.

복잡할 필요는 없습니다. 문서에 액세스할 수 있는 단일 자율 노드 (즉, 기본 봇)만으로도 매우 효과적일 수 있습니다.

봇에게 지시를 내리는 것이 중요합니다. 여기에는 다음이 포함됩니다:
- 예의 바르고, 친근하고, 사용자의 어조를 반영하는 등 원하는 페르소나를 적용합니다.
- 메시지를 시작하거나 종료하는 방법
- 특정 쿼리에 응답하는 방법
- 언제 참조할 문서
지식창고 추가하기
이 정보는 봇이 RAG(검색 증강 생성)에 활용하거나 데이터에 대한 응답을 제공하는 데 사용할 정보입니다. 이는 비교적 간단하지만 최상의 RAG를 위해 파일을 최적화하는 방법을 알아두는 것이 좋습니다.
제 디지털 소믈리에(에르?)인 위노나가 와인 리스트에 액세스할 수 있습니다. 와인 리뷰 데이터 세트의 하위 집합인 와인 리스트에는 와인 산지와 시음 노트가 포함되어 있습니다.
배포

봇이 마음에 들면 스튜디오에서 게시를 누르면 봇이 라이브 상태가 됩니다.
따라서 다음과 같은 모든 종류의 커뮤니케이션 채널에 통합할 수 있습니다. WhatsApp, Telegram 같은 모든 커뮤니케이션 채널과 현재 개발 중인 웹 앱에서 통합할 수 있습니다.
2. React 앱 만들기
챗봇이 있지만 집이 필요하므로 사용자가 챗봇과 상호작용할 수 있는 빠른 React 앱을 만들어 봅시다.
저는 Next.js를 사용할 것입니다. 이 튜토리얼은 일반 React보다 더 관련성이 높고 완성도가 높다고 생각하며, React 사용자에게 필요한 모든 내용을 다룰 것입니다.
실행 다음 앱 만들기
실행:
npx create-next-app@14
Next.js 14를 사용하고 있음을 알 수 있습니다. 그 이유는 앱 챗봇을 호환 가능하게 만들려면 React 18이 필요하기 때문입니다. 최신으로 실행하면 Next.js 15 및 React 19로 빌드됩니다. 위의 명령을 실행하는 것이 올바른 버전의 React를 실행하고 Next가 호환되는지 확인하는 가장 쉬운 방법입니다.
앱 구성 설정
일련의 질문을 묻는 메시지가 표시됩니다. 저는 개인적으로 기본 설정을 고수하고 있으며, 이 튜토리얼에서는 기본 설정을 그대로 사용할 것입니다.

모든 것이 순조롭게 진행되었다고 가정하면 성공 로그가 표시됩니다.

3. 챗봇을 React 앱에 통합하기
바비 인형에게 키스할 시간입니다.
Botpress 리액트 보일러플레이트 받기
챗봇을 앱에 통합하려면 다음이 필요합니다:
- 고객 ID
- 미리 빌드된 webchat React 컴포넌트.
Botpress 두 가지를 모두 포함하는 상용구 코드가 있습니다. 그것을 얻으려면:
- 스튜디오로 이동하여 오른쪽 상단 모서리에 있는 공유를 클릭합니다.
- 팝업 오른쪽 하단에서 구성을 클릭합니다.

- 오른쪽 상단의 리액트 탭을 클릭합니다.
- 여기에서 설치 명령어인 클라이언트 ID를 포함한 Botpress 상용구를 찾을 수 있습니다.

참고로 클라이언트 ID에 빠르게 액세스해야 하는 경우:
- Botpress 대시보드로 이동
- 사이드 패널에서 Webchat 선택합니다.
- 고급 설정을 클릭합니다 .
이를 환경 변수에 저장하는 것이 가장 좋지만 지금은 컴포넌트 안에 보관하겠습니다.
앱에서 Chat 컴포넌트 만들기
프로젝트 디렉토리에 chat.tsx 파일을 만들겠습니다.

그런 다음 챗봇 클라이언트용 코드를 입력합니다:
"use client"
import { useState } from 'react';
import {
Webchat,
WebchatProvider,
Fab,
getClient,
Configuration,
} from '@botpress/webchat';
const clientId = "";
const configuration: Configuration = {
color: '#000',
};
export default function Chat() {
const client = getClient({
clientId,
});
const [isWebchatOpen, setIsWebchatOpen] = useState(false);
const toggleWebchat = () => {
setIsWebchatOpen((prevState) => !prevState);
};
return (
<div
style={{
position: 'fixed',
display: 'flex',
flexDirection: 'column',
bottom: 0,
right: 0,
alignItems: 'flex-end',
gap: '12px',
padding: '24px', // give some breathing room
zIndex: 9999,
}}
>
<WebchatProvider client={client} configuration={configuration}>
<div
style={{
// position: '',
marginTop: '12px',
marginBottom: '72px',
width: '350px',
maxHeight: '500px',
overflow: 'scroll',
borderRadius: '16px',
backgroundColor: '#fff',
transform: isWebchatOpen ? 'scale(1)' : 'scale(0)',
transformOrigin: 'bottom right',
transition: 'transform 0.3s ease-in-out',
}}
>
<Webchat />
</div>
<Fab onClick={toggleWebchat} style={{ position: 'absolute', bottom: '24px', right: '24px' }} />
</WebchatProvider>
</div>
);
}
다음은 몇 가지 주목할 만한 조정을 거친 botpress 코드입니다:
"클라이언트 사용"
를 클릭합니다, 상태 관리를 처리하는 컴포넌트의 경우- 앱에서 Chat 기능 이름 바꾸기
- 몇 가지 스타일링
이제 다음으로 이동합니다. 앱/페이지.tsx
를 클릭하고 바닥글 바로 위에 가져옵니다:
import Image from "next/image";
import styles from "./page.module.css";
import Chat from "./chat";
export default function Home() {
return (
<div className={styles.page}>
<main className={styles.main}>
<Image
className={styles.logo}
src="https://nextjs.org/icons/next.svg"
alt="Next.js logo"
width={180}
height={38}
priority
/>
<ol>
<li>
Get started by editing <code>app/page.tsx</code>.
</li>
<li>Save and see your changes instantly.</li>
</ol>
<div className={styles.ctas}>
<a
className={styles.primary}
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className={styles.logo}
src="https://nextjs.org/icons/vercel.svg"
alt="Vercel logomark"
width={20}
height={20}
/>
Deploy now
</a>
<a
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
className={styles.secondary}
>
Read our docs
</a>
</div>
</main>
<Chat/>
<footer className={styles.footer}>
<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="https://nextjs.org/icons/file.svg"
alt="File icon"
width={16}
height={16}
/>
Learn
</a>
<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="https://nextjs.org/icons/window.svg"
alt="Window icon"
width={16}
height={16}
/>
Examples
</a>
<a
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="https://nextjs.org/icons/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
Go to nextjs.org →
</a>
</footer>
</div>
);
}
이제 다음을 실행할 수 있습니다. npm 실행 개발
를 프로젝트 디렉터리의 터미널에 설치하여 로컬 서버에서 실행합니다.
챗봇으로 React 앱 강화하기
무거운 웹 프레임워크를 사용하면 핵심 기능에 집중하느라 부가 기능에 신경 쓸 겨를이 없습니다.
Botpress 사전 구축된 구성 요소, 시각적인 드래그 앤 드롭 빌더, 위에서 아래로 사용자 정의할 수 있는 기능을 제공합니다. 간단한 통합을 위해 성능을 희생할 필요는 없습니다.
React로 빌드하는 경우 품질을 추구합니다. 챗봇은 이를 반영해야 합니다.
지금 바로 구축을 시작하세요. 무료입니다.