Framework Tour: The Same Agent, Five Ways

By the Syncfusion DevTutorials team · Last updated October 27, 2026

Frameworks run the agent loop for you. See what five popular frameworks give, what they hide, and how to choose one by your team's needs.

Framework Tour: The Same Agent, Five Ways

The Shop Helper team has a new idea. "Let us use a framework. Everyone else does."

So they pick the one they saw in a video. A week later, the helper gives a strange reply.

Nobody can see why. The loop runs inside the library, and they never turned on its tracing.

Then they find out it only works well with one company's models. They wanted to try another one.

This lesson shows what a framework does for you. It also shows how to choose one with your eyes open.

We take the same Shop Helper loop you built by hand and look at it five ways, once for each framework. Each time, you see which parts the framework does for you.

Simple lesson: frameworks run the loop for you, so pick one by what it gives and what it hides.

A Real-World Example

Think about making dinner.

• You can cook from scratch. You choose every step, but it takes longer.
• You can buy a meal kit. The chopping and the recipe are done for you.
• But a kit decides some things for you, like the sauce and the size.

A kit is great when it fits what you want. It is a pain when you need something it does not do.

A framework is a meal kit for agents. Your hand-written loop is cooking from scratch.

Simple lesson: a kit saves time only when it fits the meal you want.

What You Will Learn

In this lesson, you will learn:

1. What a framework is, and how it differs from a hand-rolled loop.
2. Why the five loop moves are still there inside every framework.
3. What a framework gives you and what it hides.
4. What five popular frameworks offer, checked against their docs.
5. How to choose one by your needs, and when to start without one.

The Loop You Already Know

Hand-rolled loop = the agent loop you write yourself, as in this course.

Your app code sends the chat, runs the tools, adds results and decides when to stop. The model only replies.

Press Play and watch who owns each box.

• The dashed boxes: your code does them.
• The grey box: the model's reply, the only part that is not yours.
• The run log: you can read every line, because you wrote it.
• The count: you write every box, including tracing and memory.

Simple lesson: in a hand-rolled loop, you see everything and you build everything.

What a Framework Is

Framework = a ready-made library that runs the agent loop and its common parts for you.

You give it your tools, your instructions and a model. It runs the five moves from The Agent Loop by Hand in its own code.

The moves do not go away. They just move into the library.

Most frameworks also let you set a step limit. Its name and default vary, so look it up.

Press Play and watch the shading.

• Blue boxes: the framework runs them for you.
• Half-blue boxes: the framework calls them, but you write what is inside, like your tools.
• Memory: one framework leaves it to you, the other has it built in.
• The count: you write fewer boxes, but not zero.

Simple lesson: a framework runs the same five moves, so everything you learned still applies.

What It Gives and What It Hides

A framework usually gives you a lot:

• Less code, because the loop is already written.
• Built-in tracing, so you can record each step.
• Streaming helpers, so replies appear as they are written.

• Many agents working together. There are two kinds:

  • A handoff note sends a job to a subagent, which reports back, as in Multi-Agent: Subagents, Handoffs, Orchestrators.
  • A full handoff passes the whole chat to another agent, which takes over. Some frameworks call this a "handoff".

It also hides things:

• It is harder to see why a step happened, because the loop runs inside the library.
• Some are built around one company's models, so switching models can be hard.
• They change often, so code from last year may not work today.

Press Play and watch the run log.

• Tracing off: you see the question and the reply, and nothing in between.
• The box icon: a loop move hidden inside the framework.
• Tracing on: the hidden steps appear, and you find the repeated lookup.
• The fix: you only know what to fix once you can see the steps.

Simple lesson: a framework saves code, but you must still be able to see what it did.

Five Frameworks

Here are five popular frameworks. Each fact below comes from its official docs.

Frameworks change fast. This table was checked in October 2026, so check the docs again before you choose.

• Claude Agent SDK: the loop and tools behind Claude Code, as a library. Python and TypeScript. It runs Claude models. It has built-in tools to read and edit files and run commands.
• OpenAI Agents SDK: a small set of parts: agents, handoffs, guardrails and sessions. Python and TypeScript. It uses OpenAI models first. Its docs show other providers through adapters.
• Vercel AI SDK: a TypeScript toolkit for AI apps. It works with many model providers. It has helpers for chat boxes on web pages.
• Mastra: a TypeScript framework for agents, workflows and memory. It reaches many providers through its model router.
• LangGraph: a lower-level runtime. You draw the steps as a graph and it saves the state. Python and TypeScript. Its docs also show full handoffs between agents.

Press Play and watch the ticks fill in.

• Language: three work in Python and TypeScript, two in TypeScript only.
• The loop: four run it for you. LangGraph gives you pieces to build your own.
• Memory: the AI SDK leaves it to you. Its docs show three ways to add it.
• A dash: it means not built in, or not found in the docs. It does not mean impossible.

