OpenAI가 출시한 ChatKit은 개발자들이 몇 주씩 걸리던 AI 채팅 인터페이스 구축 작업을 단 몇 분으로 단축시켜주는 프레임워크입니다. 복잡한 상태 관리, 스트리밍 처리, UI 구현을 직접 할 필요 없이 코드 몇 줄로 프로덕션급 채팅 경험을 앱에 바로 통합할 수 있습니다.

핵심 포인트:

• 개발 시간 70% 단축: Ramp는 몇 달 걸리던 작업을 몇 시간 만에 완성. 드롭인 방식으로 통합하면 복잡한 채팅 UI 구현이 필요 없음
• 프로덕션급 기능 기본 제공: 응답 스트리밍, 파일 업로드, 툴 통합, 스레드 관리까지 모두 내장. 처음부터 만들 필요 없이 바로 사용 가능
• 실제 기업들이 검증: HubSpot 고객 지원 에이전트, Ramp 구매 에이전트 등이 이미 프로덕션 환경에서 활용 중

채팅 UI 구축, 왜 이렇게 어려웠을까?

AI 기능을 앱에 추가하고 싶은 개발자들이 가장 먼저 마주하는 벽이 바로 채팅 인터페이스입니다. OpenAI API를 호출하는 건 간단하지만, 실제로 사용자가 쓸 만한 채팅 UI를 만들려면 이야기가 달라집니다.

실시간 응답 스트리밍을 어떻게 처리할까? 파일 업로드는? 대화 히스토리 관리는? AI가 외부 툴을 호출할 때 어떻게 시각화할까? 이런 문제들을 하나씩 해결하다 보면 몇 주가 훌쩍 지나갑니다. 정작 중요한 AI 로직 구현보다 프론트엔드 작업에 더 많은 시간을 쏟게 되는 것이죠.

ChatKit은 바로 이 문제를 해결하기 위해 만들어졌습니다. 채팅 인터페이스에 필요한 모든 것을 완성된 형태로 제공하면서도, 여러분의 브랜드에 맞게 커스터마이징할 수 있는 유연성까지 갖췄습니다.

ChatKit의 핵심 특징

ChatKit은 ‘배터리 포함(batteries-included)’ 프레임워크입니다. 필요한 모든 기능이 처음부터 들어있다는 뜻이죠.

프레임워크 무관성이 가장 큰 장점입니다. React를 쓰든, Vue를 쓰든, 바닐라 JavaScript를 쓰든 상관없습니다. 웹 컴포넌트로도 사용할 수 있고, React 바인딩도 제공됩니다. 기존 프로젝트 구조를 바꿀 필요 없이 그대로 통합하면 됩니다.

UI 커스터마이징도 깊게 할 수 있습니다. 색상, 폰트, 레이아웃을 여러분의 디자인 시스템에 맞춰 조정할 수 있어서 ChatKit이 처음부터 여러분 앱의 일부였던 것처럼 보이게 만들 수 있습니다.

응답 스트리밍은 기본입니다. 사용자가 AI 응답을 실시간으로 보면서 자연스러운 대화 경험을 느낄 수 있습니다. 파일과 이미지 업로드도 지원하고, AI가 외부 툴을 호출하거나 단계별 추론 과정을 보여줄 때도 자동으로 시각화됩니다.

실제로 구현해보기

코드를 직접 보는 게 가장 빠릅니다. ChatKit을 앱에 통합하는 전체 과정입니다.

1단계: Agent Builder에서 워크플로우 만들기

먼저 Agent Builder에 접속해서 워크플로우를 만듭니다. 드래그 앤 드롭으로 에이전트 로직을 구성한 후 “Publish”를 클릭하면 wf_...로 시작하는 Workflow ID를 받을 수 있습니다. 이 ID가 앞으로 필요합니다.

2단계: 환경 변수 설정

.env 파일에 필요한 정보를 설정합니다:

OPENAI_API_KEY=your_api_key_here
NEXT_PUBLIC_CHATKIT_WORKFLOW_ID=wf_your_workflow_id

주의할 점: API 키는 Agent Builder를 만든 것과 동일한 조직과 프로젝트에서 생성해야 합니다.

3단계: 서버에서 세션 생성 엔드포인트 만들기

Next.js 예시입니다 (FastAPI나 다른 프레임워크도 동일한 로직 적용):

// app/api/create-session/route.ts
import OpenAI from 'openai';

export async function POST() {
  const openai = new OpenAI({
    apiKey: process.env.OPENAI_API_KEY,
  });

  const session = await openai.beta.chatkit.sessions.create({
    user: "user",
    workflow: { id: process.env.NEXT_PUBLIC_CHATKIT_WORKFLOW_ID }
  });

  return Response.json({ client_secret: session.client_secret });
}

