KaibanJS
v0.10.0
KaibanJS s'inspire de la méthodologie Kanban éprouvée, bien connue pour aider les équipes à organiser et à gérer leur travail. Nous avons adapté ces concepts pour répondre aux défis uniques de la gestion des agents IA .
Si vous avez utilisé des outils comme Trello, Jira ou ClickUp, vous saurez comment Kanban aide à gérer les tâches. Désormais, KaibanJS utilise ce même système pour vous aider à gérer les agents IA et leurs tâches en temps réel.
Avec KaibanJS, vous pouvez :
Créez, visualisez et gérez des agents, des tâches, des outils et des équipes d'IA
Orchestrez les flux de travail d’IA de manière transparente
Visualisez les flux de travail en temps réel
Suivez la progression à mesure que les tâches passent par différentes étapes
Collaborez plus efficacement sur des projets d’IA
Explorez le tableau Kaiban : c'est comme Trello ou Asana, mais pour les agents IA et les humains.
Démarrez avec KaibanJS en moins d'une minute :
1. Exécutez l'initialiseur KaibanJS dans le répertoire de votre projet :
npx kaibanjs@dernier init
2. Ajoutez la clé API de votre service AI au fichier .env :
VITE_OPENAI_API_KEY=your-api-key-here
3. Redémarrez votre tableau Kaiban :
npm exécuter kaiban
Cliquez sur "Démarrer le workflow" pour exécuter l'exemple par défaut.
Regardez les agents effectuer des tâches en temps réel sur le tableau des tâches.
Affichez le résultat final dans l’aperçu des résultats.
KaibanJS ne se limite pas au Kaiban Board. Vous pouvez l'intégrer directement dans vos projets, créer des interfaces utilisateur personnalisées ou exécuter des agents sans interface utilisateur. Explorez nos tutoriels d'intégration de React et Node.js pour libérer tout le potentiel de KaibanJS dans divers contextes de développement.
Si vous préférez configurer KaibanJS manuellement, suivez ces étapes :
npm installer kaibanjs
// Utilisation de la syntaxe d'importation ES6 pour NextJS, React, etc.import { Agent, Task, Team } from 'kaibanjs' ; // Utilisation de la syntaxe CommonJS pour NodeJSconst { Agent, Tâche, Équipe } = require('kaibanjs'); // Définir un agentconst searchAgent = new Agent({
nom : 'Chercheur',
rôle : « Collecteur d'informations »,
goal : 'Trouver des informations pertinentes sur un sujet donné',});// Créer une tâcheconst searchTask = new Task({
description : 'Rechercher les développements récents de l'IA',
agent: searchAgent,});// Mettre en place une équipe teamconst = new Team({
nom : « Équipe de recherche sur l'IA »,
agents : [researchAgent],
tâches : [researchTask],
env : { OPENAI_API_KEY : 'your-api-key-here' },});// Démarrez l'équipe de workflow
.commencer()
.then((output) => {console.log('Workflow terminé :', output.result);
})
.catch((erreur) => {console.error('Erreur de workflow :', erreur);
});Agents Les agents sont des entités autonomes conçues pour remplir des rôles spécifiques et atteindre des objectifs en fonction des tâches qui leur sont assignées. Ils sont comme des LLM surpuissants qui peuvent exécuter des tâches en boucle jusqu'à ce qu'ils arrivent à la réponse finale.
Tâches Les tâches définissent les actions spécifiques que chaque agent doit entreprendre, leurs résultats attendus et marquent les résultats critiques comme livrables s'il s'agit des produits finaux.
Equipe L'équipe coordonne les agents et leurs tâches. Il commence par une saisie initiale et gère le flux d'informations entre les tâches.
Regardez cette vidéo pour en savoir plus sur les concepts : KaibanJS Concepts
Les tableaux Kanban sont d'excellents outils pour présenter les flux de travail d'équipe en temps réel, fournissant un aperçu clair et interactif des progrès de chaque membre.
Nous avons adapté ce concept pour les agents IA.
Désormais, vous pouvez visualiser le flux de travail de vos agents IA en tant que membres de l'équipe, avec des tâches passant de « À faire » à « Terminé » juste sous vos yeux. Cette représentation visuelle simplifie la compréhension et la gestion des opérations complexes d’IA, la rendant accessible à tous, n’importe où.
Exploitez la puissance de la spécialisation en configurant les agents IA pour exceller dans des fonctions distinctes et critiques au sein de vos projets. Cette approche améliore l’efficacité et l’efficience de chaque tâche, dépassant les limites de l’IA générique.
Dans cet exemple, notre équipe de développement logiciel est alimentée par trois agents IA spécialisés : Dave, Ella et Quinn. Chaque agent est savamment adapté à son rôle spécifique, garantissant une gestion efficace des tâches et une synergie qui accélère le cycle de développement.
importer {Agent} depuis 'kaibanjs'; const daveLoper = nouvel Agent ({
nom : « Dave Loper »,
rôle : 'Développeur',
objectif : 'Écrire et réviser le code',
background : 'Expérimenté en JavaScript, React et Node.js',});const ella = new Agent({
nom: 'Ella',
rôle : 'Chef de produit',
objectif : 'Définir la vision du produit et gérer la feuille de route',
background : 'Compétent en analyse de marché et en stratégie produit',});const quinn = new Agent({
nom : « Quinn »,
rôle :
objectif : « Assurer la qualité et la cohérence »,
arrière-plan : 'Expert en tests, automatisation et suivi des bogues',});Tout comme les professionnels utilisent des outils spécifiques pour exceller dans leurs tâches, permettez à vos agents IA d'utiliser des outils tels que des moteurs de recherche, des calculatrices, etc. pour effectuer des tâches spécialisées avec plus de précision et d'efficacité.
Dans cet exemple, l'un des agents d'IA, Peter Atlas, exploite l'outil Tavily Search Results pour améliorer sa capacité à sélectionner les meilleures villes pour voyager. Cet outil permet à Peter d'analyser les données de voyage en tenant compte de la météo, des prix et de la saisonnalité, garantissant ainsi les recommandations les plus adaptées.
importer { Agent, Outil } depuis 'kaibanjs'; const tavilySearchResults = new Tool ({
nom : 'Résultats de la recherche Tavily',
maxRésultats : 1,
apiKey : 'ENV_TRAVILY_API_KEY',});const peterAtlas = nouvel agent({
nom : « Pierre Atlas »,
rôle : 'Sélecteur de ville',
objectif : « Choisir la meilleure ville sur la base de données de voyage complètes »,
background: 'Expérimenté dans l'analyse de données géographiques et les tendances des voyages',
outils : [tavilySearchResults],});KaibanJS prend en charge tous les outils compatibles LangchainJS, offrant une approche polyvalente de l'intégration d'outils. Pour plus de détails, visitez la documentation.
Optimisez vos solutions d'IA en intégrant une gamme de modèles d'IA spécialisés, chacun conçu pour exceller dans des aspects distincts de vos projets.
Dans cet exemple, les agents (Emma, Lucas et Mia) utilisent divers modèles d'IA pour gérer des étapes spécifiques du développement des spécifications de fonctionnalités. Cette utilisation ciblée des modèles d’IA maximise non seulement l’efficacité, mais garantit également que chaque tâche est alignée sur les ressources d’IA les plus rentables et les plus appropriées.
importer { Agent } depuis 'kaibanjs'; const emma = nouvel Agent ({
nom : « Emma »,
rôle : « Rédaction initiale »,
objectif : « Décrire les fonctionnalités de base »,
llmConfig : {fournisseur : 'google', modèle : 'gemini-1.5-pro',
},});const lucas = nouvel agent({
nom: 'Lucas',
rôle : 'Spécification Technique',
objectif : 'Rédiger des spécifications techniques détaillées',
llmConfig : {fournisseur : 'anthropic', modèle : 'claude-3-5-sonnet-20240620',
},});const mia = nouvel agent({
nom: 'Mia',
rôle : « Révision finale »,
objectif : « Garantir l’exactitude et l’exhaustivité du document final »,
llmConfig : {fournisseur : 'openai', modèle : 'gpt-4o',
},});Pour plus de détails sur l'intégration de divers modèles d'IA avec KaibanJS, veuillez consulter la documentation.
KaibanJS utilise une architecture inspirée de Redux, permettant une approche unifiée pour gérer les états des agents d'IA, les tâches et le flux global au sein de vos applications. Cette méthode garantit une gestion cohérente des états dans les interactions complexes entre agents, offrant ainsi une clarté et un contrôle améliorés.
Voici un exemple simplifié montrant comment intégrer KaibanJS à la gestion d'état dans une application React :
importer myAgentsTeam depuis './agenticTeam'; const KaibanJSComponent = () => {
const useTeamStore = myAgentsTeam.useStore();
const { agents, workflowResult } = useTeamStore((state) => ({agents : state.agents,workflowResult : state.workflowResult,
}));
return (<div> <button onClick={myAgentsTeam.start}>Démarrer le workflow d'équipe</button> <p>Résultat du workflow : {workflowResult}</p> <div><h2>♂️ Agents</h2>{agents .map((agent) => ( <p key={agent.id}>{agent.name} - {agent.role} - Statut : ({agent.status}) </p>))} </div></div>
);};exporter le KaibanJSComponent par défaut ;Pour une analyse plus approfondie de la gestion des états avec KaibanJS, consultez la documentation.
Ajoutez facilement des fonctionnalités d'IA à vos projets NextJS, React, Vue, Angular et Node.js.
KaibanJS est conçu pour une intégration transparente dans une large gamme d'environnements JavaScript. Que vous amélioriez les interfaces utilisateur dans React, Vue ou Angular, construisiez des applications évolutives avec NextJS ou implémentiez des solutions côté serveur dans Node.js, le framework s'intègre facilement à votre flux de travail existant.
importer React depuis 'react'; importer myAgentsTeam depuis './agenticTeam'; const TaskStatusComponent = () => {
const useTeamStore = myAgentsTeam.useStore();
const { tâches } = useTeamStore((state) => ({tasks : state.tasks.map((task) => ({ id : task.id, description : task.description, statut : task.status,})) ,
}));
return (<div> <h1>Statuts des tâches</h1> <ul>{tasks.map((task) => ( <li key={task.id}>{task.description} : Statut - {task.status } </li>))} </ul></div>
);};exporter le TaskStatusComponent par défaut;Pour une plongée plus approfondie, visitez la documentation.
Intégrées à KaibanJS, les fonctionnalités d'observabilité vous permettent de suivre chaque changement d'état avec des statistiques et des journaux détaillés, garantissant une transparence et un contrôle total. Cette fonctionnalité fournit des informations en temps réel sur l'utilisation des jetons, les coûts opérationnels et les changements d'état, améliorant ainsi la fiabilité du système et permettant une prise de décision éclairée grâce à une visibilité complète des données.
L'extrait de code suivant montre comment l'approche de gestion d'état est utilisée pour surveiller et réagir aux modifications dans les journaux de flux de travail, offrant ainsi un contrôle granulaire et des informations approfondies sur la dynamique opérationnelle de vos agents IA :
const useStore = myAgentsTeam.useStore();useStore.subscribe(
(état) => state.workflowLogs,
(newLogs, previousLogs) => {if (newLogs.length > previousLogs.length) { const { tâche, agent, métadonnées } = newLogs[newLogs.length - 1] ; if (newLogs[newLogs.length - 1].logType === 'TaskStatusUpdate') {switch (task.status) { case TASK_STATUS_enum.DONE:console.log('Tâche terminée', { taskDescription : task.description, agentName : agent.name, agentModel : agent.llmConfig.model, durée : 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('Mise à jour de l'état de la tâche', { taskDescription : task.description, taskStatus : task.status, agentName : agent.name,} );casser; default:console.warn('J'ai rencontré un statut de tâche inattendu :', task.status);break;} }}
});Pour plus de détails sur la façon d'utiliser les fonctionnalités d'observabilité dans KaibanJS, veuillez visiter la documentation.
Documentation officielle
Rejoignez notre Discord
KaibanJS vise à être compatible avec les principaux frameworks frontaux tels que React, Vue, Angular et NextJS, ce qui en fait un choix polyvalent pour les développeurs. L'écosystème JavaScript est un "peu complexe...". Si vous rencontrez des problèmes, dites-le-nous et nous vous aiderons à les résoudre.
Il existe environ 20 millions de développeurs JavaScript dans le monde, mais la plupart des frameworks d'IA sont initialement écrits en Python. D'autres ne sont que de simples adaptations pour JavaScript.
Cela nous désavantage tous, développeurs JavaScript, dans la course à l'IA . Mais plus maintenant...
KaibanJS change la donne en visant à offrir un cadre multi-agent d'IA robuste et facile à utiliser, conçu spécifiquement pour l'écosystème JavaScript.
const writtenBy = `Un autre développeur JS qui ne veut pas apprendre Python pour faire des choses significatives en matière d'IA.`;console.log(writingBy);
Rejoignez la communauté Discord pour vous connecter avec d'autres développeurs et obtenir de l'aide. Suivez-nous sur Twitter pour les dernières mises à jour.
Nous apprécions les contributions de la communauté. Veuillez lire les directives de contribution avant de soumettre des demandes de tirage.
KaibanJS est sous licence MIT.