Here is the shape of the OpenAI Agents SDK quickstart. It is a simplified sketch, copied from its docs, to read only.

from agents import Agent, Runner

agent = Agent(name="Assistant", instructions="You are a helpful assistant")
result = Runner.run_sync(agent, "Write a haiku about recursion in programming.")
print(result.final_output)

Notice what is missing. There is no loop in your code. The Runner does all five moves.

Further options: Google ADK, CrewAI, Strands Agents and Pydantic AI. Microsoft Agent Framework works in Python and .NET.

Simple lesson: the five frameworks give different parts, so read the table before you pick.

Choose by Need, Not by Fashion

The most popular framework is not always the right one. Ask these questions first:

1. Which language does your team write?
2. Which model providers do you want, now and later?
3. Do you need many agents? Do they report back, or take over the chat?
4. Do you need a chat window helper for a web page?
5. How much control do you need over each step?

Press Play and watch the columns drop out.

• Language: a Python team loses the two TypeScript-only columns.
• Model provider: only some are built for many providers.
• Many agents: a handoff note gets a report back. A full handoff passes over the whole chat.
• Chat window: one framework has ready-made helpers for it.

In this lab, the engine chooses with one clear rule:

1. Drop any framework without your language or a must-have part.
2. Count the parts you would like. The most wins.
3. If two tie, pick the one with fewer extras you did not ask for, because there is less to learn.

Press Play and watch the Shop Helper team choose.

• Must-haves: a loop and tools, in TypeScript. LangGraph drops out.
• Wanted parts: many providers, memory and tracing.
• The count: one framework gives all three.
• The pick: it is highlighted in green.

The exercise below uses the same rule. Its answer is the best fit by the rule, not the only one that could work. A missing tick may mean "you add it yourself". For example, Mastra workflows can also pause for a person and resume later.

Real teams weigh more than parts. They may look at the docs, the size of the community and the price of any paid add-ons. In this lab, the rule only counts parts.

Simple lesson: write your needs down first, then let them pick the framework.

Start Hand-Rolled, Move Later

You do not have to choose a framework on day one. You can start with a hand-rolled loop and move later.

The ideas from this course carry over, because every framework runs the same moves. Tools, answer forms, memory, guardrails and step limits all have a place to go.

The exercise uses this rule, in order:

1. If every step must be visible and reviewed, write the loop yourself.
2. If you need two or more built-in parts soon, use a framework.
3. If the helper has one small tool, write the loop yourself.
4. If you have not settled on a model yet, write the loop yourself for now.
5. Otherwise, a framework usually saves time.

Simple lesson: a hand-rolled loop is a fine start, because what you learned moves with you.

In Code

Here is the developer view. It shows the same Shop Helper in plain TypeScript first, then in each framework. The names are the course's own: lookup_order and order 1044.

The loop a framework replaces

type Call = { tool: string; input: string };
type Reply = { call?: Call; text?: string };

// The two tools. A framework still needs these from you.
const tools: Record<string, (input: string) => string> = {
  lookup_order: (id: string) =>
    id === "1044" ? "Rain jacket, shipped, late, arrives Monday 3 Nov" : "No such order",
  search_help_centre: (_q: string) => "Late parcels: say sorry and give the new date.",
};

// A scripted fake model: it reads how many tool results it has seen.
function fakeModel(results: string[]): Reply {
  if (results.length === 0) return { call: { tool: "lookup_order", input: "1044" } };
  if (results.length === 1) return { call: { tool: "search_help_centre", input: "late parcel" } };
  return { text: "Sorry, order 1044 is late. It arrives Monday 3 Nov." };
}

// The loop. This part is what a framework runs for you.
const STEP_LIMIT = 4; // hardest good job (3 steps) + 1
const results: string[] = [];
for (let step = 1; step <= STEP_LIMIT; step++) {
  const reply = fakeModel(results);               // send
  if (reply.text !== undefined) {                 // final answer?
    console.log(`step ${step}: final answer -> ${reply.text}`);
    console.log("stop reason: final answer");
    break;
  }
  if (reply.call === undefined) break;
  const run = tools[reply.call.tool];             // run the tool
  const out = run ? run(reply.call.input) : "Unknown tool";
  console.log(`step ${step}: ${reply.call.tool}(${reply.call.input}) -> ${out}`);
  results.push(out);                              // add, then repeat
}

Expected output:

step 1: lookup_order(1044) -> Rain jacket, shipped, late, arrives Monday 3 Nov
step 2: search_help_centre(late parcel) -> Late parcels: say sorry and give the new date.
step 3: final answer -> Sorry, order 1044 is late. It arrives Monday 3 Nov.
stop reason: final answer

• The tools: you write these in every framework. They are your shop.
• The fake model: a script that stands in for a real model, so the run is the same each time.
• The loop: send, check, run, add, repeat. A framework runs this part for you.
• The step limit: hardest good job plus one, as in The Agent Loop by Hand. That lesson has the full version.

