KaibanJS
v0.10.0
KaibanJS는 팀이 작업을 구성하고 관리하는 데 도움이 되는 것으로 잘 알려진 검증된 Kanban 방법론에서 영감을 받았습니다. 우리는 AI 에이전트 관리의 고유한 과제를 해결하기 위해 이러한 개념을 적용했습니다.
Trello, Jira 또는 ClickUp과 같은 도구를 사용해 본 적이 있다면 Kanban이 작업 관리에 어떻게 도움이 되는지 잘 알고 계실 것입니다. 이제 KaibanJS는 동일한 시스템을 사용하여 AI 에이전트와 해당 작업을 실시간으로 관리하는 데 도움을 줍니다.
KaibanJS를 사용하면 다음을 수행할 수 있습니다.
AI 에이전트, 작업, 도구 및 팀 생성, 시각화 및 관리
AI 워크플로우를 원활하게 조율
실시간으로 워크플로우 시각화
작업이 여러 단계를 거치면서 진행 상황을 추적합니다.
AI 프로젝트에서 더욱 효과적으로 협업하세요
Kaiban Board를 살펴보세요. Trello나 Asana와 비슷하지만 AI 에이전트와 인간을 위한 것입니다.
1분 안에 KaibanJS를 시작해보세요:
1. 프로젝트 디렉터리에서 KaibanJS 이니셜라이저를 실행합니다.
npx kaibanjs@latest init
2. AI 서비스 API 키를 .env 파일에 추가합니다.
VITE_OPENAI_API_KEY=your-api-key-here
3. Kaiban 보드를 다시 시작합니다.
npm 실행 카이반
기본 예제를 실행하려면 "워크플로 시작"을 클릭하세요.
작업 보드에서 상담원이 실시간으로 작업을 완료하는 모습을 지켜보세요.
결과 개요에서 최종 출력을 봅니다.
KaibanJS는 Kaiban 보드에만 국한되지 않습니다. 이를 프로젝트에 직접 통합하거나, 사용자 정의 UI를 생성하거나, UI 없이 에이전트를 실행할 수 있습니다. 다양한 개발 상황에서 KaibanJS의 잠재력을 최대한 활용하려면 React 및 Node.js 통합에 대한 튜토리얼을 살펴보세요.
KaibanJS를 수동으로 설정하려면 다음 단계를 따르세요.
npm kaibanjs 설치
// NextJS, React 등에 대한 ES6 가져오기 구문 사용.import { Agent, Task, Team } from 'kaibanjs'; // NodeJSconst { Agent, Task, Team }에 CommonJS 구문 사용 = require('kaibanjs'); // 에이전트 정의const ResearchAgent = new Agent({
이름: '연구원',
역할: '정보 수집가',
goal: '주어진 주제에 대한 관련 정보 찾기',});// 작업 만들기const ResearchTask = new Task({
설명: '최근 AI 개발 연구',
에이전트: ResearchAgent,});// 팀 설정const 팀 = new Team({
이름: 'AI 연구팀',
에이전트: [researchAgent],
작업: [researchTask],
env: { OPENAI_API_KEY: 'your-api-key-here' },});// 워크플로팀 시작
.시작()
.then((output) => {console.log('작업 흐름 완료:', output.result);
})
.catch((error) => {console.error('작업 흐름 오류:', error);
});에이전트 에이전트는 특정 역할을 수행하고 할당된 작업에 따라 목표를 달성하도록 설계된 자율적 엔터티입니다. 이는 최종 답변에 도달할 때까지 루프에서 작업을 실행할 수 있는 강력한 LLM과 같습니다.
작업 작업은 각 에이전트가 수행해야 하는 특정 작업과 예상 출력을 정의하고 중요한 출력이 최종 제품인 경우 결과물로 표시합니다.
팀 팀은 상담원과 해당 작업을 조정합니다. 초기 입력으로 시작하여 작업 간의 정보 흐름을 관리합니다.
개념에 대해 자세히 알아보려면 다음 비디오를 시청하세요. KaibanJS 개념
Kanban 보드는 팀 워크플로를 실시간으로 보여주는 훌륭한 도구로, 각 구성원의 진행 상황에 대한 명확하고 대화형 스냅샷을 제공합니다.
우리는 AI 에이전트에 이 개념을 적용했습니다.
이제 팀 구성원으로서 AI 에이전트의 워크플로를 시각화할 수 있으며 작업이 "할 일"에서 "완료"로 바로 눈앞에서 이동합니다. 이 시각적 표현은 복잡한 AI 작업의 이해와 관리를 단순화하여 누구나 언제 어디서나 액세스할 수 있도록 해줍니다.
프로젝트 내에서 뚜렷하고 중요한 기능을 탁월하게 수행하도록 AI 에이전트를 구성하여 전문화의 힘을 활용하세요. 이 접근 방식은 일반 AI의 한계를 뛰어넘어 각 작업의 효과성과 효율성을 향상시킵니다.
이 예에서 우리 소프트웨어 개발 팀은 Dave, Ella 및 Quinn이라는 세 가지 전문 AI 에이전트로 구동됩니다. 각 에이전트는 특정 역할에 맞게 전문적으로 맞춤화되어 효율적인 작업 처리와 개발 주기를 가속화하는 시너지 효과를 보장합니다.
import { 에이전트 } from 'kaibanjs';const daveLoper = 새 에이전트({
이름: '데이브 로퍼',
역할: '개발자',
목표: '코드 작성 및 검토',
background: 'JavaScript, React, Node.js 경험자',});const ella = new Agent({
이름: '엘라',
역할: '제품 관리자',
목표: '제품 비전 정의 및 로드맵 관리',
background: '시장 분석 및 제품 전략에 능숙함',});const quinn = new Agent({
이름: '퀸',
역할: 'QA 전문가',
목표: '품질과 일관성 보장',
background: '테스트, 자동화 및 버그 추적 전문가',});전문가가 자신의 작업을 탁월하게 수행하기 위해 특정 도구를 사용하는 것처럼 AI 에이전트도 검색 엔진, 계산기 등과 같은 도구를 활용하여 더 정확하고 효율적으로 전문적인 작업을 수행할 수 있습니다.
이 예에서 AI 에이전트 중 한 명인 Peter Atlas는 Tavily 검색 결과 도구를 활용하여 여행에 가장 적합한 도시를 선택하는 능력을 향상시킵니다. 이 도구를 사용하면 Peter는 날씨, 가격, 계절성을 고려하여 여행 데이터를 분석하여 가장 적합한 추천을 보장할 수 있습니다.
import { Agent, Tool } from 'kaibanjs';const tavilySearchResults = new Tool({
name: '타빌리 검색결과',
최대결과: 1,
apiKey: 'ENV_TRAVILY_API_KEY',});const peterAtlas = 새 에이전트({
이름: '피터 아틀라스',
역할: '도시 선택자',
목표: '종합적인 여행 데이터를 기반으로 최고의 도시를 선택',
배경: '지리적 데이터 분석 및 여행 트렌드 경험',
도구: [tavilySearchResults],});KaibanJS는 모든 LangchainJS 호환 도구를 지원하여 도구 통합에 대한 다양한 접근 방식을 제공합니다. 자세한 내용은 설명서를 참조하세요.
프로젝트의 고유한 측면에서 탁월한 성능을 발휘하도록 맞춤화된 다양한 전문 AI 모델을 통합하여 AI 솔루션을 최적화하세요.
이 예에서 에이전트(Emma, Lucas, Mia)는 다양한 AI 모델을 사용하여 기능 사양 개발의 특정 단계를 처리합니다. AI 모델의 이러한 타겟 사용은 효율성을 극대화할 뿐만 아니라 각 작업이 가장 비용 효율적이고 적절한 AI 리소스에 맞춰 조정되도록 보장합니다.
import { 에이전트 } from 'kaibanjs';const emma = 새 에이전트({
이름: '엠마',
역할: '초기 제도',
목표: '핵심 기능 개요',
llmConfig: {공급자: 'google',모델: 'gemini-1.5-pro',
},});const lucas = 새 에이전트({
이름: '루카스',
역할: '기술 사양',
목표: '상세 기술 사양 초안',
llmConfig: {공급자: 'anthropic',모델: 'claude-3-5-sonnet-20240620',
},});const mia = 새 에이전트({
이름: '미아',
역할: '최종 검토',
목표: '최종 문서의 정확성과 완전성 보장',
llmConfig: {공급자: 'openai',모델: 'gpt-4o',
},});다양한 AI 모델을 KaibanJS와 통합하는 방법에 대한 자세한 내용은 설명서를 참조하세요.
KaibanJS는 Redux에서 영감을 받은 아키텍처를 사용하여 AI 에이전트 상태, 작업 및 애플리케이션 내 전체 흐름을 관리하는 통합 접근 방식을 지원합니다. 이 방법은 복잡한 에이전트 상호 작용 전반에 걸쳐 일관된 상태 관리를 보장하여 향상된 명확성과 제어 기능을 제공합니다.
다음은 React 애플리케이션에서 KaibanJS를 상태 관리와 통합하는 방법을 보여주는 간단한 예입니다.
import myAgentsTeam from './agenticTeam';const KaibanJSComponent = () => {
const useTeamStore = myAgentsTeam.useStore();
const { 에이전트, WorkflowResult } = useTeamStore((state) => ({agents: state.agents,workflowResult: state.workflowResult,
}));
return (<div> <button onClick={myAgentsTeam.start}>팀 워크플로 시작</button> <p>워크플로 결과: {workflowResult}</p> <div><h2>♂️ 에이전트</h2>{agents .map((agent) => ( <p key={agent.id}>{agent.name} - {agent.role} - 상태: ({agent.status}) </p>))} </div></div>
);};기본 KaibanJSComponent 내보내기;KaibanJS를 사용한 상태 관리에 대해 더 자세히 알아보려면 설명서를 방문하세요.
NextJS, React, Vue, Angular 및 Node.js 프로젝트에 AI 기능을 쉽게 추가하세요.
KaibanJS는 다양한 JavaScript 환경에서 원활한 통합을 위해 설계되었습니다. React, Vue 또는 Angular에서 사용자 인터페이스를 강화하든, NextJS로 확장 가능한 애플리케이션을 구축하든, Node.js에서 서버 측 솔루션을 구현하든 프레임워크는 기존 워크플로에 원활하게 통합됩니다.
import React from 'react'; import myAgentsTeam from './agenticTeam';const TaskStatusComponent = () => {
const useTeamStore = myAgentsTeam.useStore();
const { 작업 } = useTeamStore((state) => ({작업: state.tasks.map((task) => ({ id: task.id, 설명: task.description, 상태: task.status,})) ,
}));
return (<div> <h1>작업 상태</h1> <ul>{tasks.map((task) => ( <li key={task.id}>{task.description}: 상태 - {task.status } </li>))} </ul></div>
);};기본 TaskStatusComponent 내보내기;더 자세히 알아보려면 설명서를 참조하세요.
KaibanJS에 내장된 관찰 기능을 사용하면 자세한 통계 및 로그를 통해 모든 상태 변경을 추적하여 완전한 투명성과 제어를 보장할 수 있습니다. 이 기능은 토큰 사용량, 운영 비용 및 상태 변경에 대한 실시간 통찰력을 제공하여 시스템 신뢰성을 향상시키고 포괄적인 데이터 가시성을 통해 정보에 입각한 의사 결정을 가능하게 합니다.
다음 코드 조각은 워크플로 로그의 변경 사항을 모니터링하고 대응하기 위해 상태 관리 접근 방식을 활용하여 AI 에이전트의 운영 역학에 대한 세부적인 제어와 심층적인 통찰력을 제공하는 방법을 보여줍니다.
const useStore = myAgentsTeam.useStore();useStore.subscribe(
(상태) => state.workflowLogs,
(newLogs, 이전Logs) => {if (newLogs.length > 이전Logs.length) { const { 작업, 에이전트, 메타데이터 } = newLogs[newLogs.length - 1]; if (newLogs[newLogs.length - 1].logType === 'TaskStatusUpdate') {switch (task.status) { case TASK_STATUS_enum.DONE:console.log('작업 완료', { taskDescription: task.description, 에이전트 이름: 에이전트.이름, 에이전트모델: 에이전트.llmConfig.model, 기간: 메타데이터.기간, llmUsageStats: 메타데이터.llmUsageStats, costDetails: 메타데이터.costDetails,});break; 케이스 TASK_STATUS_enum.DOING: 케이스 TASK_STATUS_enum.BLOCKED: 케이스 TASK_STATUS_enum.REVISE: 케이스 TASK_STATUS_enum.TODO:console.log('작업 상태 업데이트', { taskDescription: task.description, taskStatus: task.status, 에이전트 이름: 에이전트.이름,} );부서지다; default:console.warn('예기치 않은 작업 상태가 발생했습니다:', task.status);break;} }}
});KaibanJS의 관찰 기능을 활용하는 방법에 대한 자세한 내용은 설명서를 참조하세요.
공식 문서
우리의 불화에 동참하세요
KaibanJS는 React, Vue, Angular 및 NextJS와 같은 주요 프런트엔드 프레임워크와 호환되는 것을 목표로 하여 개발자에게 다양한 선택을 제공합니다. JavaScript 생태계는 "조금 복잡합니다...". 문제가 있는 경우 알려주시면 문제를 해결하는 데 도움을 드리겠습니다.
전 세계적으로 약 2천만 명의 JavaScript 개발자가 있지만 대부분의 AI 프레임워크는 원래 Python으로 작성되었습니다. 다른 것들은 JavaScript에 대한 단순한 적응입니다.
이는 우리 JavaScript 개발자 모두를 AI 경쟁에서 불리한 위치에 놓이게 합니다. 하지만 더 이상은 아닙니다...
KaibanJS는 JavaScript 생태계를 위해 특별히 설계된 강력하고 사용하기 쉬운 AI 다중 에이전트 프레임워크 제공을 목표로 하여 게임의 판도를 변화시킵니다.
const writeBy = `의미 있는 AI 작업을 수행하기 위해 Python을 배우고 싶지 않은 또 다른 JS 개발자.`;console.log(writeBy);
Discord 커뮤니티에 가입하여 다른 개발자와 소통하고 지원을 받으세요. 최신 업데이트를 보려면 Twitter에서 팔로우하세요.
우리는 커뮤니티의 기여를 환영합니다. 풀 요청을 제출하기 전에 기여 지침을 읽어보세요.
KaibanJS는 MIT 라이선스를 받았습니다.
