The best AI agent framework for a web app is the Vercel AI SDK if you want a chat or assistant inside your UI, and Mastra if you need a full agent backend in TypeScript. Both are free and open source, and both work with Next.js.
A web app has needs that a script does not: streaming replies, short server time limits, and users who are watching the screen. This guide picks frameworks with that in mind, whether you build a web app, a SaaS product or a site with an AI helper.
Quick answer
- Best to start with: Vercel AI SDK. Streaming chat UI and tool calling in one package.
- Best full agent framework in TypeScript: Mastra.
- Best for complex, long workflows: LangGraph.js.
- Best if you only use OpenAI models: OpenAI Agents SDK for TypeScript.
- Best for agents that act inside your UI: CopilotKit.
- Best for jobs that outlive a request: Inngest AgentKit.
Affiliate note: some links on this page may become affiliate links later. If you buy through them we may earn a small commission at no extra cost to you. It does not change our picks. Every framework below is free.
What makes a framework good for the web
A web agent lives behind a browser. That changes what matters. Here are the five things that decide the pick.
- Streaming: the user should see words appear, not stare at a spinner for 20 seconds.
- Language fit: if your app is TypeScript, an agent in TypeScript means one codebase, one deploy and shared types.
- UI hooks: ready-made helpers for chat boxes, tool results and approval buttons save days of work.
- Serverless fit: functions on hosts like Vercel have time limits. Long agent runs need a plan.
- Lock-in: can you swap the model provider without a rewrite?
Last updated: September 2026. Versions and plans change often, so check the official site before you commit.
Comparison table
| Framework | Best for | Language | UI helpers | Cost |
|---|---|---|---|---|
| Vercel AI SDK | Chat and streaming UI | TypeScript | Yes | Free, open source |
| Mastra | Full agent backend | TypeScript | Via AI SDK | Free (Apache 2.0 core) |
| LangGraph.js | Complex stateful flows | TypeScript | Streaming only | Free, paid hosting optional |
| OpenAI Agents SDK | OpenAI-only apps, voice | TypeScript | Voice and streaming | Free, you pay OpenAI |
| CopilotKit | Agents inside your UI | React, Vue, Angular | Yes | Free, cloud has paid tiers |
| Inngest AgentKit | Durable background agents | TypeScript | No | Free kit, Inngest plans vary |
| Genkit | Google Cloud and Firebase | TypeScript | No | Free, open source |
The best AI agent frameworks for web applications
Vercel AI SDK
Best to start with- Best forChat, assistants and streaming UI
- PriceFree, open source
- Works withReact, Next.js, Vue, Svelte, Node, Expo
The AI SDK is a toolkit, not a heavy framework. One core package talks to 20+ model providers (OpenAI, Anthropic, Google, Bedrock and more). A second layer gives you UI hooks for React, Vue and Svelte, so a streaming chat box takes a few lines.
It has a ToolLoopAgent that runs the loop for you: the model picks a tool, the tool runs, and the result goes back until the job is done. You do not need to be on Vercel to use it.
Pros
- Best streaming and UI story of any option
- Easy to swap model providers
- Small learning curve for web developers
Cons
- No built-in memory, evals or workflow engine
- Major versions change APIs, so pin your version
- Long jobs need extra tools
Vercel AI SDK example
An agent with one tool, then a Next.js route that streams it to the browser.
TypeScript code
// agent.ts
import { ToolLoopAgent, tool } from 'ai';
import { z } from 'zod';
export const supportAgent = new ToolLoopAgent({
model: 'openai/gpt-4o-mini',
instructions: 'You help customers check their orders.',
tools: {
orderStatus: tool({
description: 'Look up an order by id',
inputSchema: z.object({ orderId: z.string() }),
execute: async ({ orderId }) => ({ orderId, status: 'shipped' }),
}),
},
});
// app/api/chat/route.ts
import { createAgentUIStreamResponse } from 'ai';
import { supportAgent } from '@/agent';
export async function POST(request: Request) {
const { messages } = await request.json();
return createAgentUIStreamResponse({
agent: supportAgent,
uiMessages: messages,
});
}
Model names and options change between versions. Match the snippet to the version you install.
Mastra
Best full framework- Best forTeams that want agents, workflows and memory in TypeScript
- PriceFree, Apache 2.0 core
- Works withNext.js, React + Vite, Astro, Express, SvelteKit, Hono
Mastra is a TypeScript framework built for agents. It gives you agents, tools, workflows, memory, tracing and a local Studio to test them. You can bundle it into an existing Next.js app or run it as its own server.
It fills the gap the AI SDK leaves. The SDK is great for model calls and UI. Mastra adds the backend pieces, like saved memory and step-by-step workflows. Many teams use the two together.
Pros
- Everything in one TypeScript package
- Local Studio for testing and tracing
- Runs inside your app or as a separate server
Cons
- More concepts to learn than the AI SDK
- Needs a recent Node version (22.18 or newer to run TypeScript directly)
- Some folders use an enterprise license, not Apache
LangGraph.js
Best for complex flows- Best forLong, stateful workflows with branches and approvals
- PriceFree library, paid LangSmith hosting optional
- Install
npm install @langchain/langgraph @langchain/core
LangGraph.js lets you draw the agent as a graph: steps, branches and loops. It saves state, so a run can pause for a human approval and continue later, even after a crash. That is hard to build yourself.
It is low level. You write more code than with the AI SDK or Mastra. Pick it when the flow itself is the hard part, like a refund process with three approval steps.
Pros
- Durable runs that resume after failure
- Human approval built in
- Full control of every step
Cons
- More code and a steeper start
- Managed hosting is a paid product
- Overkill for a simple chat feature
OpenAI Agents SDK for TypeScript
Best for OpenAI and voice- Best forApps built on OpenAI models, voice agents
- PriceFree, you pay for OpenAI usage
- Works withNode and cloud runtimes
This SDK is small and clear. It gives you agents, handoffs between agents, guardrails, tracing, sessions, human approval and MCP tool support. It also supports realtime voice agents, which suits a talking assistant in the browser.
Pros
- Simple building blocks
- Good tracing and guardrails
- Voice agents included
Cons
- Built around OpenAI, so other models take more work
- No UI hooks of its own
CopilotKit
Best for in-app agents- Best forAgents that show UI and ask for approval
- PriceFree, open source. Cloud has a free offer and paid tiers
- Works withReact, Vue, Angular, React Native
CopilotKit is the front half of an agent app. It gives you chat, generative UI (the agent draws real components) and approval prompts. It does not replace an agent framework. It connects to one, such as LangChain, Mastra, Google ADK, CrewAI or Pydantic AI.
Use it when the agent should act on the page, for example fill a form or update a table, and ask the user first.
Pros
- Human-in-the-loop UI ready to use
- Works with many backends, including Python
Cons
- You still need an agent backend
- One more layer to learn
Inngest AgentKit
Best for background jobs- Best forAgents that run longer than one web request
- PriceFree kit. Check Inngest for plan prices
- Works withNext.js and other Node apps
Serverless functions stop after a time limit. An agent that researches for ten minutes will get cut off. AgentKit runs each step as an event that can retry on its own, so the job survives the limit and any failure. The user gets a result later, by email or a live update.
Pros
- Solves the serverless timeout problem
- Automatic retries per step
Cons
- Adds an event platform to your stack
- Not for quick chat replies
Genkit
Best for Firebase- Best forApps on Firebase and Google Cloud
- PriceFree, open source
- Works withNode, Cloud Run, Cloud Functions
Genkit is Google’s toolkit for AI flows in TypeScript. It has a local developer UI and deploys well to Cloud Run and Firebase. Its agent features are newer, so treat them as beta and pin your version.
Pros
- Smooth on Google Cloud
- Good local debugging UI
Cons
- Agent API still changing
- Smaller community than the top picks
How to choose for your web app
- You want a chat box or assistant in your app: use the Vercel AI SDK.
- The agent needs memory, workflows and tracing: use Mastra, and keep the AI SDK for the UI.
- You have a many-step process with approvals: use LangGraph.js.
- You only use OpenAI, or want voice: use the OpenAI Agents SDK.
- The agent should edit things on the page: add CopilotKit on the front end.
- Jobs run for minutes: put them in Inngest AgentKit, not in a request.
- You are on Firebase: look at Genkit.
Not sure what an agent framework does? Read what an AI agent framework is first. For the full list across languages, see the best AI agent frameworks.
Where should the agent run?
You have three places to put agent code. Pick by how long the job takes.
Inside a route handler
Best for chat replies that take a few seconds. Simple and fast to ship. Watch your host’s time limit.
A separate agent server
Best when the agent uses Python or needs a long-running process. Your web app calls it over HTTP.
A durable job runner
Best for tasks that take minutes or hours. The user gets the result later.
What about a Python backend?
Many web apps keep a React or Next.js front end and a Python agent behind an API. That is fine. Put the agent in FastAPI, stream results to the browser, and use CopilotKit or your own hooks for the UI. See the Python framework guide for those options. For agent tools focused on the build process itself, see the frameworks for AI development list.
Free vs paid: what you really pay
All the libraries are free. Your bill is the model calls, plus hosting. Some vendors sell optional extras: LangSmith hosting for LangGraph, CopilotKit Cloud, and Inngest plans. You can skip all of them at the start.
Watch out
A public chat endpoint can be abused. Add rate limits per user, cap the number of tool steps, and set a monthly spend limit with your model provider.
Mistakes to avoid
- Running long agents in one request. Serverless time limits will cut them off. Use a job runner or a separate server.
- Putting API keys in the browser. Call the model from your server only.
- Skipping approvals on risky tools. Anything that sends, buys or deletes needs a user click.
- Not streaming. A 15 second silent wait feels broken. Stream tokens and tool progress.
- Not pinning versions. These libraries move fast and majors change APIs.
- Starting with many agents. Build one agent with two tools first.
Our pick
Start with the Vercel AI SDK for any web app that needs an assistant. Add Mastra when you need memory and workflows, and LangGraph.js when the process itself is complex. Use CopilotKit for approvals in the UI and Inngest for long jobs.
FAQ
What is the best AI agent framework for a web app?
The Vercel AI SDK for most teams, because it handles streaming and UI. Choose Mastra if you need a full agent backend in TypeScript.
Can I build AI agents with JavaScript or TypeScript?
Yes. Every framework above runs on Node, and most work with Next.js, React and other web stacks.
Do I need LangChain for a web app agent?
No. LangGraph.js is useful for complex flows, but the AI SDK or Mastra is simpler for most web features.
Can AI agents run on serverless hosting?
Short ones can. Long ones will hit the time limit, so use a durable job runner or a separate server.
Are these frameworks free?
Yes, all are open source. You pay for the model API and your hosting.