In a Real App

Below is the same Shop Helper in each framework. Each block is a simplified sketch. Names and options often change between SDK versions, so check the docs before you copy.

Claude Agent SDK. Simplified sketch, checked against https://code.claude.com/docs/en/agent-sdk/custom-tools.md on 27 Oct 2026.

import { tool, createSdkMcpServer, query } from "@anthropic-ai/claude-agent-sdk";
import { z } from "zod";

const lookupOrder = tool(
  "lookup_order",
  "Find an order by its number. Returns item, status and arrival day.",
  { orderId: z.string().describe("Order number, like 1044") },
  async (args) => ({ content: [{ type: "text", text: await findOrder(args.orderId) }] })
);
const shop = createSdkMcpServer({ name: "shop", version: "1.0.0", tools: [lookupOrder] });

const prompt = "Where is my order 1044?";
for await (const message of query({
  prompt,
  options: { mcpServers: { shop }, allowedTools: ["mcp__shop__lookup_order"] },
})) {
  if (message.type === "result" && message.subtype === "success") console.log(message.result);
}

What it does for you: it runs the whole loop and hands your tool to Claude through a small in-process MCP server.

OpenAI Agents SDK (Python). Simplified sketch, checked against https://openai.github.io/openai-agents-python/tools/ and https://openai.github.io/openai-agents-python/ on 27 Oct 2026.

from agents import Agent, Runner
from agents.decorators import tool

@tool
def lookup_order(order_id: str) -> str:
    """Find an order by its number. Returns item, status and arrival day."""
    return find_order(order_id)

agent = Agent(
    name="Shop Helper",
    instructions="Help shop customers. Look up the order before you answer.",
    tools=[lookup_order],
)
result = Runner.run_sync(agent, "Where is my order 1044?")
print(result.final_output)

What it does for you: it reads the tool card from the function name, the types and the docstring. The Runner does all five moves.

Vercel AI SDK. Simplified sketch, checked against https://ai-sdk.dev/docs/agents/building-agents on 27 Oct 2026.

import { ToolLoopAgent, tool } from "ai";
import { z } from "zod";

const shopHelper = new ToolLoopAgent({
  model: "anthropic/claude-sonnet-5.5",
  instructions: "Help shop customers. Look up the order before you answer.",
  tools: {
    lookup_order: tool({
      description: "Find an order by its number. Returns item, status and arrival day.",
      inputSchema: z.object({ orderId: z.string() }),
      execute: async ({ orderId }) => findOrder(orderId),
    }),
  },
});

const prompt = "Where is my order 1044?";
const result = await shopHelper.generate({ prompt });
console.log(result.text);

What it does for you: ToolLoopAgent runs the loop and checks tool inputs against the zod schema. It stops after 20 steps by default.

Mastra. Simplified sketch, checked against https://mastra.ai/docs/agents/tools.md on 27 Oct 2026.

import { Agent } from "@mastra/core/agent";
import { createTool } from "@mastra/core/tools";
import { z } from "zod";

const lookupOrder = createTool({
  id: "lookup_order",
  description: "Find an order by its number. Returns item, status and arrival day.",
  inputSchema: z.object({ orderId: z.string() }),
  execute: async ({ orderId }) => findOrder(orderId),
});

const shopHelper = new Agent({
  id: "shop-helper",
  name: "Shop Helper",
  model: "openai/gpt-6.1-sol",
  instructions: "Help shop customers. Use lookup_order before you answer.",
  tools: { lookupOrder },
});
await shopHelper.generate("Where is my order 1044?");

What it does for you: the agent runs the loop, and the model router picks the provider from the provider/model string.

LangGraph. No code here. We could not confirm its tool helper with confidence. Its ready-made agent loop now lives in LangChain. See the LangGraph overview in the LangChain docs.

In every block, findOrder is your own shop code, the same in each framework.

Simple lesson: the tools stay yours in every framework, and only the loop moves into the library.

TL;DR

1. Framework = a ready-made library that runs the agent loop and its common parts for you.
2. Hand-rolled loop = the agent loop you write yourself, as in this course.
3. Same five moves = every framework still sends, replies, runs, adds and repeats.
4. Gives = less code, tracing, streaming helpers, handoff notes and full handoffs.
5. Hides = the steps inside, sometimes the choice of model, and it changes often.
6. Choose by need = language, providers, many agents, chat helpers and control.

Common mistakes

Check Your Understanding

Exercises

What to Remember

• A framework runs the agent loop for you. A hand-rolled loop is the one you write.
• The five loop moves are still there, inside the framework.
• Frameworks give less code, tracing, streaming and ways for agents to work together.
• They can hide steps, tie you to one provider, and change often.
• Choose by language, providers, many agents, chat helpers and control.
• You can start hand-rolled and move later. Your ideas carry over.

Next: Capstone: An Agent for Your App, put every choice together and test the whole helper.