Langflow의 Drag-and-Drop 워크플로우로 멀티플랫폼 AI Bot을 구축한 방법

발행: (2025년 12월 5일 오후 10:51 GMT+9)
5 min read
원문: Dev.to

Source: Dev.to

Overview

시각적 워크플로를 사용하여 QQ, WeChat, Telegram, Discord 등 다양한 플랫폼에서 챗봇을 구동하세요 – 코딩이 필요 없습니다.

LangBot은 오픈‑소스 인스턴트 메신저 봇 플랫폼으로, Langflow, n8n, Dify, FastGPT, Coze와 같은 AI 워크플로 엔진을 WeChat, QQ, Feishu, DingTalk, Telegram, Discord, Slack, LINE 등과 연결합니다. 이 튜토리얼에서는 Langflow의 시각적 워크플로를 LangBot의 대화 엔진으로 활용하는 방법을 보여줍니다.

Why This Approach Works

  • True Multi‑Platform – 하나의 워크플로가 8개 이상의 메신저 플랫폼을 동시에 구동합니다.
  • Visual Orchestration – 조건 분기, 다중 턴 대화, 외부 API 호출을 포함한 드래그‑앤‑드롭 대화 설계.
  • Flexible AI Models – OpenAI, Claude, Gemini, DeepSeek, 로컬 모델 등 지원.
  • Fully Open Source – LangBot과 Langflow 모두 무료 배포 및 커스터마이징이 가능한 오픈소스 프로젝트입니다.

Prerequisites

  • Python 3.10+
  • Docker (빠른 배포를 위해 권장)
  • OpenAI API 키 또는 다른 LLM 서비스용 API 키

Step 1: Deploy LangBot

Launch with uvx in one command:

uvx langbot

첫 실행 시 자동 초기화가 이루어지고 브라우저가 열립니다.

LangBot Initial Page

등록 후 대시보드에 로그인합니다:

LangBot Dashboard

Step 2: Deploy Langflow

Deploy quickly with Docker:

docker run -d --name langflow -p 7860:7860 langflowai/langflow:latest

Langflow에 접근하려면 방문하세요.

Langflow Welcome Page

Step 3: Create a Langflow Workflow

Langflow에서 Basic Prompting 템플릿을 선택하면 빠르게 시작할 수 있습니다:

Langflow Template Selection

템플릿에는 네 가지 기본 컴포넌트가 포함됩니다:

  • Chat Input – 사용자 메시지를 받습니다.
  • Prompt – 시스템 지시를 설정합니다.
  • Language Model – LLM을 호출하여 응답을 생성합니다.
  • Chat Output – 결과를 반환합니다.

Langflow Workflow Editor

Configure Language Model

Language Model 컴포넌트를 클릭하고 다음을 설정합니다:

  • Model Provider – OpenAI(또는 SiliconFlow, New API 등 호환 가능한 제공자를 선택).
  • Model Name – 예: gpt-4o-mini 또는 deepseek-chat.
  • OpenAI API Key – 키를 입력하세요.

Langflow OpenAI API Key Configured

Tip: Base URL을 수정하면 OpenAI와 호환되는 다른 서비스를 사용할 수 있습니다.

구성 후 워크플로를 저장하세요.

Step 4: Get Langflow API Information

Generate API Key

Langflow 오른쪽 상단 메뉴에서 Settings → API Keys 로 이동합니다:

Langflow API Keys Page

Create New Key 를 클릭하고 키를 생성한 뒤 복사합니다 (형식: sk-xxxxxxxxxxxxxxxxxxxxxxxx).

Langflow Create API Key Dialog

Langflow API Key Generated

Get Flow ID

플로우 편집기를 열면 URL에 플로우 ID가 포함됩니다:

http://localhost:7860/flow/{flow-id}

{flow-id} 값을 기록하세요.

Step 5: Configure Langflow in LangBot

LangBot 대시보드에서 Pipelines 로 이동한 뒤 ChatPipeline 을 편집합니다. AI 탭에서:

LangBot Pipeline AI Tab

  • RunnerLangflow API 로 설정합니다.

LangBot Runner Dropdown

  • Langflow 설정 필드를 입력합니다:

    • Base URLhttp://localhost:7860/api/v1/flow
    • API Key – 4단계에서 생성한 키.
    • Flow ID – 앞서 기록한 {flow-id}.

LangBot Langflow Config Form

파이프라인을 저장하세요. 이제 LangBot은 모든 설정된 플랫폼에서 들어오는 메시지를 Langflow 워크플로를 통해 라우팅하여, 여러 서비스에서 통합된 시각적 AI 챗봇을 제공합니다.

Back to Blog

관련 글

더 보기 »

모뎀의 복수

첫 번째 연결 1994년 겨울, 홍콩의 작은 아파트에서, 14세 소년이 US Robotics Sportster 14,400 Fax Modem을 연결했다.