Building Multi-Agent like application from scratch without any framework

Question

Multi-Agent from scratch without any framework

Have you ever wondered if it’s possible to create a multi-agent web application without relying on specialized agentic SDKs or frameworks? The answer is yes! By leveraging the standard OpenAI API, you can build an agentic AI application with just a straightforward approach. I accomplished this using the OpenAI Chat Completions API with TypeScript.

The Problem

I set out to create a learning hub for kids—an interactive platform that could answer questions across a variety of subjects such as space, marine life, earth, animals, and more.

The key requirements were:

• Flexibility: Easily add new subjects or domains.
• Adaptability: Seamlessly handle queries from new domains by updating LLM instructions.

A multi-agent approach was the perfect fit. Each agent would have its own set of instructions and report to a central “triage” agent.

Implementation Overview

All agent logic and interactions are managed in a single server.js file. Here’s the high-level workflow:

1. Maintain an agents object to keep track of all available agents.
2. Create a triage agent that determines which specialist agent should handle an incoming query.
3. Define a dedicated agent for each subject (e.g., space, marine life, history).
4. Route the user’s query to the triage agent.
5. Invoke the specialist agent identified by the triage agent to generate the final response.

This approach is simple, flexible, and easy to maintain. While it’s not a full agentic framework, it’s an excellent starting point for building agent-like applications with minimal overhead—no need for complex tool calling or handoffs.

Adding a New Subject

Expanding your app to cover new topics is straightforward. For example, to add a “History” agent, simply extend the agents object in server.js:

const agents = {
  // ... existing agents
  history: {
    name: 'Time Traveler',
    avatar: '⏰',
    color: '#FFD700',
    background: 'history-bg',
    instructions: 'You are a Time Traveler! Help kids learn about history...'
  }
};

I found this easy and straightforward !

Technical Stack -

• Frontend: HTML5, CSS3, Vanilla JavaScript
• Backend: Node.js, Express.js
• AI: OpenAI GPT-3.5 Turbo API
• Styling: Custom CSS with animations and gradients

If you are interested in complete implementation, checkout here