KaibanJS
v0.10.0
KaibanJS terinspirasi oleh metodologi Kanban yang teruji dan terkenal dapat membantu tim mengatur dan mengelola pekerjaan mereka. Kami telah mengadaptasi konsep ini untuk memenuhi tantangan unik manajemen agen AI .
Jika Anda pernah menggunakan alat seperti Trello, Jira, atau ClickUp, Anda pasti terbiasa dengan bagaimana Kanban membantu mengelola tugas. Sekarang, KaibanJS menggunakan sistem yang sama untuk membantu Anda mengelola agen AI dan tugasnya secara real time.
Dengan KaibanJS, Anda dapat:
Buat, visualisasikan, dan kelola agen, tugas, alat, dan tim AI
Atur alur kerja AI dengan lancar
Visualisasikan alur kerja secara real-time
Lacak kemajuan saat tugas melewati tahapan yang berbeda
Berkolaborasi secara lebih efektif dalam proyek AI
Jelajahi Kaiban Board — seperti Trello atau Asana, namun untuk Agen AI dan manusia.
Memulai KaibanJS dalam waktu kurang dari satu menit:
1. Jalankan penginisialisasi KaibanJS di direktori proyek Anda:
npx kaibanjs@init terbaru
2. Tambahkan kunci API layanan AI Anda ke file .env :
VITE_OPENAI_API_KEY=your-api-key-here
3. Mulai ulang Dewan Kaiban Anda:
npm jalankan kaiban
Klik "Mulai Alur Kerja" untuk menjalankan contoh default.
Saksikan agen menyelesaikan tugas secara real-time di Papan Tugas.
Lihat hasil akhir di Ikhtisar Hasil.
KaibanJS tidak terbatas pada Dewan Kaiban. Anda dapat mengintegrasikannya langsung ke proyek Anda, membuat UI khusus, atau menjalankan agen tanpa UI. Jelajahi tutorial kami tentang integrasi React dan Node.js untuk mengeluarkan potensi penuh KaibanJS dalam berbagai konteks pengembangan.
Jika Anda lebih suka mengatur KaibanJS secara manual, ikuti langkah-langkah berikut:
npm instal kaibanjs
// Menggunakan sintaks impor ES6 untuk NextJS, React, dll.import { Agen, Tugas, Tim } dari 'kaibanjs'; // Menggunakan sintaks CommonJS untuk NodeJSconst { Agen, Tugas, Tim } = require('kaibanjs'); // Definisikan agenconst ResearchAgent = Agen baru({
nama: 'Peneliti',
peran: 'Pengumpul Informasi',
tujuan: 'Menemukan informasi yang relevan tentang topik tertentu',});// Membuat taskconst ResearchTask = new Task({
deskripsi: 'Riset perkembangan AI terkini',
agen: agen penelitian,});// Menyiapkan tim teamconst = Tim baru({
nama: 'Tim Peneliti AI',
agen: [Agen Penelitian],
tugas: [Tugas penelitian],
env: { OPENAI_API_KEY: 'api-kunci-Anda-di sini' },});// Mulai tim alur kerja
.awal()
.then((output) => {console.log('Alur kerja selesai:', output.result);
})
.catch((error) => {console.error('Kesalahan alur kerja:', error);
});Agen Agen adalah entitas otonom yang dirancang untuk melakukan peran tertentu dan mencapai tujuan berdasarkan tugas yang diberikan kepadanya. Mereka seperti LLM berkekuatan super yang dapat menjalankan tugas dalam satu putaran hingga mereka mencapai jawaban akhir.
Tugas Tugas menentukan tindakan spesifik yang harus diambil setiap agen, keluaran yang diharapkan, dan menandai keluaran penting sebagai hasil akhir jika keluaran tersebut merupakan produk akhir.
Tim Tim mengoordinasikan agen dan tugas mereka. Ini dimulai dengan masukan awal dan mengatur aliran informasi antar tugas.
Tonton video ini untuk mempelajari lebih lanjut tentang konsep: Konsep KaibanJS
Papan Kanban adalah alat luar biasa untuk menampilkan alur kerja tim secara real-time, memberikan gambaran yang jelas dan interaktif tentang kemajuan setiap anggota.
Kami telah mengadaptasi konsep ini untuk agen AI.
Sekarang, Anda dapat memvisualisasikan alur kerja agen AI Anda sebagai anggota tim, dengan tugas berpindah dari "Yang Harus Dilakukan" ke "Selesai" tepat di depan mata Anda. Representasi visual ini menyederhanakan pemahaman dan pengelolaan operasi AI yang kompleks, sehingga dapat diakses oleh siapa saja, di mana saja.
Manfaatkan kekuatan spesialisasi dengan mengonfigurasi agen AI agar unggul dalam fungsi-fungsi penting dan berbeda dalam proyek Anda. Pendekatan ini meningkatkan efektivitas dan efisiensi setiap tugas, melampaui batasan AI umum.
Dalam contoh ini, tim pengembangan perangkat lunak kami didukung oleh tiga agen AI khusus: Dave, Ella, dan Quinn. Setiap agen secara ahli disesuaikan dengan peran spesifiknya, memastikan penanganan tugas yang efisien dan sinergi yang mempercepat siklus pengembangan.
import { Agen } dari 'kaibanjs';const daveLoper = Agen baru({
nama: 'Dave Loper',
peran: 'Pengembang',
tujuan: 'Menulis dan meninjau kode',
latar belakang: 'Berpengalaman dalam JavaScript, React, dan Node.js',});const ella = new Agent({
nama: 'Ella',
peran: 'Manajer Produk',
sasaran: 'Tentukan visi produk dan kelola peta jalan',
latar belakang: 'Ahli dalam analisis pasar dan strategi produk',});const quinn = Agen baru({
nama: 'Quinn',
peran: 'Spesialis QA',
tujuan: 'Memastikan kualitas dan konsistensi',
latar belakang: 'Ahli dalam pengujian, otomatisasi, dan pelacakan bug',});Sama seperti para profesional yang menggunakan alat khusus untuk unggul dalam tugas mereka, aktifkan agen AI Anda untuk menggunakan alat seperti mesin pencari, kalkulator, dan lainnya untuk melakukan tugas khusus dengan presisi dan efisiensi yang lebih tinggi.
Dalam contoh ini, salah satu agen AI, Peter Atlas, memanfaatkan alat Hasil Pencarian Tavily untuk meningkatkan kemampuannya dalam memilih kota terbaik untuk bepergian. Alat ini memungkinkan Peter menganalisis data perjalanan dengan mempertimbangkan cuaca, harga, dan musim, sehingga memastikan rekomendasi yang paling sesuai.
import { Agen, Alat } dari 'kaibanjs';const tavilySearchResults = Alat baru({
nama: 'Hasil Pencarian Tavily',
Hasil maksimal: 1,
apiKey: 'ENV_TRAVILY_API_KEY',});const peterAtlas = Agen baru({
nama: 'Peter Atlas',
peran: 'Pemilih Kota',
sasaran: 'Pilih kota terbaik berdasarkan data perjalanan komprehensif',
latar belakang: 'Berpengalaman dalam analisis data geografis dan tren perjalanan',
alat: [tavilySearchResults],});KaibanJS mendukung semua alat yang kompatibel dengan LangchainJS, menawarkan pendekatan serbaguna untuk integrasi alat. Untuk detail lebih lanjut, kunjungi dokumentasi.
Optimalkan solusi AI Anda dengan mengintegrasikan berbagai model AI khusus, masing-masing dirancang untuk unggul dalam berbagai aspek proyek Anda.
Dalam contoh ini, agen—Emma, Lucas, dan Mia—menggunakan beragam model AI untuk menangani tahapan tertentu dalam pengembangan spesifikasi fitur. Penggunaan model AI yang ditargetkan ini tidak hanya memaksimalkan efisiensi tetapi juga memastikan bahwa setiap tugas selaras dengan sumber daya AI yang paling hemat biaya dan sesuai.
import { Agen } dari 'kaibanjs';const emma = Agen baru({
nama: 'Emma',
peran: 'Draft Awal',
sasaran: 'Garis besarkan fungsi inti',
llmConfig: {penyedia: 'google',model: 'gemini-1.5-pro',
},});const lucas = Agen baru({
nama: 'Lucas',
peran: 'Spesifikasi Teknis',
tujuan: 'Draf spesifikasi teknis rinci',
llmConfig: {penyedia: 'antropis',model: 'claude-3-5-sonnet-20240620',
},});const mia = Agen baru({
nama: 'Mia',
peran: 'Ulasan Akhir',
tujuan: 'Memastikan keakuratan dan kelengkapan dokumen akhir',
llmConfig: {penyedia: 'openai',model: 'gpt-4o',
},});Untuk detail lebih lanjut tentang mengintegrasikan beragam model AI dengan KaibanJS, silakan kunjungi dokumentasi.
KaibanJS menggunakan arsitektur yang terinspirasi Redux, memungkinkan pendekatan terpadu untuk mengelola status agen AI, tugas, dan keseluruhan aliran dalam aplikasi Anda. Metode ini memastikan pengelolaan status yang konsisten di seluruh interaksi agen yang kompleks, memberikan kejelasan dan kontrol yang lebih baik.
Berikut adalah contoh sederhana yang menunjukkan cara mengintegrasikan KaibanJS dengan manajemen negara dalam aplikasi React:
impor myAgentsTeam dari './agenticTeam';const KaibanJSComponent = () => {
const useTeamStore = myAgentsTeam.useStore();
const { agen, workflowResult } = useTeamStore((state) => ({agen: state.agents,workflowResult: state.workflowResult,
}));
return (<div> <button onClick={myAgentsTeam.start}>Mulai Alur Kerja Tim</button> <p>Hasil Alur Kerja: {workflowResult}</p> <div><h2>♂️ Agen</h2>{agents .map((agent) => ( <p key={agent.id}>{agent.name} - {agent.role} - Status: ({agen.status}) </p>))} </div></div>
);};ekspor KaibanJSComponent bawaan;Untuk mempelajari lebih dalam tentang manajemen negara dengan KaibanJS, kunjungi dokumentasinya.
Tambahkan kemampuan AI dengan mudah ke proyek NextJS, React, Vue, Angular, dan Node.js Anda.
KaibanJS dirancang untuk integrasi tanpa batas di beragam lingkungan JavaScript. Baik Anda menyempurnakan antarmuka pengguna di React, Vue, atau Angular, membangun aplikasi yang dapat diskalakan dengan NextJS, atau mengimplementasikan solusi sisi server di Node.js, kerangka kerja ini terintegrasi dengan lancar ke dalam alur kerja Anda yang sudah ada.
impor Bereaksi dari 'reaksi';impor myAgentsTeam dari './agenticTeam';const TaskStatusComponent = () => {
const useTeamStore = myAgentsTeam.useStore();
const { tugas } = useTeamStore((state) => ({tugas: state.tasks.map((tugas) => ({ id: task.id, deskripsi: tugas.deskripsi, status: tugas.status,})) ,
}));
return (<div> <h1>Status Tugas</h1> <ul>{tasks.map((task) => ( <li key={task.id}>{task.description}: Status - {task.status } </li>))} </ul></div>
);};ekspor TaskStatusComponent bawaan;Untuk menyelami lebih dalam, kunjungi dokumentasi.
Dibangun di KaibanJS, fitur observasi memungkinkan Anda melacak setiap perubahan status dengan statistik dan log terperinci, memastikan transparansi dan kontrol penuh. Fungsionalitas ini memberikan wawasan real-time mengenai penggunaan token, biaya operasional, dan perubahan status, meningkatkan keandalan sistem dan memungkinkan pengambilan keputusan melalui visibilitas data yang komprehensif.
Cuplikan kode berikut menunjukkan bagaimana pendekatan manajemen status digunakan untuk memantau dan bereaksi terhadap perubahan dalam log alur kerja, memberikan kontrol terperinci dan wawasan mendalam tentang dinamika operasional agen AI Anda:
const useStore = myAgentsTeam.useStore();useStore.subscribe(
(negara bagian) => status.workflowLogs,
(newLogs, previousLogs) => {if (newLogs.length > previousLogs.length) { const { tugas, agen, metadata } = newLogs[newLogs.length - 1]; if (newLogs[newLogs.length - 1].logType === 'TaskStatusUpdate') {switch (task.status) { case TASK_STATUS_enum.DONE:console.log('Tugas Selesai', { taskDescription: task.description, agentName: nama agen, model agen: agen.llmConfig.model, durasi: metadata.durasi, 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('Pembaruan Status Tugas', { taskDescription: task.description, taskStatus: task.status, agentName: agent.name,} );merusak; default:console.warn('Mengalami status tugas yang tidak terduga:', task.status);break;} }}
});Untuk detail lebih lanjut tentang cara memanfaatkan fitur observabilitas di KaibanJS, silakan kunjungi dokumentasi.
Dokumentasi Resmi
Bergabunglah dengan Perselisihan Kami
KaibanJS bertujuan agar kompatibel dengan kerangka kerja front-end utama seperti React, Vue, Angular, dan NextJS, menjadikannya pilihan serbaguna bagi pengembang. Ekosistem JavaScript "agak rumit...". Jika Anda memiliki masalah, beri tahu kami dan kami akan membantu Anda memperbaikinya.
Ada sekitar 20 juta pengembang JavaScript di seluruh dunia, namun sebagian besar kerangka AI aslinya ditulis dengan Python. Lainnya hanyalah adaptasi untuk JavaScript.
Hal ini menempatkan kita semua , para pengembang JavaScript, pada posisi yang dirugikan dalam perlombaan AI . Tapi sekarang tidak lagi...
KaibanJS mengubah keadaan dengan menawarkan kerangka kerja multi-agen AI yang kuat dan mudah digunakan yang dirancang khusus untuk ekosistem JavaScript.
const writeBy = `Pengembang JS Lain yang Tidak Ingin Belajar Python untuk melakukan Hal AI yang berarti.`;console.log(writeBy);
Bergabunglah dengan komunitas Discord untuk terhubung dengan pengembang lain dan mendapatkan dukungan. Ikuti kami di Twitter untuk pembaruan terkini.
Kami menyambut kontribusi dari komunitas. Harap baca pedoman berkontribusi sebelum mengirimkan permintaan penarikan.
KaibanJS berlisensi MIT.
