Composable AI Agents for the Web: BaseAI’s Modular Approach to AI Development

Ahmad Hassan
7 min readOct 3, 2024

--

Introduction

A few days ago, I was deep into developing my Final Year Project that involved an AI feature for classifying different transactions when I hit a wall. The existing AI frameworks I was using were clunky, overly complex, and honestly felt disconnected from the current streamlined world of web development. I needed something modular, efficient, and developer-friendly — something that didn’t make me feel like I was battling an outdated system. That’s when I came across a tweet from Ahmad Awais:

The Tweet from Ahmad Awais

“Existing AI frameworks suck for web devs. They’re mostly built for research and written in Python. Most developers avoid using old bloatware, which is filled with hundreds of lines of boilerplate code to perform simple tasks. We’re fixing all this.” — Ahmad Awais, CEO of Langbase.

Intrigued, I dug deeper into what Ahmad was talking about. He and his team had just released BaseAI, a web AI framework that promised to solve the very pain points I was facing. His description of the framework — modular, multi-agent systems that could interact seamlessly — felt like the solution I didn’t know I needed. I decided to give it a try.

I went back to my desk, opened up VS Code, and started experimenting with BaseAI. The simplicity was immediately noticeable. Within a few hours, I had created a multi-agent system that could fetch data, classify text, and self-correct errors in a way that felt almost magical.

Breaking Away from Tradition with BaseAI

That moment of discovery felt like a game-changer. Here I was, tangled up in outdated AI frameworks, fighting to make them work with modern web development practices, when BaseAI swept in and transformed the entire approach for me. Instead of battling layers of boilerplate code, I found myself building AI agents with the same ease I’ve come to expect from frameworks like React or Next.js.

BaseAI isn’t just another AI tool — it’s built for developers like us who don’t want to be held back by clunky, research-focused setups. It turns the complex world of AI development into something as intuitive as piecing together modular components, allowing you to create powerful, multi-agent systems that feel less like research projects and more like real, scalable web apps.

In this blog, I’ll walk you through my experience with BaseAI — from building agents that handle data fetching and text classification to leveraging its incredible Pipe feature that lets AI agents communicate and work together seamlessly. Along the way, I’ll share how BaseAI’s built-in capabilities — like self-healing agents and memory systems — solved real problems I faced and why they can do the same for you.

What is Composable AI?

Just like React lets you build user interfaces by nesting components, or Docker enables you to compose multiple services into one deployable unit, BaseAI introduces a similar modularity to AI development. With BaseAI, you can create composable AI agents — agents that act independently or collaborate as part of a larger, multi-agent system. Whether they’re fetching data, classifying text, or working together to solve a problem, these agents bring a new level of flexibility and simplicity to AI development, especially for web developers.

What Does Composable AI Mean?

At its core, composable AI refers to the ability to create AI systems by connecting smaller, independent “agents.” Each of these agents can handle specific tasks, and they can be combined like building blocks to form more complex AI applications. Think of an AI system as a collection of interconnected agents, each performing a specialized function (e.g., language processing, fetching data, making decisions).

The modularity that BaseAI offers allows you to:

  • Develop independent AI agents.
  • Compose these agents together for more complex tasks.
  • Reuse agents across different AI applications.

Architecture of BaseAI

To fully understand the potential of composable AI, it’s helpful to understand the architecture of BaseAI and how it works under the hood.

Core Components of BaseAI:

  1. Agents: The core units of the AI system. Each agent can perform a task like natural language processing (NLP), image recognition, or decision-making.
  2. Agentic Pipes: These allow agents to communicate with each other. Think of pipes as the routes through which data flows between agents, much like API calls.
  3. Agentic Tools: Each agent has access to tools, such as external APIs or data sources, to accomplish tasks.
  4. Agentic Memory: Each agent can store and retrieve data using BaseAI’s built-in memory system, which can utilize RAG (Retrieval-Augmented Generation) and other techniques for efficient data handling.
Architecture of an Example BaseAI Application

The above diagram shows the modular structure of the BaseAI framework, showcasing how it allows web developers to build complex AI systems by composing agents, tools, memory, and data pipelines.

Building an AI System with BaseAI: A Practical Example

Let’s now walk through a practical example of how you can compose AI agents using BaseAI.

Step 1: Setting Up Your Environment

First, install BaseAI in your project:

npm i @baseai/core

Step 2: Define Your First AI Agent

Let’s start by creating a basic agent that handles text classification.

// baseai/pipes/text-classifier-agent.ts
import { PipeI } from '@baseai/core';

const textClassifierPipe = (): PipeI => ({
apiKey: process.env.OPENAI_API_KEY!, // Use your API key
name: 'text-classifier',
description: 'Pipe to classify text as positive, negative, or neutral',
status: 'private',
model: 'openai:gpt-4o-mini',
stream: true,
json: false,
store: true,
moderate: true,
top_p: 1,
max_tokens: 1000,
temperature: 0.7,
presence_penalty: 1,
frequency_penalty: 1,
stop: [],
tool_choice: 'auto',
parallel_tool_calls: false,
messages: [{ role: 'system', content: `You are an expert at classifying sentences
as positive, negative or neutral. You will classify the sentences into those types` }],
variables: [],
memory: [],
tools: []
});

export default textClassifierPipe;

This agent is now capable of classifying text inputs into basic categories. In practice, this agent could connect to a more sophisticated NLP model.

Step 3: Test it Locally

With BaseAI’s local-first development, you can test these agents directly on your local machine with no cloud costs involved. Debugging these agents is also as easy as using standard JavaScript console logs.

// index.ts
import 'dotenv/config';
import textClassifierPipe from './baseai/pipes/text-classifier-agent.ts';
import { Pipe, getRunner } from '@baseai/core';

const pipe = new Pipe(textClassifierPipe());
const message = 'Ali is a good person';

async function run() {
const { stream } = await pipe.run({
messages: [{ role: 'user', content: message}],
stream: true
});

const runner = getRunner(stream);


runner.on('connect', () => {
console.log('Stream started.\n');
});

runner.on('content', content => {
process.stdout.write(content);
});

runner.on('end', () => {
console.log('\nStream ended.');
});

runner.on('error', error => {
console.error('Error:', error);
});
}

run();

Step 4: Start the Server and Run the Pipe

To deploy it locally, you need to start the BaseAI server by running the following command in your terminal:

npx baseai@latest dev

Inorder to run the pipe, you will need to run the index.ts file. This will be done in a separate terminal to ensure both the BaseAI server and your app are running:

npx tsx index.ts

This will run the LLM model and classify the sentence you passed:

The sentence "Ali is a nice person" is positive.

The program runs locally and displays the response in your terminal.

Benefits of Composability

The modular nature of BaseAI brings several key benefits to AI development, especially for web developers:

  1. Flexibility: Agents can be easily added, modified, or removed from a system without affecting the overall structure. You can design AI systems that are easily adaptable to changing requirements.
  2. Scalability: By composing AI agents, you can scale your system incrementally. Instead of writing monolithic AI models, you can create small agents that each handle a part of the overall task. These agents can be scaled independently.
  3. Ease of Maintenance: Modular systems are inherently easier to maintain. If one agent encounters an issue, you can debug and fix it in isolation without impacting other parts of the system.
  4. Reusability: Once you’ve created an agent for a task, you can reuse it in multiple projects or across different AI pipelines, just as you would with React components or Docker images.

Conclusion

BaseAI’s composable, modular approach to AI development is a game changer for web developers. By allowing developers to create and manage AI systems as easily as they would with React components or Docker containers, BaseAI bridges the gap between AI complexity and web development simplicity.

With the ability to combine agents, tools, and memory, developers can build sophisticated AI systems with minimal friction. Whether it’s scaling up a project, maintaining modularity, or adding new features on the fly, BaseAI makes AI development approachable and practical for today’s JavaScript/TypeScript-driven web environments.

The future of AI development doesn’t have to be complicated — BaseAI proves that with the right tools, AI can be as simple as building with blocks.

Try it out for yourself

Ready to dive in and experiment with BaseAI? You can access the code and example directly from my GitHub repository. Feel free to clone the repo, explore the code, and try building your own AI systems using the modular approach of BaseAI.

BaseAI Documentation: baseai.dev/docs

Langbase: langbase.com

GitHub Repository: BaseAI’s Modular Approach to AI Development

--

--

Ahmad Hassan
Ahmad Hassan

Written by Ahmad Hassan

I am a Computer Science student at Fast NUCES, passionate about cloud technologies and coding. I love solving problems and sharing insights through articles.

No responses yet