Vercel Eve vs LangGraph vs Mastra: Picking an Agent Framework for Your Next Frontend Side Project

Vercel Eve is the new TypeScript-first agent framework, and it's going straight up against LangGraph and Mastra for the same weekend side projects. I've built the same small agent in all three: a recipe assistant that calls two tools (pantry lookup, unit conversion) and streams into a React chat UI. I'm judging them the way a frontend dev would. How fast do you get to a working stream? How painful are the tool definitions? Where does the thing actually run?

Short version: Mastra is the best default agent framework for TypeScript in 2026. Eve wins if you already live on Next.js and Vercel. LangGraph is the right tool for a problem most side projects don't have.

What is an agent framework, and do frontend devs actually need one?

An agent framework handles the loop around an LLM: call the model, run the tools it asks for, feed the results back, repeat until done, and stream all of it to the client. You can write that loop yourself in about 80 lines. You'll stop wanting to own it around the third time you debug a half-parsed tool call in the middle of a stream.

Tool calling: the model returns a structured request to run a function you defined (with a schema), and your code executes it and returns the result. Agent loop: repeating model call → tool execution → model call until a stop condition is met.

For a side project the framework's real job is boring plumbing. That means typed tools, a stream format your UI can render, retries, and a deployment target that doesn't fight you. That's what I'm measuring here, not benchmark scores on reasoning tasks.

Vercel Eve: best if you're already all-in on Next.js and Vercel

Verdict: pick Eve if your app is a Next.js project deployed on Vercel and you want the shortest path from npm install to a streaming agent in your UI.

Eve's pitch is tight integration. It's TypeScript-first and built by the team behind the AI SDK, and it's meant for the deployment platform you're probably already using. The DX payoff is real. Streaming lands in your React components without you thinking about wire formats, and deployment is just git push.

Eve is also very new, and its API is still moving, so I'm not going to paste snippets that might be wrong by next month. Instead, here's the stable AI SDK 6 agent that Vercel's agent tooling sits next to. If this shape feels comfortable, Eve will too:

// app/api/chat/route.ts
import { ToolLoopAgent, tool, stepCountIs, convertToModelMessages } from 'ai';
import { z } from 'zod';

const agent = new ToolLoopAgent({
  model: 'anthropic/claude-sonnet-5-5',
  instructions: 'You are a recipe assistant. Check the pantry before suggesting dishes.',
  tools: {
    pantry: tool({
      description: 'List ingredients currently in the pantry',
      inputSchema: z.object({ category: z.string().optional() }),
      execute: async ({ category }) => getPantry(category),
    }),
  },
  stopWhen: stepCountIs(8),
});

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = await agent.stream({ messages: await convertToModelMessages(messages) });
  return result.toUIMessageStreamResponse();
}

Pair that with useChat on the client and you have a streaming, tool-calling chat in one file. The catch is gravity. Every convenience pulls you further towards Vercel. That's fine for a side project on the Hobby tier, but keep an eye on function duration limits once your agent starts chaining slow tools.

Mastra: the best all-round agent framework for TypeScript

Verdict: Mastra is the one I'd tell most frontend devs to start with. It has the best local DX of the three, and it deploys anywhere.

Mastra is built on top of the AI SDK, so the model layer and streaming behave the way you'd expect. It then adds what the bare SDK doesn't give you: memory, workflows, evals, and above all mastra dev, a local playground where you can chat with your agent, inspect every tool call, and replay traces. I didn't expect that playground to matter as much as it does. With the other two I was squinting at console.log output from inside a stream. With Mastra I could just click the failing step.

// src/mastra/agents/recipe.ts
import { Agent } from '@mastra/core/agent';
import { createTool } from '@mastra/core/tools';
import { z } from 'zod';

const pantryTool = createTool({
  id: 'pantry',
  description: 'List ingredients currently in the pantry',
  inputSchema: z.object({ category: z.string().optional() }),
  execute: async ({ context }) => getPantry(context.category),
});

export const recipeAgent = new Agent({
  name: 'recipe-agent',
  instructions: 'You are a recipe assistant. Check the pantry before suggesting dishes.',
  model: 'anthropic/claude-sonnet-5-5',
  tools: { pantryTool },
});

Tool definitions are Zod in, typed result out, the same as the AI SDK. Deployment uses deployer packages for Vercel, Netlify and Cloudflare, or you can run it as a plain Node server on a VPS. That portability is the main reason it beats Eve for me. Side projects move hosts more often than we admit.