4단계: 프론트엔드에 ChatKit 추가

HTML에 ChatKit 스크립트를 추가합니다:

<script
  src="https://cdn.platform.openai.com/deployments/chatkit/chatkit.js"
  async
></script>

React를 사용한다면 바인딩을 설치하고:

npm install @openai/chatkit-react

ChatKit 컴포넌트를 렌더링합니다:

import { ChatKit, useChatKit } from '@openai/chatkit-react';

export function MyChat() {
  const { control } = useChatKit({
    api: {
      async getClientSecret(existing) {
        const res = await fetch('/api/create-session', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
        });
        const { client_secret } = await res.json();
        return client_secret;
      },
    },
  });

  return <ChatKit control={control} className="h-[600px] w-[320px]" />;
}

끝입니다. 이제 여러분 앱에 완전히 작동하는 AI 채팅 인터페이스가 생겼습니다. 공식 스타터 템플릿을 클론하면 더 빠르게 시작할 수 있습니다.

실제 기업들은 어떻게 활용하고 있을까?

ChatKit의 진가는 실제 프로덕션 환경에서 드러납니다.

HubSpot은 ChatKit으로 고객 지원 에이전트를 구축했습니다. 사용자들이 제품 관련 질문을 하면 AI가 실시간으로 답변하고, 필요하면 관련 문서나 튜토리얼을 바로 보여줍니다. 채팅 인터페이스가 HubSpot의 기존 디자인과 완벽하게 어울리면서도 강력한 AI 기능을 제공합니다.

Ramp는 더 극적인 사례입니다. 구매 에이전트 구축에 원래 몇 달이 걸릴 것으로 예상했지만, Agent Builder와 ChatKit을 사용하면서 단 몇 시간 만에 완성했습니다. “복잡한 오케스트레이션, 커스텀 코드, 수동 최적화에 몇 달씩 걸리던 작업이 단 몇 시간으로 줄었다”는 게 Ramp 팀의 평가입니다.

일본의 대형 IT 기업 LY Corporation도 비슷한 경험을 했습니다. 엔지니어와 도메인 전문가가 하나의 인터페이스에서 협업하면서 첫 번째 멀티 에이전트 워크플로우를 2시간 만에 만들고 실행했습니다.

AgentKit 생태계의 일부

ChatKit은 단독으로도 강력하지만, OpenAI의 AgentKit 생태계의 일부로 사용할 때 진정한 힘을 발휘합니다.

Agent Builder는 에이전트 워크플로우를 시각적으로 설계할 수 있는 캔버스입니다. 드래그 앤 드롭으로 노드를 배치하고, 툴을 연결하고, 가드레일을 설정할 수 있습니다. 복잡한 멀티 에이전트 시스템도 직관적으로 디자인할 수 있죠.

Connector Registry는 데이터 소스를 중앙에서 관리하는 허브입니다. Dropbox, Google Drive, SharePoint 같은 서비스들을 한 곳에서 연결하고 관리할 수 있습니다. ChatGPT와 API 전반에서 일관되게 사용할 수 있습니다.

Evals는 에이전트 성능을 측정하고 개선하는 도구입니다. 데이터셋을 만들고, 추적 기록을 평가하고, 프롬프트를 자동으로 최적화할 수 있습니다. 심지어 타사 모델도 평가할 수 있습니다.

이 모든 도구가 하나의 워크플로우로 연결됩니다. Agent Builder로 워크플로우를 설계하고, ChatKit으로 UI를 임베딩하고, Evals로 성능을 측정하는 전체 사이클을 한 플랫폼에서 완성할 수 있습니다.

지금 바로 시작하기

ChatKit은 현재 일반 공개(GA) 상태입니다. 모든 개발자가 바로 사용할 수 있습니다. 별도 요금 없이 표준 API 모델 가격만으로 이용할 수 있습니다.

시작하는 가장 빠른 방법은 OpenAI의 공식 스타터 앱을 클론하는 것입니다. 완전히 작동하는 템플릿이 준비되어 있어서 바로 실행하고 수정하면서 배울 수 있습니다. 고급 샘플 저장소에서는 더 복잡한 사용 사례들도 확인할 수 있습니다.

공식 문서에는 API 레퍼런스, 컴포넌트 속성, 테마 가이드가 모두 포함되어 있습니다. React 바인딩뿐 아니라 웹 컴포넌트로 사용하는 방법도 자세히 설명되어 있습니다.

AI 채팅 인터페이스 구축에 시간을 낭비하지 마세요. ChatKit으로 10분 만에 시작하고, 정작 중요한 AI 로직 개발에 집중하세요.

---

참고자료:

• GitHub – openai/chatkit-js
• ChatKit Documentation
• Introducing AgentKit | OpenAI
• Everything OpenAI announced at DevDay 2025 | ZDNET

2

Like?