KaibanJS
v0.10.0
KaibanJS は、チームの作業の整理と管理を支援することでよく知られている、実証済みのカンバン手法からインスピレーションを得ています。私たちは、 AI エージェント管理特有の課題に対処するために、これらの概念を適応させました。
Trello、Jira、ClickUp などのツールを使用したことがある場合は、カンバンがタスク管理にどのように役立つかに精通しているでしょう。現在、KaibanJS は同じシステムを使用して、AI エージェントとそのタスクをリアルタイムで管理できるようにしています。
KaibanJS を使用すると、次のことができます。
AI エージェント、タスク、ツール、チームを作成、視覚化、管理する
AI ワークフローをシームレスに調整する
ワークフローをリアルタイムで視覚化する
タスクがさまざまな段階に進むにつれて進捗状況を追跡する
AI プロジェクトでより効果的にコラボレーションする
Kaiban ボードを探索してください。これは Trello や Asana に似ていますが、AI エージェントと人間向けです。
1 分以内に KaibanJS を使い始めましょう。
1. プロジェクト ディレクトリで KaibanJS イニシャライザを実行します。
npx kaibanjs@最新初期化
2. AI サービス API キーを.envファイルに追加します。
VITE_OPENAI_API_KEY=your-api-key-here
3. Kaiban Board を再起動します。
npm run kaiban
「ワークフローの開始」をクリックしてデフォルトの例を実行します。
エージェントがタスク ボードでタスクをリアルタイムで完了するのを監視します。
「結果の概要」で最終出力を確認します。
KaibanJS は Kaiban Board に限定されません。これをプロジェクトに直接統合したり、カスタム UI を作成したり、UI なしでエージェントを実行したりできます。 React と Node.js の統合に関するチュートリアルを参照して、さまざまな開発コンテキストで KaibanJS の可能性を最大限に引き出してください。
KaibanJS を手動でセットアップする場合は、次の手順に従います。
npm インストール kaibanjs
// NextJS、React などに ES6 インポート構文を使用します。import { Agent, Task, Team } from 'kaibanjs'; // NodeJSconst に CommonJS 構文を使用する { Agent, Task, Team } = require('kaibanjs');// エージェントを定義しますconst ResearchAgent = new Agent({
名前: 「研究者」、
役割：「情報収集者」、
目標: '指定されたトピックに関する関連情報を見つける',});// タスクを作成しますconst ResearchTask = new Task({
説明: 「最近の AI 開発を研究する」、
エージェント: ResearchAgent,});// チームを設定するconstチーム = new Team({
名前：「AI研究チーム」、
エージェント: [リサーチエージェント]、
タスク: [リサーチタスク]、
env: { OPENAI_API_KEY: 'your-api-key-here' },});// ワークフローチームを開始します
。始める（）
.then((output) => {console.log('ワークフローが完了しました:', Output.result);
})
.catch((error) => {console.error('ワークフロー エラー:', エラー);
});エージェントエージェントは、特定の役割を実行し、割り当てられたタスクに基づいて目標を達成するように設計された自律的なエンティティです。これらは、最終的な答えに到達するまでループでタスクを実行できる超強力な LLM のようなものです。
タスクタスクは、各エージェントが実行する必要がある特定のアクションとその期待される出力を定義し、重要な出力が最終製品である場合は成果物としてマークします。
チームチームはエージェントとそのタスクを調整します。最初の入力から始まり、タスク間の情報の流れを管理します。
概念の詳細については、このビデオをご覧ください: KaibanJS Concepts
カンバン ボードは、チームのワークフローをリアルタイムで表示するための優れたツールであり、各メンバーの進捗状況の明確でインタラクティブなスナップショットを提供します。
この概念を AI エージェントに適用しました。
AI エージェントのワークフローをチーム メンバーとして視覚化し、目の前でタスクが「To Do」から「Done」に移行する様子を視覚化できるようになりました。この視覚的表現により、複雑な AI 操作の理解と管理が簡素化され、誰でもどこでもアクセスできるようになります。
プロジェクト内の個別の重要な機能で優れた能力を発揮するように AI エージェントを構成することで、専門化の力を活用します。このアプローチにより、各タスクの有効性と効率が向上し、汎用 AI の限界を超えます。
この例では、ソフトウェア開発チームは 3 人の専門 AI エージェント (Dave、Ella、Quinn) によって支えられています。各エージェントはその特定の役割に合わせて専門的に調整されており、効率的なタスク処理と開発サイクルを加速する相乗効果を保証します。
import { エージェント } from 'kaibanjs';const daveLoper = new Agent({
名前：「デイブ・ローパー」、
役割: '開発者'、
目標: 「コードを書いてレビューする」、
背景: 'JavaScript、React、Node.js の経験がある',});const ella = new Agent({
名前：「エラ」、
役割: 「プロダクトマネージャー」、
目標: 「製品ビジョンを定義し、ロードマップを管理する」、
背景: '市場分析と製品戦略に精通しています',});const quinn = new Agent({
名前：「クイン」、
役割: 「QA スペシャリスト」、
目標: 「品質と一貫性を確保する」、
背景: 'テスト、自動化、バグ追跡の専門家',});専門家が特定のツールを使用して業務で優れているのと同じように、AI エージェントが検索エンジンや計算機などのツールを利用して、特殊なタスクをより正確かつ効率的に実行できるようにします。
この例では、AI エージェントの 1 人である Peter Atlas が Tavily 検索結果ツールを活用して、旅行に最適な都市を選択する能力を強化しています。このツールを使用すると、ピーターは天気、価格、季節性を考慮して旅行データを分析し、最適な推奨事項を保証できます。
import { エージェント, ツール } from 'kaibanjs';const tavilySearchResults = new Tool({
名前: 'タヴィリーの検索結果',
最大結果: 1、
apiKey: 'ENV_TRAVILY_API_KEY',});const peterAtlas = new Agent({
名前：「ピーター・アトラス」、
役割: 「都市セレクター」、
目標: 「包括的な旅行データに基づいて最適な都市を選択する」、
背景: 「地理データ分析と旅行トレンドの経験」、
ツール: [tavilySearchResults],});KaibanJS は、すべての LangchainJS 互換ツールをサポートし、ツール統合への多用途なアプローチを提供します。詳細については、ドキュメントを参照してください。
プロジェクトのさまざまな側面で優れた性能を発揮するようにそれぞれ調整された、さまざまな特殊な AI モデルを統合することで、AI ソリューションを最適化します。
この例では、エージェント (エマ、ルーカス、ミア) は、さまざまな AI モデルを使用して、機能仕様開発の特定の段階を処理します。この AI モデルの的を絞った使用により、効率が最大化されるだけでなく、各タスクが最もコスト効率が高く適切な AI リソースと確実に連携するようになります。
import { エージェント } from 'kaibanjs';const emma = new Agent({
名前：「エマ」、
役割: 「初期製図」、
目標: 'コア機能の概要を説明する'、
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 エージェント、タスク、全体的なフローの状態を管理するための統合アプローチを可能にします。この方法により、複雑なエージェントの対話全体にわたって一貫した状態管理が保証され、明確さと制御が強化されます。
以下は、KaibanJS を React アプリケーションの状態管理と統合する方法を示す簡略化された例です。
import myAgentsTeam from './agenticTeam';const KaibanJSComponent = () => {
const useTeamStore = myAgentsTeam.useStore();
const { エージェント, workflowResult } = useTeamStore((state) => ({エージェント: 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) => ({tasks: state.tasks.map((task) => ({ id: task.id, description: task.description, status: 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(
(状態) => 状態.workflowLogs、
(newLogs,PreviousLogs) => {if (newLogs.length >PreviousLogs.length) { const { タスク、エージェント、メタデータ } = newLogs[newLogs.length - 1]; if (newLogs[newLogs.length - 1].logType === 'TaskStatusUpdate') {switch (task.status) { case TASK_STATUS_enum.DONE:console.log('Task Completed', { taskDescription: task.description, AgentName: Agent.name、agentModel:agent.llmConfig.model、期間:metadata.duration、llmUsageStats: metadata.llmUsageStats、costDetails:metadata.costDetails、});break; case TASK_STATUS_enum.DOING: case TASK_STATUS_enum.BLOCKED: case TASK_STATUS_enum.REVISE: case TASK_STATUS_enum.TODO:console.log('タスクステータス更新', { taskDescription: task.description, taskStatus: task.status, AgentName: エージェント.name,} ）;壊す; デフォルト:console.warn('予期しないタスクのステータスが発生しました:', task.status);break;} }}
});KaibanJS の可観測性機能を利用する方法の詳細については、ドキュメントを参照してください。
公式ドキュメント
Discordに参加してください
KaibanJS は、React、Vue、Angular、NextJS などの主要なフロントエンド フレームワークとの互換性を目指しており、開発者にとって汎用性の高い選択肢となります。 JavaScript エコシステムは「少し複雑です...」。何か問題がございましたら、お知らせください。問題の解決をお手伝いいたします。
世界中に約 2,000 万人の JavaScript 開発者がいますが、ほとんどの AI フレームワークはもともと Python で書かれています。その他は単なる JavaScript への適応です。
これにより、私たちJavaScript 開発者全員が AI 競争において不利な立場に置かれることになります。しかし、もうそうではありません...
KaibanJS は、JavaScript エコシステム専用に設計された堅牢で使いやすい AI マルチエージェント フレームワークを提供することを目的として、状況を一変させます。
const writeBy = `有意義な AI 作業を行うために Python を学習したくない別の JS 開発者。`;console.log(writeBy);
Discord コミュニティに参加して、他の開発者とつながり、サポートを受けてください。最新情報については Twitter をフォローしてください。
コミュニティからの貢献を歓迎します。プル リクエストを送信する前に、コントリビュート ガイドラインをお読みください。
KaibanJS は MIT ライセンスを取得しています。
