KaibanJS

ไคบันJS

กรอบงาน JavaScript สำหรับการสร้างระบบหลายเอเจนต์

คัมบังสำหรับตัวแทน AI

KaibanJS ได้รับแรงบันดาลใจจากวิธี Kanban ที่ได้รับการพิสูจน์แล้ว ซึ่งเป็นที่รู้จักกันดีในการช่วยให้ทีมจัดระเบียบและจัดการงานของพวกเขา เราได้ปรับแนวคิดเหล่านี้เพื่อตอบสนอง ความท้าทายเฉพาะของการจัดการตัวแทน AI

หากคุณเคยใช้เครื่องมือเช่น Trello, Jira หรือ ClickUp คุณจะคุ้นเคยกับวิธีที่ Kanban ช่วยจัดการงานต่างๆ ตอนนี้ KaibanJS ใช้ระบบเดียวกันนั้นเพื่อช่วยคุณจัดการตัวแทน AI และงานของพวกเขาแบบเรียลไทม์

ด้วย KaibanJS คุณสามารถ:

• สร้าง แสดงภาพ และจัดการตัวแทน AI งาน เครื่องมือ และทีม

• จัดระเบียบเวิร์กโฟลว์ AI ได้อย่างราบรื่น

• แสดงภาพขั้นตอนการทำงานแบบเรียลไทม์

• ติดตามความคืบหน้าในขณะที่งานเคลื่อนผ่านขั้นตอนต่างๆ

• ทำงานร่วมกันในโครงการ AI ได้อย่างมีประสิทธิภาพมากขึ้น

ลองดูสิ

สำรวจ Kaiban Board — มันเหมือนกับ Trello หรือ Asana แต่สำหรับ AI Agent และมนุษย์

เริ่มต้นอย่างรวดเร็ว

เริ่มต้นกับ KaibanJS ภายในไม่กี่นาที:

ตั้งค่า

1. เรียกใช้ตัวเริ่มต้น KaibanJS ในไดเร็กทอรีโปรเจ็กต์ของคุณ:

 npx kaibanjs@ล่าสุด init

2. เพิ่มคีย์ API บริการ AI ของคุณลงในไฟล์ .env :

VITE_OPENAI_API_KEY=your-api-key-here

3. รีสตาร์ทบอร์ด Kaiban ของคุณ:

 npm วิ่งไคบัน

ใช้บอร์ด Kaiban ของคุณ

1. คลิก "เริ่มเวิร์กโฟลว์" เพื่อเรียกใช้ตัวอย่างเริ่มต้น

2. ดูเจ้าหน้าที่ทำงานให้เสร็จสิ้นแบบเรียลไทม์บนกระดานงาน

3. ดูผลลัพธ์สุดท้ายในภาพรวมผลลัพธ์

บูรณาการที่ยืดหยุ่น

KaibanJS ไม่ได้จำกัดอยู่แค่บอร์ด Kaiban คุณสามารถรวมเข้ากับโปรเจ็กต์ของคุณโดยตรง สร้าง UI แบบกำหนดเอง หรือเรียกใช้ตัวแทนโดยไม่มี UI สำรวจบทช่วยสอนของเราสำหรับการบูรณาการ React และ Node.js เพื่อปลดปล่อยศักยภาพสูงสุดของ KaibanJS ในบริบทการพัฒนาที่หลากหลาย

การติดตั้งและการใช้งานด้วยตนเอง

หากคุณต้องการตั้งค่า KaibanJS ด้วยตนเอง ให้ทำตามขั้นตอนเหล่านี้:

1. ติดตั้ง KaibanJS ผ่าน npm:

 npm ติดตั้ง kaibanjs

2. นำเข้า KaibanJS ในไฟล์ JavaScript ของคุณ:

 // การใช้ไวยากรณ์การนำเข้า ES6 สำหรับ NextJS, React, ฯลฯ นำเข้า { Agent, Task, Team } จาก 'kaibanjs';

 // การใช้ไวยากรณ์ CommonJS สำหรับ NodeJSconst { Agent, Task, Team } = need('kaibanjs');

