Improve examples (#14)

- Fixed bug in finalAnswer as Object. - Adds Resume Creation team example to the Playground. - Adds integration tests for resume creation team. - Adjusted Readme Example.
kaiban-ai · Aug 7, 2024 · fc69cb0 · fc69cb0
2 parents aee502e + ae9300b
commit fc69cb0
Show file tree

Hide file tree

Showing 8 changed files with 7,080 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -41,41 +41,57 @@ In this example, we use AgenticJS to build a resume generation team. If you're l
 
 // Define agents with specific roles and goals
 const profileAnalyst = new Agent({
-    name: 'Ivy', 
+    name: 'Mary', 
     role: 'Profile Analyst', 
     goal: 'Extract structured information from conversational user input.', 
     background: 'Data Processor',
-    tools: [],  // Tools are omitted for now  
+    tools: []  // Tools are omitted for now
 });
 
-const formatter = new Agent({
-    name: 'Formy', 
-    role: 'Formatter', 
-    goal: 'Format structured information into a professional resume.', 
-    background: 'Document Formatter',
-    tools: [],  
+const resumeWriter = new Agent({
+    name: 'Alex Mercer', 
+    role: 'Resume Writer', 
+    goal: `Craft compelling, well-structured resumes 
+    that effectively showcase job seekers qualifications and achievements.`,
+    background: `Extensive experience in recruiting, 
+    copywriting, and human resources, enabling 
+    effective resume design that stands out to employers.`,
+    tools: []
 });
 
 // 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}`,
-    expectedOutput: 'Structured data ready for formatting.', 
-    agent: profileAnalyst
+  description: `Extract relevant details such as name, 
+  experience, skills, and job history from the user's 'aboutMe' input. 
+  aboutMe: {aboutMe}`,
+  expectedOutput: 'Structured data ready to be used for a resume creation.', 
+  agent: profileAnalyst
 });
 
-const formattingTask = new Task({ 
-    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 resumeCreationTask = new Task({ 
+    description: `Utilize the structured data to create 
+    a detailed and attractive resume. 
+    Enrich the resume content by inferring additional details from the provided information.
+    Include sections such as a personal summary, detailed work experience, skills, and educational background.`,
+    expectedOutput: `A professionally formatted resume in markdown format, 
+    ready for submission to potential employers.`, 
+    agent: resumeWriter 
 });
 
 // Create and start the team
 const team = new Team({
-    name: 'Resume Creation Team',
-    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
+  name: 'Resume Creation Team',
+  agents: [profileAnalyst, resumeWriter],
+  tasks: [processingTask, resumeCreationTask],
+  inputs: { aboutMe: `My name is David Llaca. 
+    JavaScript Developer for 5 years. 
+    I worked for three years at Disney, 
+    where I developed user interfaces for their primary landing pages
+     using React, NextJS, and Redux. Before Disney, 
+     I was a Junior Front-End Developer at American Airlines, 
+     where I worked with Vue and Tailwind. 
+     I earned a Bachelor of Science in Computer Science from FIU in 2018, 
+     and I completed a JavaScript bootcamp that same year.` },  // Initial input for the first task
     env: {OPENAI_API_KEY: 'your-open-ai-api-key'}  // Environment variables for the team
 });
 

diff --git a/playground/react/src/stories/ResumeCreationTeam.stories.js b/playground/react/src/stories/ResumeCreationTeam.stories.js
@@ -0,0 +1,17 @@
+import AgentsBoardDebugger from '../AgentsBoardDebugger';
+import teamOpenAI from '../teams/resume_creation/openai';
+
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+export default {
+  title: 'Teams/Resume Creation Team',
+  component: AgentsBoardDebugger
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const withOpenAI = {
+  args: {
+    team: teamOpenAI,
+    title: 'With OpenAI Model'
+  },
+};
diff --git a/playground/react/src/teams/resume_creation/openai.js b/playground/react/src/teams/resume_creation/openai.js
@@ -2,55 +2,58 @@ import { Agent, Task, Team } from 'agenticjs';
 
 // Define agents
 const profileAnalyst = new Agent({
-    name: 'Ivy', 
+    name: 'Mary', 
     role: 'Profile Analyst', 
     goal: 'Extract structured information from conversational user input.', 
     background: 'Data Processor',
     tools: []  // Tools are omitted for now
 });
 
-const formatter = new Agent({
-    name: 'Formy', 
-    role: 'Formatter', 
-    goal: 'Format structured information into a professional resume.', 
-    background: 'Document Formatter',
-    tools: []
-});
-
-const reviewer = new Agent({
-    name: 'Revy', 
-    role: 'Reviewer', 
-    goal: 'Review and polish the final resume.', 
-    background: 'Quality Assurance Specialist',
+const resumeWriter = new Agent({
+    name: 'Alex Mercer', 
+    role: 'Resume Writer', 
+    goal: `Craft compelling, well-structured resumes 
+    that effectively showcase job seekers qualifications and achievements.`,
+    background: `Extensive experience in recruiting, 
+    copywriting, and human resources, enabling 
+    effective resume design that stands out to employers.`,
     tools: []
 });
 
 // Define tasks
 const processingTask = new Task({ 
-  description: `Extract relevant details such as name, experience, skills, and job history from the user's 'aboutMe' input. 
+  description: `Extract relevant details such as name, 
+  experience, skills, and job history from the user's 'aboutMe' input. 
   aboutMe: {aboutMe}`,
-  expectedOutput: 'Structured data ready for formatting.', 
+  expectedOutput: 'Structured data ready to be used for a resume creation.', 
   agent: profileAnalyst
 });
 
-const formattingTask = new Task({ 
-    description: `Use the extracted information to create a clean, professional resume layout tailored for a JavaScript Developer.`,
-    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.', 
-    agent: reviewer 
+const resumeCreationTask = new Task({ 
+    description: `Utilize the structured data to create 
+    a detailed and attractive resume. 
+    Enrich the resume content by inferring additional details from the provided information.
+    Include sections such as a personal summary, detailed work experience, skills, and educational background.`,
+    expectedOutput: `A professionally formatted resume in markdown format, 
+    ready for submission to potential employers.`, 
+    agent: resumeWriter 
 });
 
 // Create a team
 const team = new Team({
   name: 'Resume Creation Team',
-  agents: [profileAnalyst, formatter, reviewer],
-  tasks: [processingTask, formattingTask, reviewTask],
-  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
+  agents: [profileAnalyst, resumeWriter],
+  tasks: [processingTask, resumeCreationTask],
+  inputs: { aboutMe: `My name is David Llaca. 
+    JavaScript Developer for 5 years. 
+    I worked for three years at Disney, 
+    where I developed user interfaces for their primary landing pages
+     using React, NextJS, and Redux. Before Disney, 
+     I was a Junior Front-End Developer at American Airlines, 
+     where I worked with Vue and Tailwind. 
+     I earned a Bachelor of Science in Computer Science from FIU in 2018, 
+     and I completed a JavaScript bootcamp that same year.` },  // Initial input for the first task
+  env: {OPENAI_API_KEY: import.meta.env.VITE_OPENAI_API_KEY, ANTHROPIC_API_KEY: import.meta.env.VITE_ANTHROPIC_API_KEY}
 });
 
 export default team;
diff --git a/src/agents/reactChampionAgent.js b/src/agents/reactChampionAgent.js
@@ -312,6 +312,11 @@ class ReactChampionAgent extends BaseAgent {
 
     handleFinalAnswer({agent, task, parsedLLMOutput}) {
         // console.log(parsedJSON.finalAnswer);
+        if (parsedLLMOutput.finalAnswer) {
+            if (typeof parsedLLMOutput.finalAnswer === 'object' && parsedLLMOutput.finalAnswer !== null) {
+                parsedLLMOutput.finalAnswer = JSON.stringify(parsedLLMOutput.finalAnswer);
+            }
+        }
         agent.store.getState().handleAgentFinalAnswer({agent, task, output: parsedLLMOutput});
         return parsedLLMOutput;
     }