Dify 와 LangGraph API 를 Teams 에 통합하는 유스케이스
- 이미지 업로드 / 비전
- Dify 이미지 생성
- LangGraph 이미지 생성
graph LR
A[유저의 채팅] --> B[Teams Bot 프로그램]
B -->|Dify API 요청| C[Dify]
C -->|응답 결과| B
B -->|유저에게 답변| A
필수 조건
로컬 개발 환경에서 이 템플릿을 실행하려면 다음이 필요합니다:
- Node.js, 지원 버전: 18, 20, 22
- Teams Toolkit Visual Studio Code 확장 버전 5.0.0 이상 또는 Teams Toolkit CLI (Cursor / WindSurf 가능)
Clone 혹은 Use this Template 을 통해 해당 레포지토리를 받아주세요.
git clone
cd dify-langgraph-teams-bot루트 디렉토리의 .localConfigs.example 을 복사해서 .localConfigs 파일로 만들어주세요.
# Config 가능한 값들
DIFY_API_KEY=app-XXXXXXXXXXXXXXXXXXXX
DIFY_ENDPOINT=https://api.dify.ai/v1
LANGGRAPH_API_KEY=
LANGGRAPH_ENDPOINT=http://localhost:2024
LANGGRAPH_ASSISTANT_ID=agent
Teams Toolkit CLI를 사용한 로컬 디버깅을 위해서는 Teams Toolkit CLI 로컬 디버깅 설정에 설명된 추가 단계가 필요합니다.
- 먼저 VS Code 툴바 왼쪽의 Teams Toolkit 아이콘을 선택합니다.
- F5를 눌러 팝업창이 뜨면
Debug in Teams를 선택하세요. 본인의 디버깅 환경에 맞게 Chrome, Edge, Desktop 중 선택 가능합니다. - 브라우저(또는 데스크탑앱)가 팝업되어 Teams App 이 열립니다.
- 봇으로부터 환영 메시지를 받게 되며, 봇에 메시지를 보내면 응답을 받을 수 있습니다.
축하합니다! 이제 Teams App 에서 사용자와 상호작용할 수 있는 애플리케이션이 실행 중입니다:
루트 디렉토리의 index.tx 최하단을 확인해주세요.
langgraphBot 을 주석 해제하고, difyBot 을 주석처리 해주세요.
| 폴더 | 내용 |
|---|---|
.vscode |
디버깅을 위한 VSCode 파일 |
appPackage |
Teams 애플리케이션 매니페스트 템플릿 |
env |
환경 설정 파일 |
infra |
Azure 리소스 프로비저닝을 위한 템플릿 |
다음 파일들은 커스터마이징이 가능하며 시작하기 위한 예제 구현을 보여줍니다.
| 파일 | 내용 |
|---|---|
difyBot.ts |
Dify 연동을 위한 봇 입니다. |
langgraphBot.ts |
LangGraph 연동을 위한 봇 입니다. |
index.ts |
index.ts는 기본 봇을 설정하고 구성하는 데 사용됩니다. |
다음은 Teams Toolkit 특정 프로젝트 파일입니다. Teams Toolkit의 작동 방식을 이해하려면 Github의 완전한 가이드를 방문하세요.
| 파일 | 내용 |
|---|---|
teamsapp.yml |
이는 주요 Teams Toolkit 프로젝트 파일입니다. 프로젝트 파일은 두 가지 주요 사항을 정의합니다: 속성과 구성 단계 정의. |
teamsapp.local.yml |
이는 teamsapp.yml을 로컬 실행 및 디버깅을 가능하게 하는 작업으로 재정의합니다. |
teamsapp.testtool.yml |
이는 teamsapp.yml을 Teams App Test Tool에서 로컬 실행 및 디버깅을 가능하게 하는 작업으로 재정의합니다. |
다음 문서들은 기본 템플릿을 확장하는 데 도움이 될 것입니다.