Overview
We will be building a NextJS AI chat app that can dynamically access 900+ SaaS apps. You can pull any information from your authenticated apps, update docs and tickets, send emails, and do everything from this single app.
This is powered by Composio MCP, which allows dynamic, on-demand tool-loading so you don't have to worry about bloating the LLM context window, a remote workbench so LLMs can chain Composio tools together, and removes to-and-from latency from LLM calls, and also enables programmatically handling large tool responses.
You'll learn how to set up the project, build a clean chat UI, and then bring it to life with an agent that can think and respond. We'll also cover how to manage chat state, implement streaming for real-time interactions, and track multiple conversations.
Think of it this way: you're building an agent that can perform actions across many platforms. For example, it could be:
An agent for Slack
An agent for GitHub
An agent for Gmail
An agent for Notion
...and over 877* others, all combined in one.
By the end, you'll have a working AI agent that can use various toolkits to help you with pretty much everything, not just talk.
Here's a quick demo of the agent in action:
Prerequisites
Before we start, make sure you have a few things set up. Don't worry, nothing too complicated! 😉
Node.js: You'll need Node.js installed on your machine to run the Next.js project. You can use npm as the package manager or choose bun, yarn, whatever suits you.
Basic understanding of React and Next.js: We'll walk you through everything, but it helps if you're somewhat familiar with React and how Next.js handles routing.
Composio Account & API Key: This is super important! You'll need to sign up for a Composio account and grab your API key. This key is what lets your agent connect to all those awesome toolkits. You can sign up for an account here for free.
An LLM API Key (e.g., OpenAI, Anthropic, or others): Your AI agent needs a brain! You'll need an API key from OpenAI, Anthropic, or another provider. For this, I'll be using OpenAI Agents SDK, so the steps can change a little if you choose any other.
That's pretty much all you need to have ready.