3. ตัวอย่างการใช้งานพื้นฐาน

 // กำหนดตัวแทนconst researchAgent = ตัวแทนใหม่ ({
  ชื่อ: 'นักวิจัย',
  บทบาท: 'ผู้รวบรวมข้อมูล',
  เป้าหมาย: 'ค้นหาข้อมูลที่เกี่ยวข้องในหัวข้อที่กำหนด',}); // สร้างงานconst researchTask = งานใหม่ ({
  คำอธิบาย: 'วิจัยการพัฒนา AI ล่าสุด'
  ตัวแทน: researchAgent,});// ตั้งค่าทีม teamconst = ทีมใหม่ ({
  ชื่อ: 'ทีมวิจัย AI'
  ตัวแทน: [researchAgent],
  งาน: [งานวิจัย],
  env: { OPENAI_API_KEY: 'your-api-key-here' },});// เริ่มเวิร์กโฟลว์ทีม
  .เริ่ม()
  .then((output) => {console.log('เวิร์กโฟลว์เสร็จสมบูรณ์:', output.result);
  -
  .catch((error) => {console.error('ข้อผิดพลาดของเวิร์กโฟลว์:', ข้อผิดพลาด);
  -

แนวคิดพื้นฐาน

ตัวแทน ตัวแทน เป็นหน่วยงานอิสระที่ออกแบบมาเพื่อปฏิบัติหน้าที่เฉพาะและบรรลุเป้าหมายตามงานที่ได้รับมอบหมาย พวกเขาเป็นเหมือน LLM ที่มีพลังพิเศษที่สามารถดำเนินงานแบบวนซ้ำได้จนกว่าจะถึงคำตอบสุดท้าย

งาน งาน กำหนดการดำเนินการเฉพาะที่แต่ละตัวแทนต้องทำ ผลลัพธ์ที่คาดหวัง และทำเครื่องหมายผลลัพธ์ที่สำคัญว่าส่งมอบได้หากเป็นผลิตภัณฑ์ขั้นสุดท้าย

ทีมงาน ทีมงานประสานงานตัวแทนและงานของพวกเขา เริ่มต้นด้วยการป้อนข้อมูลเริ่มต้นและจัดการการไหลของข้อมูลระหว่างงานต่างๆ

ดูวิดีโอนี้เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับแนวคิด: แนวคิด KaibanJS

คุณสมบัติที่สำคัญ

คณะกรรมการไก่บัน

บอร์ดคัมบังเป็นเครื่องมือที่ยอดเยี่ยมสำหรับการนำเสนอขั้นตอนการทำงานของทีมแบบเรียลไทม์ โดยให้ภาพรวมที่ชัดเจนและโต้ตอบได้ของความคืบหน้าของสมาชิกแต่ละคน

เราได้ปรับแนวคิดนี้สำหรับตัวแทน AI

ตอนนี้คุณสามารถเห็นภาพขั้นตอนการทำงานของเจ้าหน้าที่ AI ของคุณในฐานะสมาชิกในทีม โดยงานต่างๆ จะย้ายจาก "สิ่งที่ต้องทำ" ไปเป็น "เสร็จสิ้น" ต่อหน้าต่อตาคุณ การแสดงภาพนี้ช่วยลดความยุ่งยากในการทำความเข้าใจและจัดการการดำเนินงาน AI ที่ซับซ้อน ทำให้ทุกคนสามารถเข้าถึงได้จากทุกที่

การออกแบบตัวแทนตามบทบาท

ควบคุมพลังของความเชี่ยวชาญพิเศษโดยการกำหนดค่าตัวแทน AI เพื่อให้เป็นเลิศในฟังก์ชันที่สำคัญและแตกต่างภายในโครงการของคุณ แนวทางนี้ช่วยเพิ่มประสิทธิภาพและประสิทธิผลของแต่ละงาน โดยก้าวข้ามข้อจำกัดของ AI ทั่วไป

ในตัวอย่างนี้ ทีมพัฒนาซอฟต์แวร์ของเราขับเคลื่อนโดยตัวแทน AI ที่เชี่ยวชาญสามคน ได้แก่ Dave, Ella และ Quinn เจ้าหน้าที่แต่ละรายได้รับการปรับแต่งอย่างเชี่ยวชาญให้เหมาะกับบทบาทเฉพาะของตน เพื่อให้มั่นใจว่าการจัดการงานมีประสิทธิภาพและการทำงานร่วมกันที่ช่วยเร่งวงจรการพัฒนา

 นำเข้า { ตัวแทน } จาก 'kaibanjs'; const daveLoper = ตัวแทนใหม่ ({
  ชื่อ: 'เดฟ โลเปอร์'
  บทบาท: 'นักพัฒนา'
  เป้าหมาย: 'เขียนและตรวจสอบโค้ด'
  พื้นหลัง: 'มีประสบการณ์ใน JavaScript, React และ Node.js',});const ella = new Agent({
  ชื่อ'เอลล่า'
  บทบาท: 'ผู้จัดการผลิตภัณฑ์',
  เป้าหมาย: 'กำหนดวิสัยทัศน์ผลิตภัณฑ์และจัดการแผนงาน'
  พื้นหลัง: 'มีทักษะในการวิเคราะห์ตลาดและกลยุทธ์ผลิตภัณฑ์',});const quinn = ตัวแทนใหม่({
  ชื่อ'ควินน์'
  บทบาท: 'ผู้เชี่ยวชาญด้าน QA'
  เป้าหมาย: 'รับประกันคุณภาพและความสม่ำเสมอ'
  พื้นหลัง: 'ผู้เชี่ยวชาญในการทดสอบ ระบบอัตโนมัติ และการติดตามจุดบกพร่อง',});

บูรณาการเครื่องมือ

เช่นเดียวกับที่มืออาชีพใช้เครื่องมือเฉพาะเพื่อทำให้งานของตนเป็นเลิศ ช่วยให้ตัวแทน AI ของคุณใช้เครื่องมือ เช่น เครื่องมือค้นหา เครื่องคิดเลข และอื่นๆ เพื่อทำงานพิเศษด้วยความแม่นยำและประสิทธิภาพที่มากขึ้น

ในตัวอย่างนี้ Peter Atlas หนึ่งในตัวแทน AI ใช้ประโยชน์จากเครื่องมือค้นหา Tavily Search Results เพื่อเพิ่มความสามารถในการเลือกเมืองที่ดีที่สุดสำหรับการเดินทาง เครื่องมือนี้ช่วยให้ Peter วิเคราะห์ข้อมูลการเดินทางโดยพิจารณาสภาพอากาศ ราคา และฤดูกาล เพื่อให้มั่นใจว่าได้รับคำแนะนำที่เหมาะสมที่สุด

 นำเข้า { ตัวแทน เครื่องมือ } จาก 'kaibanjs'; const tavilySearchResults = เครื่องมือใหม่ ({
  ชื่อ: 'ผลการค้นหา Tavily',
  ผลลัพธ์สูงสุด: 1,
  apiKey: 'ENV_TRAVILY_API_KEY',}); const peterAtlas = ตัวแทนใหม่ ({
  ชื่อ: ปีเตอร์ แอตลาส
  บทบาท: 'ผู้เลือกเมือง'
  เป้าหมาย: 'เลือกเมืองที่ดีที่สุดตามข้อมูลการเดินทางที่ครอบคลุม'
  พื้นหลัง: 'มีประสบการณ์ในการวิเคราะห์ข้อมูลทางภูมิศาสตร์และแนวโน้มการเดินทาง',
  เครื่องมือ: [tavilySearchResults],});

KaibanJS รองรับเครื่องมือที่เข้ากันได้กับ LangchainJS ทั้งหมด โดยนำเสนอแนวทางที่หลากหลายในการรวมเครื่องมือ สำหรับรายละเอียดเพิ่มเติม โปรดไปที่เอกสารประกอบ

รองรับ LLM หลายรายการ

เพิ่มประสิทธิภาพโซลูชัน AI ของคุณโดยการผสานรวมโมเดล AI พิเศษต่างๆ ซึ่งแต่ละโมเดลได้รับการปรับแต่งเพื่อให้เป็นเลิศในด้านต่างๆ ของโครงการของคุณ

ในตัวอย่างนี้ ตัวแทน ได้แก่ Emma, ​​Lucas และ Mia ใช้โมเดล AI ที่หลากหลายเพื่อจัดการกับขั้นตอนเฉพาะของการพัฒนาข้อกำหนดคุณลักษณะ การใช้โมเดล AI แบบกำหนดเป้าหมายนี้ไม่เพียงแต่เพิ่มประสิทธิภาพสูงสุดเท่านั้น แต่ยังช่วยให้มั่นใจได้ว่าแต่ละงานสอดคล้องกับทรัพยากร AI ที่คุ้มต้นทุนและเหมาะสมที่สุดอีกด้วย

 นำเข้า { ตัวแทน } จาก 'kaibanjs'; const emma = ตัวแทนใหม่ ({
  ชื่อ'เอ็มม่า'
  บทบาท: 'การร่างเบื้องต้น'
  เป้าหมาย: 'โครงร่างฟังก์ชันหลัก'
  llmConfig: {ผู้ให้บริการ: 'google' รุ่น: 'gemini-1.5-pro',
  },});const lucas = ตัวแทนใหม่ ({
  ชื่อ'ลูคัส'
  บทบาท: 'ข้อกำหนดทางเทคนิค',
  เป้าหมาย: 'ร่างข้อกำหนดทางเทคนิคโดยละเอียด'
  llmConfig: {ผู้ให้บริการ: 'มานุษยวิทยา' รุ่น: 'claude-3-5-sonnet-20240620',
  },});const mia = ตัวแทนใหม่ ({
  ชื่อ'มีอา'
  บทบาท: 'การทบทวนครั้งสุดท้าย'
  เป้าหมาย: 'รับรองความถูกต้องและครบถ้วนของเอกสารขั้นสุดท้าย'
  llmConfig: {ผู้ให้บริการ: 'openai' รุ่น: 'gpt-4o',
  -

สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการรวมโมเดล AI ที่หลากหลายเข้ากับ KaibanJS โปรดไปที่เอกสารประกอบ

การจัดการของรัฐที่แข็งแกร่ง

KaibanJS ใช้สถาปัตยกรรมที่ได้รับแรงบันดาลใจจาก Redux ทำให้เกิดแนวทางแบบครบวงจรในการจัดการสถานะของเอเจนต์ AI งาน และโฟลว์โดยรวมภายในแอปพลิเคชันของคุณ วิธีการนี้ช่วยให้มั่นใจได้ถึงการจัดการสถานะที่สอดคล้องกันในการโต้ตอบกับตัวแทนที่ซับซ้อน มอบความชัดเจนและการควบคุมที่ได้รับการปรับปรุง

นี่คือตัวอย่างง่ายๆ ที่สาธิตวิธีรวม KaibanJS เข้ากับการจัดการสถานะในแอปพลิเคชัน React:

 นำเข้า myAgentsTeam จาก './agenticTeam';const KaibanJSComponent = () => {
  const useTeamStore = myAgentsTeam.useStore();

  const { agent, workflowResult } = useTeamStore((state) => ({agents: state.agents,workflowResult: state.workflowResult,
  -

  return (<div> <button onClick={myAgentsTeam.start}>เริ่มเวิร์กโฟลว์ของทีม</button> <p>ผลลัพธ์เวิร์กโฟลว์: {workflowResult}</p> <div><h2>‍♂️ ตัวแทน</h2>{ตัวแทน .map((agent) => ( <p key={agent.id}>{agent.name} - {agent.role} - สถานะ: ({agent.status}) </p>))} </div ></div>
  );};ส่งออกค่าเริ่มต้น KaibanJSComponent;

หากต้องการเจาะลึกยิ่งขึ้นเกี่ยวกับการจัดการของรัฐด้วย KaibanJS โปรดไปที่เอกสารประกอบ

ผสานรวมกับเฟรมเวิร์ก JavaScript ที่คุณต้องการ

เพิ่มความสามารถ AI ให้กับโปรเจ็กต์ NextJS, React, Vue, Angular และ Node.js ของคุณได้อย่างง่ายดาย

KaibanJS ได้รับการออกแบบมาเพื่อการบูรณาการอย่างราบรื่นในสภาพแวดล้อม JavaScript ที่หลากหลาย ไม่ว่าคุณจะปรับปรุงอินเทอร์เฟซผู้ใช้ใน React, Vue หรือ Angular สร้างแอปพลิเคชันที่ปรับขนาดได้ด้วย NextJS หรือใช้โซลูชันฝั่งเซิร์ฟเวอร์ใน Node.js เฟรมเวิร์กจะผสานรวมเข้ากับเวิร์กโฟลว์ที่มีอยู่ของคุณได้อย่างราบรื่น

 นำเข้า React จาก 'react'; นำเข้า myAgentsTeam จาก './agenticTeam'; const TaskStatusComponent = () => {
  const useTeamStore = myAgentsTeam.useStore();

  const { งาน } = useTeamStore((state) => ({tasks: 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, 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 ('งานเสร็จสมบูรณ์', { taskDescription: task.description, agentName: agent.name, agentModel: agent.llmConfig.model, ระยะเวลา: metadata.duration, llmUsageStats: metadata.llmUsageStats, costDetails: metadata.costDetails,}); ทำลาย;  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: agent.name,} );หยุดพัก;  default:console.warn('พบสถานะงานที่ไม่คาดคิด:', task.status);break;} }}
  -

สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับวิธีใช้คุณสมบัติการสังเกตใน KaibanJS โปรดไปที่เอกสารประกอบ

เอกสารประกอบ

• เอกสารอย่างเป็นทางการ

• เข้าร่วม Discord ของเรา

ความเข้ากันได้

KaibanJS ตั้งเป้าที่จะเข้ากันได้กับเฟรมเวิร์กส่วนหน้าหลักๆ เช่น React, Vue, Angular และ NextJS ทำให้เป็นตัวเลือกที่หลากหลายสำหรับนักพัฒนา ระบบนิเวศของ JavaScript นั้น "ซับซ้อนเล็กน้อย..." หากคุณมีปัญหาใด ๆ โปรดบอกเราและเราจะช่วยคุณแก้ไข

ทำไมต้อง KaibanJS?

มีนักพัฒนา JavaScript ประมาณ 20 ล้านคนทั่วโลก แต่เฟรมเวิร์ก AI ส่วนใหญ่เดิมเขียนด้วย Python ส่วนอื่นๆ เป็นเพียงการดัดแปลงสำหรับ JavaScript

สิ่งนี้ทำให้ นักพัฒนา JavaScript ทุกคนเสียเปรียบในการแข่งขัน AI แต่ไม่ใช่อีกต่อไป...

KaibanJS เปลี่ยนแปลงเกมโดยมีเป้าหมายที่จะนำเสนอเฟรมเวิร์ก AI หลายตัวแทนที่แข็งแกร่งและใช้งานง่าย ซึ่งออกแบบมาสำหรับระบบนิเวศ JavaScript โดยเฉพาะ

 constwriteBy = `JS Dev อีกคนที่ไม่ต้องการเรียนรู้ Python เพื่อทำสิ่ง AI ที่มีความหมาย`;console.log(เขียนโดย);

ชุมชนและการสนับสนุน

เข้าร่วมชุมชน Discord เพื่อเชื่อมต่อกับนักพัฒนารายอื่นและรับการสนับสนุน ติดตามเราบน Twitter สำหรับการอัปเดตล่าสุด

มีส่วนร่วม

เรายินดีรับการสนับสนุนจากชุมชน โปรดอ่านหลักเกณฑ์การมีส่วนร่วมก่อนที่จะส่งคำขอดึง

ใบอนุญาต

KaibanJS ได้รับอนุญาตจาก MIT