Champion agent (#13)

#### Major Changes - **Agent and Logic Enhancements** - Splitting agents' logic into multiple files for better organization and maintenance. - Introduced the first version of Champion Agent. - Enhanced ReactChampion Agent lifecycle with additional states and improved handling. #### Key Feature Additions - Added langchain Community to the Playground for enhanced testing. - Implemented Storybook in the playground to facilitate development. - Added new API_KEY workflow initialization by the productSpecsTeam. #### Improvements and Fixes - Major refactor titled "The biggest commit you ever saw," addressing multiple backend optimizations. - Updated `.gitignore` and environmental variable configurations. - Fixed NodeJS example to ensure compatibility with external dependencies. - Standardized logging across various components with pretty log functions. - Added and adjusted functionality for better JSON parsing and handling. #### Security and Maintenance - Removed unused API Key methods to enhance security. - Removed secrets from commit history to safeguard repository integrity. - Reorganized tests and integrated Jest snapshots to enhance testing reliability. - Temporary removal of end-to-end tests from main to focus on unit and integration testing. #### Optimization and Debugging Tools - Improved BoardDebugger structure for easier debugging and diagnostics. - Added cost calculations per task and workflow for better resource management.
kaiban-ai · Aug 6, 2024 · 464efe7 · 464efe7
2 parents 313783a + 9f034ee
commit 464efe7
Show file tree

Hide file tree

Showing 96 changed files with 61,980 additions and 3,413 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,4 @@
+{
+    "presets": ["@babel/preset-env"],
+    "plugins": ["@babel/plugin-syntax-import-meta"]
+}
diff --git a/.github/workflows/stable-main-check-workflow.yml b/.github/workflows/stable-main-check-workflow.yml
@@ -29,9 +29,3 @@ jobs:
 
     - name: Run integration tests
       run: npm run test:integration
-
-    - name: Build production version
-      run: npm run build
-
-    - name: Run e2e tests
-      run: npm run test:e2e
diff --git a/.gitignore b/.gitignore
@@ -36,6 +36,7 @@ yarn-error.log*
 # Misc
 .DS_Store
 *.pem
+_todo.md
 
 *storybook.log
 _todo.md
diff --git a/README.md b/README.md
@@ -13,29 +13,6 @@ AgenticJS is a JavaScript-native framework for building multi-agent AI systems.
 
 [Explore the Playground](https://agenticjs.com) — *it's like Trello or Asana, but for AI Agents and humans.*
 
-## Why AgenticJS?
-
-There are about 20 million JavaScript developers worldwide, yet most AI frameworks are originally written in Python. Others are mere adaptations for JavaScript. 
-
-This puts all of us **JavaScript developers at a disadvantage in the AI race**. But not anymore...
-
-AgenticJS changes the game by aiming to offer a robust, easy-to-use AI multi-agent framework designed specifically for the JavaScript ecosystem.
-
-```js
-const writtenBy = `Another JS Dev Who Doesn't Want to Learn Python to do meaningful AI Stuff.`;
-console.log(writtenBy);
-```
-
-
-### Key Features
-
-- **Role-Based Agent Design:** Design agents with specific roles and goals.
-- **Flexible Task Management:** Define and assign tasks dynamically to agents.
-- **Redux-Inspired Architecture:** This architecture offers a unified approach to managing the states of all AI agents. As a big plus, it integrates effortlessly into your React applications.
-- **Real-Time Visualizer:** Built-in UI visualizer for development and debugging.
-- **Browser and Server Compatibility:** Works seamlessly across client and server environments.
-- **Multi-Model Support:** Integrates with various AI models including OpenAI, Gemini, Claude, and Mistral, enhancing versatility and adaptability.
-
 ## Getting Started
 
 ### Install AgenticJS via npm:
@@ -58,28 +35,11 @@ const { Agent, Task, Team } = require("agenticjs");
 
 ## Example Usage
 
-Define agents, tasks, and a team to manage them:
+In this example, we use AgenticJS to build a resume generation team. If you're looking to create or update your resume, this setup utilizes specialized AI agents to automatically process your information and produce a polished, professional resume tailored to your career goals.
 
 ```js
-import { Agent, Task, Team } from 'agenticjs';
-
-// NodeJS
-// const { Agent, Task, Team } = require('agenticjs');
-
-// ╔══════════════════════════════════════════════════════╗
-// ║ How to Use AgenticJS:                                ║
-// ║ 1. Define your Agents with specific roles and goals  ║
-// ║ 2. Define the Tasks each Agent will perform          ║ 
-// ║ 3. Create the Team and assign Agents and their Tasks ║
-// ║ 4. Start the Team to execute the defined tasks       ║
-// ╚══════════════════════════════════════════════════════╝
-
-// ──── Agents ────────────────────────────────────────────
-// ─ Agents are autonomous entities designed to perform
-// ─ specific roles and achieve goals based on the
-// ─ tasks assigned to them.
-// ────────────────────────────────────────────────────────
 
+// Define agents with specific roles and goals
 const profileAnalyst = new Agent({
     name: 'Ivy', 
     role: 'Profile Analyst', 
@@ -96,21 +56,7 @@ const formatter = new Agent({
     tools: [],  
 });
 
-const reviewer = new Agent({
-    name: 'Revy', 
-    role: 'Reviewer', 
-    goal: 'Review and polish the final resume.', 
-    background: 'Quality Assurance Specialist',
-    tools: [],  
-});
-
-// ──── Tasks ─────────────────────────────────────────────
-// ─ Tasks define the specific actions each agent must
-// ─ take, their expected outputs, and mark critical
-// ─ outputs as deliverables if they are the final
-// ─ products.
-// ────────────────────────────────────────────────────────
-
+// Define the tasks for each agent
 const processingTask = new Task({ 
     description: `Extract relevant details such as name, experience, skills, and job history from the user's 'aboutMe' input. 
     aboutMe: {aboutMe}`,
@@ -119,51 +65,44 @@ const processingTask = new Task({
 });
 
 const formattingTask = new Task({ 
-    description: `Use the extracted information to create a clean, professional resume layout tailored for a JavaScript Developer.`,
+    description: `Use the extracted information to create a clean, professional resume layout tailored for a JavaScript Developer. Please enhance the provided information with more details, to make the resume appealing for potential recruiters.`,
     expectedOutput: 'A well-formatted resume in PDF format.', 
     agent: formatter 
 });
 
-const reviewTask = new Task({ 
-    description: `Ensure the resume is error-free, engaging, and meets professional standards.`,
-    expectedOutput: 'A polished, final resume ready for job applications. Please do not give any feedback on the resume. Just the final resume.', 
-    agent: reviewer 
-});
-
-// ──── Team ────────────────────────────────────────────
-// ─ The Team coordinates the agents and their tasks.
-// ─ It starts with an initial input and manages the
-// ─ flow of information between tasks.
-// ──────────────────────────────────────────────────────
-
+// Create and start the team
 const team = new Team({
     name: 'Resume Creation Team',
-    agents: [profileAnalyst, formatter, reviewer],
-    tasks: [processingTask, formattingTask, reviewTask],
+    agents: [profileAnalyst, formatter],
+    tasks: [processingTask, formattingTask],
     inputs: { aboutMe: 'My name is Will, I have been a Javascript Developer for 3 years. I know React, NextJS, and REDUX. My latest job was as a Junior Developer at Disney creating UIs for the main landing page.' },  // Initial input for the first task
     env: {OPENAI_API_KEY: 'your-open-ai-api-key'}  // Environment variables for the team
 });
 
-// Note: Avoid hardcoding API keys; retrieve them from environment variables instead.
-
-// ──── Listening to Changes────────────────────────────────────────────
-// 
-// Listening to changes in the team's state is crucial for dynamic updates.
-// Yup...AgenticJS utilizes a store similar to Redux for state management.
-//──────────────────────────────────────────────────────────────────────
-
-const unsubscribe = team.subscribeToChanges((updatedFields) => {
-    console.log("Workflow Status Updated:", updatedFields);
-}, ['teamWorkflowStatus']);
-
-// ──── Start Team Workflow ───────────────────────────────────────
-// 
-// Begins the predefined team process, producing the final result.
-//─────────────────────────────────────────────────────────────────
 const result = await team.start();
 console.log("Final Output:", result);
 ```
 
+## Basic Concepts
+
+**Agents** 
+Agents are autonomous entities designed to perform specific roles and achieve goals based on the tasks assigned to them. They are like super-powered LLMs that can execute tasks in a loop until they arrive at the final answer.
+
+**Tasks**
+Tasks define the specific actions each agent must take, their expected outputs, and mark critical outputs as deliverables if they are the final products.
+
+**Team**
+The Team coordinates the agents and their tasks. It starts with an initial input and manages the flow of information between tasks.
+
+## Key Features
+
+- **Role-Based Agent Design:** Design agents with specific roles and goals.
+- **Flexible Task Management:** Define and assign tasks dynamically to agents.
+- **Redux-Inspired Architecture:** This architecture offers a unified approach to managing the states of all AI agents. As a big plus, it integrates effortlessly into your React applications.
+- **Real-Time Visualizer:** Built-in UI visualizer for development and debugging.
+- **Browser and Server Compatibility:** Works seamlessly across client and server environments.
+- **Multi-Model Support:** Integrates with various AI models including OpenAI, Gemini, Claude, and Mistral, enhancing versatility and adaptability.
+
 ## Documentation
 
 - [Official Documentation](https://agenticjs.com)
@@ -173,6 +112,19 @@ console.log("Final Output:", result);
 
 AgenticJS aims to be compatible with major front-end frameworks like React, Vue, Angular, and NextJS, making it a versatile choice for developers. The JavaScript ecosystem is a "bit complex...". If you have any problems, please tell us and we'll help you fix them.
 
+## Why AgenticJS?
+
+There are about 20 million JavaScript developers worldwide, yet most AI frameworks are originally written in Python. Others are mere adaptations for JavaScript. 
+
+This puts all of us **JavaScript developers at a disadvantage in the AI race**. But not anymore...
+
+AgenticJS changes the game by aiming to offer a robust, easy-to-use AI multi-agent framework designed specifically for the JavaScript ecosystem.
+
+```js
+const writtenBy = `Another JS Dev Who Doesn't Want to Learn Python to do meaningful AI Stuff.`;
+console.log(writtenBy);
+```
+
 ### Community and Support
 
 Join our [Discord community](https://bit.ly/JoinAIChamps) to connect with other developers and get support. [Follow us](https://x.com/dariel_noel) on Twitter for the latest updates.

diff --git a/jest.config.js b/jest.config.js
@@ -1,6 +1,6 @@
 module.exports = {
     transform: {
-      '^.+\\.js$': 'babel-jest',
+      "^.+\\.[t|j]sx?$": "babel-jest"
     },
     moduleNameMapper: {
         '^agenticjs$': '<rootDir>/dist/bundle.cjs.js'
@@ -9,5 +9,7 @@ module.exports = {
     testEnvironment: 'node', // Use Node.js environment for executing tests,
     verbose: true, // Make Jest more verbose
     silent: false, // Ensure Jest is not silent (though this is not directly related to console.log output)
-
+    // testMatch: [
+    //   "**/tests/e2e/exampl/**/*.js"
+    // ], // Run tests only in the specific directory
   };