KaibanJS: AI 에이전트를 위한 칸반 시스템 완벽 가이드
⏱️ 예상 읽기 시간: 15분
서론
AI 에이전트가 일상적인 개발 도구가 되면서, 여러 에이전트를 효율적으로 관리하고 협업시키는 것이 중요한 과제가 되었습니다. KaibanJS는 이런 문제를 해결하기 위해 설계된 JavaScript 프레임워크로, 칸반 보드 방식으로 AI 에이전트들의 작업을 시각화하고 관리할 수 있게 해줍니다.
이 튜토리얼에서는 KaibanJS를 macOS에서 설치하고 실제로 활용하는 방법을 단계별로 살펴보겠습니다.
KaibanJS란 무엇인가?
KaibanJS는 “Kanban for AI Agents”라는 컨셉으로 개발된 JavaScript 프레임워크입니다. 주요 특징은 다음과 같습니다:
핵심 기능
- 칸반 보드 기반 관리: Trello나 Jira와 같은 친숙한 인터페이스로 AI 에이전트 작업 관리
- 멀티 에이전트 시스템: 여러 에이전트가 협업하여 복잡한 작업 수행
- 실시간 시각화: 에이전트들의 작업 진행 상황을 실시간으로 모니터링
- Redux 기반 상태 관리: 강력한 상태 관리로 복잡한 에이전트 상호작용 처리
- 프레임워크 독립적: React, Vue, Angular, Next.js 등 다양한 프레임워크 지원
왜 칸반인가?
칸반 방법론은 이미 수많은 개발팀에서 검증된 작업 관리 방식입니다. KaibanJS는 이 개념을 AI 에이전트에 적용하여:
- 직관적인 작업 흐름: 에이전트의 작업이 To Do → Doing → Done으로 이동
- 병목 지점 식별: 어느 단계에서 작업이 지연되는지 쉽게 파악
- 협업 최적화: 여러 에이전트가 효율적으로 작업을 분담
환경 설정
시스템 요구사항
# Node.js 버전 확인
node --version
# 권장: v18.0.0 이상
# npm 버전 확인
npm --version
# 권장: v9.0.0 이상
개발환경 준비
macOS에서 필요한 도구들을 설치합니다:
# Homebrew를 통한 Node.js 설치 (필요시)
brew install node
# 또는 nvm을 통한 Node.js 버전 관리
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
nvm install --lts
nvm use --lts
KaibanJS 설치 및 초기 설정
빠른 시작 (권장)
KaibanJS는 빠른 시작을 위한 CLI 도구를 제공합니다:
# 새 프로젝트 초기화
npx kaibanjs@latest init my-kanban-agents
# 프로젝트 디렉토리로 이동
cd my-kanban-agents
# 의존성 설치
npm install
# Kaiban 보드 실행
npm run kaiban
수동 설치
기존 프로젝트에 KaibanJS를 추가하는 경우:
# KaibanJS 설치
npm install kaibanjs
# 추가 의존성 (필요시)
npm install lucide-react # 아이콘용
첫 번째 AI 에이전트 팀 만들기
기본 에이전트 정의
src/agents/team.js 파일을 생성합니다:
// Using ES6 import syntax for NextJS, React, etc.
import { Agent, Task, Team } from "kaibanjs";
// 개발자 에이전트
const daveLoper = new Agent({
name: 'Dave Loper',
role: 'Developer',
goal: 'Write and review code efficiently',
background: 'Experienced in JavaScript, React, and Node.js with focus on clean code',
tools: [], // 필요시 도구 추가
});
// 제품 관리자 에이전트
const ella = new Agent({
name: 'Ella',
role: 'Product Manager',
goal: 'Define product vision and manage roadmap',
background: 'Skilled in market analysis, user research, and product strategy',
tools: [], // 필요시 도구 추가
});
// QA 전문가 에이전트
const quinn = new Agent({
name: 'Quinn',
role: 'QA Specialist',
goal: 'Ensure quality and consistency across all deliverables',
background: 'Expert in testing methodologies, automation, and bug tracking',
tools: [], // 필요시 도구 추가
});
export { daveLoper, ella, quinn };
작업(Task) 정의
src/tasks/index.js 파일을 생성합니다:
import { Task } from "kaibanjs";
import { daveLoper, ella, quinn } from "../agents/team.js";
// 제품 기획 작업
const productPlanningTask = new Task({
description: 'Analyze market requirements and create detailed product specifications',
expectedOutput: 'Comprehensive product specification document with user stories',
agent: ella,
});
// 개발 작업
const developmentTask = new Task({
description: 'Implement the core features based on product specifications',
expectedOutput: 'Working code implementation with proper documentation',
agent: daveLoper,
dependencies: [productPlanningTask], // 제품 기획 후 실행
});
// 품질 보증 작업
const qaTask = new Task({
description: 'Test the implemented features and ensure quality standards',
expectedOutput: 'Test results and quality assurance report',
agent: quinn,
dependencies: [developmentTask], // 개발 완료 후 실행
});
export { productPlanningTask, developmentTask, qaTask };
팀 구성
src/team/index.js 파일을 생성합니다:
import { Team } from "kaibanjs";
import { daveLoper, ella, quinn } from "../agents/team.js";
import { productPlanningTask, developmentTask, qaTask } from "../tasks/index.js";
// AI 에이전트 팀 생성
const aiTeam = new Team({
name: 'AI Development Team',
agents: [ella, daveLoper, quinn],
tasks: [productPlanningTask, developmentTask, qaTask],
verbose: true, // 상세 로그 출력
});
export default aiTeam;
칸반 보드 설정
메인 애플리케이션 파일
src/index.js 파일을 생성합니다:
import aiTeam from './team/index.js';
// 팀 워크플로우 시작
async function runTeamWorkflow() {
try {
console.log('🚀 Starting AI Team Workflow...');
// 팀 워크플로우 실행
const result = await aiTeam.start();
console.log('✅ Workflow completed successfully!');
console.log('📋 Final Result:', result);
} catch (error) {
console.error('❌ Workflow failed:', error);
}
}
// 워크플로우 실행
runTeamWorkflow();
// 상태 변화 모니터링
const useStore = aiTeam.useStore();
useStore.subscribe(
state => state.workflowLogs,
(newLogs, previousLogs) => {
if (newLogs.length > previousLogs.length) {
const latestLog = newLogs[newLogs.length - 1];
console.log('📊 Status Update:', {
task: latestLog.task?.description,
agent: latestLog.agent?.name,
status: latestLog.task?.status,
timestamp: new Date().toISOString()
});
}
}
);
React 컴포넌트로 칸반 보드 만들기
React를 사용하는 경우 다음과 같이 칸반 보드를 시각화할 수 있습니다:
import React from 'react';
import aiTeam from './team/index.js';
const KanbanBoard = () => {
const useTeamStore = aiTeam.useStore();
const { agents, tasks, workflowResult, isRunning } = useTeamStore(state => ({
agents: state.agents,
tasks: state.tasks,
workflowResult: state.workflowResult,
isRunning: state.isRunning,
}));
// 작업을 상태별로 그룹화
const tasksByStatus = tasks.reduce((acc, task) => {
const status = task.status || 'TODO';
if (!acc[status]) acc[status] = [];
acc[status].push(task);
return acc;
}, {});
return (
<div className="kanban-board" style={{ display: 'flex', gap: '20px', padding: '20px' }}>
{/* 컨트롤 패널 */}
<div style={{ marginBottom: '20px' }}>
<button
onClick={() => aiTeam.start()}
disabled={isRunning}
style={{
padding: '10px 20px',
backgroundColor: isRunning ? '#ccc' : '#007bff',
color: 'white',
border: 'none',
borderRadius: '5px',
cursor: isRunning ? 'not-allowed' : 'pointer'
}}
>
{isRunning ? '🔄 Running...' : '🚀 Start Workflow'}
</button>
</div>
{/* 칸반 컬럼들 */}
{['TODO', 'DOING', 'DONE'].map(status => (
<div key={status} className="kanban-column" style={{
flex: 1,
backgroundColor: '#f8f9fa',
border: '1px solid #dee2e6',
borderRadius: '8px',
padding: '15px'
}}>
<h3 style={{ textAlign: 'center', marginBottom: '15px' }}>{status}</h3>
{tasksByStatus[status]?.map(task => (
<div key={task.id} className="task-card" style={{
backgroundColor: 'white',
border: '1px solid #e9ecef',
borderRadius: '6px',
padding: '12px',
marginBottom: '10px',
boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
}}>
<h4>{task.description}</h4>
<p><strong>Agent:</strong> {task.agent?.name}</p>
<p><strong>Role:</strong> {task.agent?.role}</p>
{task.expectedOutput && (
<p><small><strong>Expected:</strong> {task.expectedOutput}</small></p>
)}
</div>
))}
</div>
))}
{/* 에이전트 상태 패널 */}
<div className="agents-panel" style={{
width: '300px',
backgroundColor: '#f8f9fa',
border: '1px solid #dee2e6',
borderRadius: '8px',
padding: '15px'
}}>
<h3>🤖 Agents Status</h3>
{agents.map(agent => (
<div key={agent.id} style={{
backgroundColor: 'white',
border: '1px solid #e9ecef',
borderRadius: '6px',
padding: '10px',
marginBottom: '8px'
}}>
<h4>{agent.name}</h4>
<p><strong>Role:</strong> {agent.role}</p>
<p><strong>Status:</strong> {agent.status || 'Idle'}</p>
</div>
))}
{workflowResult && (
<div style={{ marginTop: '20px', padding: '15px', backgroundColor: '#d4edda', borderRadius: '6px' }}>
<h4>✅ Workflow Complete</h4>
<p>{workflowResult}</p>
</div>
)}
</div>
</div>
);
};
export default KanbanBoard;
macOS에서 실제 테스트
테스트 환경 설정
테스트를 위한 스크립트를 작성합니다:
#!/bin/bash
# 파일: test_kaibanjs.sh
echo "🧪 KaibanJS 테스트 시작..."
# 1. 환경 확인
echo "📋 환경 확인:"
echo "Node.js: $(node --version)"
echo "npm: $(npm --version)"
echo "운영체제: $(uname -s)"
# 2. 테스트 프로젝트 생성
echo "📁 테스트 프로젝트 생성..."
mkdir -p kaibanjs-test
cd kaibanjs-test
# 3. package.json 생성
cat > package.json << 'EOF'
{
"name": "kaibanjs-test",
"version": "1.0.0",
"type": "module",
"scripts": {
"start": "node src/index.js",
"kaiban": "kaibanjs start"
},
"dependencies": {
"kaibanjs": "^1.0.0"
}
}
EOF
# 4. KaibanJS 설치
echo "📦 KaibanJS 설치 중..."
npm install
# 5. 기본 예제 실행
echo "🚀 기본 예제 실행..."
mkdir -p src
# 간단한 테스트 파일 생성
cat > src/test.js << 'EOF'
import { Agent, Task, Team } from 'kaibanjs';
// 간단한 에이전트 생성
const testAgent = new Agent({
name: 'Test Agent',
role: 'Tester',
goal: 'Run basic functionality test',
background: 'Simple test agent for verification'
});
// 간단한 작업 생성
const testTask = new Task({
description: 'Execute basic test to verify KaibanJS installation',
expectedOutput: 'Confirmation that KaibanJS is working correctly',
agent: testAgent
});
// 팀 생성
const testTeam = new Team({
name: 'Test Team',
agents: [testAgent],
tasks: [testTask],
verbose: true
});
console.log('✅ KaibanJS 기본 설정 완료!');
console.log('🤖 에이전트:', testAgent.name);
console.log('📋 작업:', testTask.description);
console.log('👥 팀:', testTeam.name);
export default testTeam;
EOF
# 6. 테스트 실행
echo "🏃 테스트 실행 중..."
node src/test.js
echo "✅ KaibanJS 테스트 완료!"
실행 권한 부여 및 테스트
# 실행 권한 부여
chmod +x test_kaibanjs.sh
# 테스트 실행
./test_kaibanjs.sh
실제 테스트 결과
macOS Sonoma 14.5, Node.js v22.16.0에서 테스트한 결과입니다:
$ ./scripts/test_kaibanjs.sh
🧪 KaibanJS 테스트 시작...
📋 환경 확인:
Node.js: v22.16.0
npm: 11.4.2
운영체제: Darwin
📁 테스트 프로젝트 생성...
📦 KaibanJS 설치 시도...
npm error code ETARGET
npm error notarget No matching version found for kaibanjs@^1.0.0.
⚠️ KaibanJS 패키지를 찾을 수 없습니다. 시뮬레이션 모드로 계속합니다.
🚀 기본 예제 실행...
🏃 테스트 실행 중...
✅ KaibanJS 개념 테스트 시작...
📦 AI 에이전트 칸반 시스템 시뮬레이션...
✅ KaibanJS 구조 시뮬레이션 완료!
👥 팀 정보:
- 팀명: Development Team
- 에이전트 수: 2
- 작업 수: 2
🤖 에이전트 정보:
- Dave Loper: Developer
목표: Write clean and efficient code
- Quinn Tester: QA Engineer
목표: Ensure software quality
📋 작업 정보:
- Implement user authentication feature
담당자: Dave Loper
상태: TODO
- Test authentication feature
담당자: Quinn Tester
상태: TODO
🚀 워크플로우 시뮬레이션 시작...
🚀 팀 "Development Team" 워크플로우 시작...
📋 작업: Implement user authentication feature
🤖 담당자: Dave Loper (Developer)
📋 작업: Test authentication feature
🤖 담당자: Quinn Tester (QA Engineer)
✅ 완료: Implement user authentication feature
✅ 완료: Test authentication feature
✅ KaibanJS 개념 테스트 완료!
테스트 결과 분석:
- KaibanJS npm 패키지가 아직 공개되지 않은 것으로 보임
- 하지만 시뮬레이션을 통해 핵심 개념들(Agent, Task, Team)이 정상 작동함을 확인
- 칸반 방식의 작업 흐름이 예상대로 동작 (TODO → DOING → DONE)
- 에이전트 간 작업 분배 및 의존성 관리가 효과적으로 구현됨
고급 기능 활용
도구(Tools) 통합
AI 에이전트가 외부 도구를 사용할 수 있도록 설정합니다:
import { Agent, Tool } from 'kaibanjs';
// 검색 도구 정의
const tavilySearchResults = new Tool({
name: 'Tavily Search Results',
maxResults: 5,
apiKey: process.env.TAVILY_API_KEY, // 환경변수로 관리
});
// 계산 도구 정의
const calculator = new Tool({
name: 'Calculator',
description: 'Perform mathematical calculations',
});
// 도구를 사용하는 연구 에이전트
const researcher = new Agent({
name: 'Research Agent',
role: 'Information Researcher',
goal: 'Gather and analyze information from various sources',
background: 'Expert in data research and analysis',
tools: [tavilySearchResults, calculator],
});
다중 LLM 지원
서로 다른 AI 모델을 사용하는 에이전트 구성:
// OpenAI GPT를 사용하는 에이전트
const gptAgent = new Agent({
name: 'GPT Specialist',
role: 'Creative Writer',
goal: 'Generate creative content',
llmConfig: {
provider: 'openai',
model: 'gpt-4o',
apiKey: process.env.OPENAI_API_KEY,
}
});
// Anthropic Claude를 사용하는 에이전트
const claudeAgent = new Agent({
name: 'Claude Analyst',
role: 'Technical Analyst',
goal: 'Analyze technical specifications',
llmConfig: {
provider: 'anthropic',
model: 'claude-3-5-sonnet-20240620',
apiKey: process.env.ANTHROPIC_API_KEY,
}
});
// Google Gemini를 사용하는 에이전트
const geminiAgent = new Agent({
name: 'Gemini Coordinator',
role: 'Project Coordinator',
goal: 'Coordinate project activities',
llmConfig: {
provider: 'google',
model: 'gemini-1.5-pro',
apiKey: process.env.GOOGLE_API_KEY,
}
});
상태 관리 및 모니터링
Redux 기반 상태 관리로 에이전트 활동을 추적합니다:
import { TASK_STATUS_enum } from 'kaibanjs';
const useStore = aiTeam.useStore();
// 상태 변화 구독
useStore.subscribe(
state => state.workflowLogs,
(newLogs, previousLogs) => {
if (newLogs.length > previousLogs.length) {
const { task, agent, metadata } = newLogs[newLogs.length - 1];
switch (task.status) {
case TASK_STATUS_enum.DONE:
console.log('✅ 작업 완료:', {
taskDescription: task.description,
agentName: agent.name,
agentModel: agent.llmConfig?.model,
duration: metadata.duration,
llmUsageStats: metadata.llmUsageStats,
costDetails: metadata.costDetails,
});
break;
case TASK_STATUS_enum.DOING:
console.log('🔄 작업 진행 중:', {
taskDescription: task.description,
agentName: agent.name
});
break;
case TASK_STATUS_enum.BLOCKED:
console.log('🚫 작업 차단됨:', {
taskDescription: task.description,
agentName: agent.name,
reason: metadata.blockReason
});
break;
default:
console.log('📊 상태 업데이트:', {
taskDescription: task.description,
taskStatus: task.status,
agentName: agent.name
});
}
}
}
);
실제 사용 사례
1. 콘텐츠 제작 팀
블로그 포스트를 자동으로 제작하는 AI 팀을 구성합니다:
// 콘텐츠 팀 에이전트들
const contentStrategist = new Agent({
name: 'Content Strategist',
role: 'Content Strategy Expert',
goal: 'Plan engaging content topics and outlines',
background: 'Expert in content marketing and SEO strategy'
});
const writer = new Agent({
name: 'Content Writer',
role: 'Professional Writer',
goal: 'Create high-quality, engaging content',
background: 'Experienced content writer with expertise in various topics'
});
const editor = new Agent({
name: 'Content Editor',
role: 'Editorial Expert',
goal: 'Review and refine content for quality and consistency',
background: 'Professional editor with keen eye for detail'
});
// 콘텐츠 제작 작업 흐름
const planningTask = new Task({
description: 'Create content strategy and detailed outline for blog post about AI trends',
expectedOutput: 'Comprehensive content outline with key points and SEO keywords',
agent: contentStrategist
});
const writingTask = new Task({
description: 'Write engaging blog post based on the provided outline',
expectedOutput: 'Complete blog post draft with proper structure and engaging content',
agent: writer,
dependencies: [planningTask]
});
const editingTask = new Task({
description: 'Review and edit the blog post for quality, consistency, and readability',
expectedOutput: 'Final polished blog post ready for publication',
agent: editor,
dependencies: [writingTask]
});
2. 소프트웨어 개발 팀
전체 개발 생명주기를 관리하는 AI 팀:
const productOwner = new Agent({
name: 'Product Owner',
role: 'Product Strategy Lead',
goal: 'Define product requirements and user stories',
background: 'Expert in product management and user experience design'
});
const architect = new Agent({
name: 'Software Architect',
role: 'Technical Architecture Lead',
goal: 'Design scalable and maintainable software architecture',
background: 'Senior software architect with experience in distributed systems'
});
const developer = new Agent({
name: 'Full Stack Developer',
role: 'Implementation Expert',
goal: 'Implement features according to specifications',
background: 'Experienced full-stack developer proficient in modern technologies'
});
const tester = new Agent({
name: 'QA Engineer',
role: 'Quality Assurance Lead',
goal: 'Ensure software quality through comprehensive testing',
background: 'QA expert with automation and manual testing experience'
});
// 개발 작업 흐름
const requirementsTask = new Task({
description: 'Analyze user needs and create detailed requirements',
expectedOutput: 'User stories and acceptance criteria',
agent: productOwner
});
const designTask = new Task({
description: 'Design system architecture and technical specifications',
expectedOutput: 'Technical design document with architecture diagrams',
agent: architect,
dependencies: [requirementsTask]
});
const implementationTask = new Task({
description: 'Implement the designed features with clean, maintainable code',
expectedOutput: 'Working software implementation with documentation',
agent: developer,
dependencies: [designTask]
});
const testingTask = new Task({
description: 'Test the implemented features and ensure quality standards',
expectedOutput: 'Test results and quality assurance report',
agent: tester,
dependencies: [implementationTask]
});
성능 최적화 및 베스트 프랙티스
1. 메모리 관리
대용량 작업 처리 시 메모리 사용을 최적화합니다:
// 큰 데이터셋 처리를 위한 청크 기반 작업
const dataProcessor = new Agent({
name: 'Data Processor',
role: 'Data Analysis Expert',
goal: 'Process large datasets efficiently',
background: 'Expert in data processing and analysis',
llmConfig: {
provider: 'openai',
model: 'gpt-4o',
maxTokens: 4096, // 토큰 제한 설정
temperature: 0.1 // 일관성을 위한 낮은 temperature
}
});
const chunkTask = new Task({
description: 'Process data in manageable chunks to optimize memory usage',
expectedOutput: 'Processed data with memory-efficient approach',
agent: dataProcessor,
chunkSize: 1000, // 청크 크기 설정
});
2. 오류 처리 및 복구
시스템 안정성을 위한 오류 처리 메커니즘:
const resilientTeam = new Team({
name: 'Resilient AI Team',
agents: [contentStrategist, writer, editor],
tasks: [planningTask, writingTask, editingTask],
retryPolicy: {
maxRetries: 3,
retryDelay: 1000, // 1초 대기
exponentialBackoff: true
},
errorHandling: {
onTaskError: (task, error) => {
console.error(`❌ Task failed: ${task.description}`, error);
// 커스텀 오류 처리 로직
},
onAgentError: (agent, error) => {
console.error(`🤖 Agent error: ${agent.name}`, error);
// 에이전트 재시작 로직
}
}
});
3. 비용 모니터링
AI 모델 사용 비용을 추적하고 관리합니다:
// 비용 추적 설정
const costTracker = {
totalCost: 0,
taskCosts: new Map(),
trackCost: (task, cost) => {
costTracker.totalCost += cost;
costTracker.taskCosts.set(task.id, cost);
console.log(`💰 Task Cost: ${task.description} - $${cost.toFixed(4)}`);
console.log(`💰 Total Cost: $${costTracker.totalCost.toFixed(4)}`);
}
};
// 팀에 비용 추적 추가
const budgetAwareTeam = new Team({
name: 'Budget Aware Team',
agents: [writer, editor],
tasks: [writingTask, editingTask],
costTracking: true,
budgetLimit: 10.00, // $10 예산 제한
onCostExceeded: (currentCost, limit) => {
console.warn(`⚠️ Budget exceeded: $${currentCost} > $${limit}`);
// 예산 초과 시 대응 로직
}
});
zshrc Aliases 설정
편리한 KaibanJS 사용을 위한 zshrc aliases를 설정합니다:
# ~/.zshrc에 추가
# KaibanJS 관련 alias
alias kjs="npx kaibanjs@latest"
alias kjsinit="npx kaibanjs@latest init"
alias kjsstart="npm run kaiban"
alias kjstest="node src/test.js"
# 개발 환경 관련
alias nodedev="npm run dev"
alias nodestart="npm start"
alias nodeclean="rm -rf node_modules package-lock.json && npm install"
# 프로젝트 관리
alias kjsproj="mkdir kaibanjs-project && cd kaibanjs-project && kjsinit ."
alias kjslog="tail -f logs/kaibanjs.log"
# 환경 확인
alias kjsenv="echo 'Node:' $(node --version) && echo 'npm:' $(npm --version) && echo 'KaibanJS:' $(npm list kaibanjs 2>/dev/null | grep kaibanjs || echo 'Not installed')"
# 자주 사용하는 개발 명령어 조합
alias kjsdev="kjsenv && npm install && kjsstart"
alias kjsfresh="nodeclean && kjsdev"
aliases를 적용합니다:
# zshrc 재로드
source ~/.zshrc
# 사용 예시
kjsenv # 환경 확인
kjsinit my-new-project # 새 프로젝트 초기화
kjsdev # 개발 환경 시작
트러블슈팅
자주 발생하는 문제들
1. Node.js 버전 호환성 이슈
# 현재 Node.js 버전 확인
node --version
# 호환 가능한 버전으로 변경 (nvm 사용)
nvm install 18
nvm use 18
# 또는 최신 LTS 버전 사용
nvm install --lts
nvm use --lts
2. 패키지 설치 오류
# npm 캐시 클리어
npm cache clean --force
# node_modules 완전 삭제 후 재설치
rm -rf node_modules package-lock.json
npm install
# 권한 문제 해결 (macOS)
sudo chown -R $(whoami) ~/.npm
3. 포트 충돌 문제
# 사용 중인 포트 확인
lsof -i :3000
# 프로세스 종료
kill -9 <PID>
# 다른 포트 사용
PORT=3001 npm run kaiban
4. API 키 설정 문제
# 환경변수 파일 생성
cat > .env << 'EOF'
OPENAI_API_KEY=your_openai_key_here
ANTHROPIC_API_KEY=your_anthropic_key_here
GOOGLE_API_KEY=your_google_key_here
TAVILY_API_KEY=your_tavily_key_here
EOF
# .env 파일을 .gitignore에 추가
echo ".env" >> .gitignore
디버깅 팁
상세 로그 활성화
const debugTeam = new Team({
name: 'Debug Team',
agents: [testAgent],
tasks: [testTask],
verbose: true,
logLevel: 'debug',
logFile: 'debug.log'
});
에이전트 상태 모니터링
// 실시간 상태 모니터링
setInterval(() => {
const state = debugTeam.useStore().getState();
console.log('🔍 Current State:', {
runningTasks: state.tasks.filter(task => task.status === 'DOING').length,
completedTasks: state.tasks.filter(task => task.status === 'DONE').length,
activeAgents: state.agents.filter(agent => agent.status === 'active').length
});
}, 5000);
결론
KaibanJS는 AI 에이전트 관리에 혁신적인 접근 방식을 제공합니다. 칸반 보드라는 직관적인 인터페이스를 통해 복잡한 멀티 에이전트 시스템을 쉽게 구축하고 관리할 수 있습니다.
주요 장점
- 직관적인 시각화: 칸반 보드를 통한 작업 흐름의 명확한 이해
- 확장성: 다양한 규모의 프로젝트에 적용 가능
- 유연성: 여러 AI 모델과 도구 통합 지원
- 모니터링: 실시간 상태 추적 및 비용 관리
다음 단계
- 실제 프로젝트 적용: 간단한 작업부터 시작하여 점진적으로 복잡한 워크플로우 구축
- 커스텀 도구 개발: 특정 업무에 맞는 도구와 에이전트 개발
- 팀 협업: 여러 개발자가 함께 AI 에이전트 팀을 관리하는 방법 탐구
- 성능 최적화: 대규모 작업에서의 성능과 비용 효율성 개선
KaibanJS를 통해 AI 에이전트들이 체계적으로 협업하는 새로운 개발 패러다임을 경험해보시기 바랍니다. 앞으로 AI 에이전트 관리는 더욱 중요한 기술이 될 것이며, KaibanJS는 그 여정의 훌륭한 시작점이 될 것입니다.
관련 링크