The downsides: the API has had real breaking changes between minors (pin your versions and read the changelog), and the docs sometimes lag behind the code. More than once I ended up reading the source on GitHub because a docs example used an older tool signature.

LangGraph: powerful, but overkill for most side projects

Verdict: only use LangGraph.js if your agent needs durable, branching, human-in-the-loop state. Otherwise you're paying a complexity tax for nothing.

LangGraph models your agent as an explicit graph of nodes and edges with checkpointed state. That's brilliant for long-running workflows. An approval step that waits two days for a human and then resumes exactly where it stopped is the textbook example. It's heavy for a chat assistant that calls two tools.

import { createReactAgent } from '@langchain/langgraph/prebuilt';
import { MemorySaver } from '@langchain/langgraph';
import { ChatAnthropic } from '@langchain/anthropic';
import { tool } from '@langchain/core/tools';
import { z } from 'zod';

const pantry = tool(async ({ category }) => JSON.stringify(await getPantry(category)), {
  name: 'pantry',
  description: 'List ingredients currently in the pantry',
  schema: z.object({ category: z.string().optional() }),
});

const agent = createReactAgent({
  llm: new ChatAnthropic({ model: 'claude-sonnet-5-5' }),
  tools: [pantry],
  checkpointSaver: new MemorySaver(),
});

const stream = await agent.stream(
  { messages: [{ role: 'user', content: 'What can I cook tonight?' }] },
  { streamMode: 'messages', configurable: { thread_id: 'demo' } },
);

The friction for frontend devs is the last mile. LangGraph streams LangChain message chunks, not AI SDK UI messages, so you either write an adapter or pull in a bridge package before useChat will render anything. The JS port also clearly trails the Python one: examples, community answers and new features show up in Python first. Expect a few Stack Overflow rabbit holes that end in a Python snippet you have to translate.

Which agent framework should you pick for a frontend side project?

Pick Mastra unless you have a specific reason not to. Pick Vercel Eve if you're on Next.js plus Vercel and want zero glue. Pick LangGraph only for stateful, resumable, multi-step workflows.

• DX: Mastra (playground plus traces) > Eve (least code) > LangGraph (most concepts to learn).
• Streaming to React: Eve and Mastra speak AI SDK formats natively. LangGraph needs an adapter.
• Tool-calling: roughly equal. All three use Zod schemas and typed execute functions.
• Deployment: Mastra is the most portable, Eve is the smoothest on Vercel, and LangGraph is easiest on its own managed platform.

Whichever you choose, add tracing on day one. Agent bugs are almost always "the model called the wrong tool with the wrong arguments", and you can't see that without traces. I covered a free setup in self-hosting Langfuse for LLM side projects, and Sentry will catch the runtime errors around it. If you're building the agent with an AI coding assistant, my Claude Code vs Cursor comparison covers which one handles multi-file TypeScript refactors better.

FAQs

Is Vercel Eve the same as the Vercel AI SDK?

No. The AI SDK is the lower-level toolkit for model calls, streaming and tool use. Eve is a higher-level framework for building agents in the same TypeScript ecosystem. If you only need one tool-calling chat endpoint, the AI SDK's agent class may be all you need.

Can I use Mastra without deploying to Vercel?

Yes. Mastra ships deployers for Vercel, Netlify and Cloudflare, and it also runs as a standard Node server, so a cheap VPS or a container works fine. That portability is its biggest advantage over platform-tied options.

Is LangGraph.js as good as the Python version?

It's capable, but it trails Python on examples, integrations and new features. If your team writes TypeScript and doesn't need graph-level state control, Mastra or the AI SDK will get you shipping faster.

Which TypeScript agent framework is best for streaming into a React UI?

Eve and Mastra, because both use AI SDK stream formats that useChat renders directly. LangGraph needs an adapter layer before its message chunks map cleanly onto UI messages.

Do I need an agent framework for a simple chatbot?

Usually not. A single route using the AI SDK's streamText with a couple of tools covers most chatbots. Reach for a framework once you need memory, multi-step workflows, evals or a proper local debugging loop.

Takeaway: start with Mastra, switch to Eve only if Vercel lock-in is a feature for you rather than a risk, and leave LangGraph for when your agent has to survive a restart halfway through a task.