A visual guide for curious minds

Agentic AI, APIs & MCP

Four big ideas behind modern AI β€” explained with analogies, pictures, and a build-it-yourself walkthrough. No jargon left standing.

1

Agentic AI

The one-sentence version: a normal AI answers β€” an agentic AI gets things done. You give it a goal, and it figures out the steps, uses tools, checks its own work, and keeps going until the goal is met.

Cartoon robot given the goal 'plan a birthday party', breaking it into a checklist and using tools like a calendar, phone, and oven in a think-act-check-repeat loop.
Agentic AI: one goal in β†’ a loop of thinking and tool-use β†’ the job done.

The analogy β€” a vending machine vs. an intern

A regular chatbot is a vending machine: put in a question, a snack pops out. One shot, done. An agentic AI is a new intern: say β€œPlan the office party,” and they make a to-do list, book the room, order pizza, text everyone, and come back when it's finished.

The loop that makes it "agentic"

1. Think β€” break the goal into steps 2. Act β€” use a tool 3. Check β€” did it work? 4. Repeat β€” until done
Everyday example: You say β€œFind the cheapest flight to New York next Friday and put it on my calendar.” It searches flights (tool 1) β†’ compares prices (thinking) β†’ picks the cheapest β†’ adds a calendar event (tool 2) β†’ tells you it's done. One goal, five actions. That's agentic.

The key idea: agents need tools to actually do things in the real world. That's exactly where APIs and MCP come in. πŸ‘‡

2

API Calls

Theory: an API (Application Programming Interface) is a messenger that lets two pieces of software talk using agreed-upon rules. An API call is one round-trip: you send a request, you get back a response.

Restaurant analogy for an API: your app is the customer, the API is the waiter carrying a request, the server/database is the kitchen sending back a response.
An API is the waiter between your app and the kitchen (the server).

The analogy β€” a waiter at a restaurant

You (your app) are the customer. The kitchen is a giant server you can't walk into. The API is the waiter: you give your order (the request); the waiter brings your food (the response). You never need to know how the kitchen cooks β€” just how to order.

A real example β€” weather

Your weather app doesn't own a satellite. It makes an API call:

REQUEST:   GET weather for Austin, TX

RESPONSE:  { "temp": 98, "sky": "sunny", "humidity": 40 }

The reply comes back as tidy data (usually JSON, like above). Every refresh is another API call. You already use them constantly: β€œLog in with Google,” a live game leaderboard, or Google Maps inside Uber β€” all API calls.

Deep dive

Both Sides of an API Call

Let's follow one real request from start to finish β€” what your side sends, how the other end finds what you asked for, and how the answer travels back. This is a live example: the data below was fetched from a real weather server.

Both sides of an API call: the client sends a request across the internet, the server receives it, looks up data in a database, builds a reply, and the response travels back to the client to be shown on screen.
The full round-trip: request out β†’ server does the work β†’ response back.

Our real example: "What's the weather in Austin right now?"

We'll call a free public weather API (Open-Meteo). Austin sits at latitude 30.27, longitude -97.74 β€” so we ask for exactly that spot.

1
Client side Β· your app

Send the request

Your app writes a tiny message and mails it to the server's address (api.open-meteo.com). The question is baked right into the URL β€” the part after ? holds the inputs (which coordinates, what data).

GET /v1/forecast?latitude=30.27&longitude=-97.74&current=temperature_2m,relative_humidity_2m,wind_speed_10m  HTTP/1.1
Host: api.open-meteo.com
User-Agent: curl/8.13.0
Accept: */*

☝️ Real request. GET = "please give me data." The Host is who to deliver it to. Those inputs after the ? are how the server knows exactly what you need.

2
Server side Β· the other end

Receive & route it

The server reads the address on the envelope (/v1/forecast) and hands it to the right piece of code β€” like a mailroom sorting a letter to the correct department.

3
Server side Β· the other end

Get what it needs

This is the "how does it get what it needs" part. The server takes your inputs (Austin's coordinates) and looks up the answer β€” reading from its weather database / models. It never shows you this messy work; it just fetches the numbers.

4
Server side Β· the other end

Build the reply

It packages the numbers into a neat, agreed-upon format β€” JSON β€” and stamps it with a status code (200 OK = success), then sends it back.

HTTP/1.1 200 OK
Content-Type: application/json

{
  "latitude": 30.27, "longitude": -97.75,
  "current": {
    "time": "2026-07-08T05:00",
    "temperature_2m": 28.6,
    "relative_humidity_2m": 64,
    "wind_speed_10m": 12.3
  },
  "current_units": { "temperature_2m": "Β°C", "wind_speed_10m": "km/h" }
}

☝️ The actual response from the live server. Austin was 28.6 °C, 64% humidity, 12.3 km/h wind at that moment.

5
Client side Β· back home

Response arrives & gets used

Your app receives the JSON, plucks out temperature_2m, and paints it on screen: "Austin: 29Β°C β˜€οΈ". The user never sees any of the machinery β€” just the answer.

πŸ”¬ Run this exact call yourself β€” paste this into any browser and hit Enter. You'll get live JSON back, straight from the server, no app or code needed:
https://api.open-meteo.com/v1/forecast?latitude=30.27&longitude=-97.74&current=temperature_2m
Change the numbers to your own city's latitude/longitude and watch the answer change. That's you being the client.
πŸ’‘ The whole loop: your inputs ride inside the request β†’ the server uses them to look up or build an answer β†’ it ships the answer back as JSON with a success stamp β†’ your app reads it and shows it. Request out, work in the middle, response back.
3

MCP β€” Model Context Protocol

Theory: MCP is a universal standard that lets an AI connect to tools, apps, and data β€” all in the same way. Instead of a custom connection per tool, MCP gives every tool one shared plug shape.

MCP as a universal USB-C plug: one AI assistant connects through a single standard port to many tools β€” Gmail, Calendar, a photo app, a database, a browser, weather.
MCP is USB-C for AI: one universal port into many different tools.

The analogy β€” USB-C

Remember when every phone had a different charger? Then USB-C arrived β€” one plug for laptop, phone, headphones, monitor. Before MCP, every AI-to-tool link was a custom cable (Gmail? build one. Calendar? build another). With MCP, tools expose themselves through one standard port, so any MCP-speaking AI plugs in instantly. Build it once, works everywhere.

Right now: the assistant that generated the pictures on this page is connected through MCP to an image generator, plus Gmail, Notion, a web browser and more β€” no hand-built integration for each. That's why it can pick up lots of tools fast, which is exactly what makes an agent powerful.
4

API vs MCP

They're not rivals β€” MCP usually uses APIs underneath. But they solve different problems.

Side by side: API is a single custom cable between one app and one service; MCP is a universal hub connecting one AI to many tools. Note: MCP often uses APIs underneath.
An API is one door. MCP is a universal door frame β€” and behind many doors, an API still does the work.
APIMCP
What it isA messenger between two specific programsA universal standard connecting AIs to many tools
AnalogyA waiter for one restaurantUSB-C β€” one plug for everything
Built forSoftware talking to softwareAI models talking to tools
EffortCustom-built for each pairingBuild once, works with any MCP AI
Who "speaks" itDevelopers writing codeThe AI model itself, on the fly
πŸ’‘ Remember this: an API is a door between two rooms. MCP is a standard door frame so an AI can open any room's door the same way β€” and behind many of those doors, an API is still doing the actual work.
5

A Use Case You'll Actually Relate To

It's Sunday night. You have a bio test Thursday, an English essay due Wednesday, soccer practice Tuesday and Thursday, and your notes are a mess of half-finished Google Docs. You're not lazy β€” you're overwhelmed. What if you had a teammate who just... handled the plan?

A stressed student at a messy desk on one side, and a friendly AI agent organizing their calendar, checklist, and quiz cards on the other.
Meet the Study-Buddy Agent β€” you bring the goal, it brings the plan.

Say you tell it one thing:

πŸ—£οΈ "I have a bio test Thursday. Help me be ready."

Watch the agentic loop (the same Think β†’ Act β†’ Check β†’ Repeat from the top) kick in:

Think β€” "4 days left, ~5 topics, practice Tue & Thu are busy" Act β€” reads your notes, builds a 3-day study plan Act β€” drops study blocks into your calendar (around practice) Act β€” quizzes you on chapter 4, spots you keep missing osmosis Check β€” you nailed today's quiz? Move on. Missed it? Re-drill tomorrow Repeat β€” adjusts the plan every day until test day

Notice what's happening: it uses tools (your notes, your calendar, a quiz maker) β€” reaching each one through an API or an MCP connector, exactly like the earlier sections. That combination β€” a goal + a loop + real tools β€” is agentic AI. And it's completely buildable by a beginner.

πŸš€ Ideas you could build β€” for you or your community

Each is just "a goal + a loop + a couple of tools." Start tiny. The best ones solve a real problem for real people.

πŸ“š

1. Study-Sprint Coach

Paste your notes; it quizzes you, tracks which topics you keep missing, and drills your weak spots harder before a test.

Goal: "Get me test-ready." Β· Tools: your notes + a quiz generator + a timer
🎬

2. Club / Event Planner

"Organize the anime club movie night." It finds a date everyone's free, makes a flyer, messages members, and books the room.

Goal: "Run our event." Β· Tools: calendar + group chat + an image maker
πŸŽ“

3. College-App Wrangler

Tracks every school's deadline, checks what each one requires, drafts essay outlines, and nags you about what's left.

Goal: "Don't miss a deadline." Β· Tools: a spreadsheet + calendar + reminders
πŸ’Έ

4. Money & Shifts Tracker

Logs your part-time shifts and allowance, sorts your spending, and tells you if you can actually afford those concert tickets.

Goal: "Keep my money straight." Β· Tools: a spreadsheet + a math tool
πŸ—£οΈ

5. Language Practice Partner

Chats with you in Spanish at your level, gently fixes mistakes, and remembers the words you keep forgetting to review later.

Goal: "Help me get fluent." Β· Tools: a chat model + a memory file
πŸ€

6. Bonus: Practice Buddy

Builds a workout or drill plan, adjusts it based on how your last session went, and logs your progress over the season.

Goal: "Make me better." Β· Tools: a log file + calendar
πŸ§‘β€πŸ«

7. Homework Helper

Tutors younger kids at your school β€” asks what they're stuck on, explains it simply, and quizzes them until it clicks.

Goal: "Help a kid learn." Β· Tools: a chat model + a topic list
🌐

8. Family Translator

Turns school notices into a family's home language and answers their questions, so language is never a barrier.

Goal: "Break the language barrier." Β· Tools: a chat model + the notice text
🍎

9. Volunteer Scheduler

Keeps a food bank or club's shifts filled β€” tracks who signed up, messages gaps, and reminds people before their slot.

Goal: "Keep shifts filled." Β· Tools: a spreadsheet + a messenger
🌎 Build it responsibly. You're the human in charge. AI can hallucinate (invent facts β€” so verify anything that matters), it can be biased (ask: is this fair to everyone?), and it handles data (never paste passwords or someone else's private info; know where it goes). The leader's question is always "should I?" β€” not just "can I?"
Full walkthrough

From Stage 0 to Launch: "The Group-Project Rescuer"

Let's take one idea from a shower-thought to a thing that actually runs. The scenario: a 4-person history project, due Friday, and β€” surprise β€” nobody knows who's doing what. We'll build an agent that keeps the group on track.

A roadmap from Stage 0 (the itch) through goal, tools, the loop, build MVP, to launch.
Every agent goes through these same stages. Nothing here needs a CS degree.
Stage 0 Β· The Itch

Notice a real, annoying problem

Every good build starts with a genuine "ugh, I wish something just handled this." Ours: group projects fall apart because no one tracks who's doing what, and you find out it's all undone the night before. Rule: pick a problem you personally have β€” you'll know if it's working.

Stage 1 Β· The Goal

Write it as ONE sentence

If you can't say it in a sentence, it's too big. Ours:

🎯 "Split our project into tasks, remind each person daily, and warn me if we're falling behind before Friday."
Stage 2 Β· The Tools

List what it needs to touch the real world

An agent's "brain" can only think β€” tools are its hands. For each thing it must do, name a tool (and remember: it reaches these through APIs / MCP, exactly like the earlier sections).

β€’ A task list β€” to store who does what  β†’  a simple spreadsheet or text file
β€’ A clock/calendar β€” to know how many days are left  β†’  a date tool
β€’ A messenger β€” to nudge people  β†’  a Discord or email API

Stage 3 Β· The Loop

Design the Think β†’ Act β†’ Check cycle

This is the heart. Write it in plain English before any code:

Think β€” how many days left? who hasn't finished their task? Act β€” message anyone who's behind: "Hey, your section is due in 2 days πŸ‘€" Act β€” if we're dangerously behind, alert you (the leader) Check β€” did anyone mark their task done? update the list Repeat β€” run this once every morning until Friday
Stage 4 Β· The Pieces

Pick your parts (in plain English)

β€’ The brain β€” an AI model (e.g. Claude) that decides what to say
β€’ The hands β€” MCP connectors to Discord + a Google Sheet (so you don't hand-code each integration)
β€’ A place to run β€” your laptop is fine to start; later, a free cloud scheduler so it runs every morning on its own

Stage 5 Β· Build the MVP

Make the smallest version that works

Don't build all of it. Build one tool + one loop. Version 1 = just read the task list and message whoever's behind. Here's the whole thing as readable pseudo-code:

# --- The Group-Project Rescuer (MVP) ---
tasks = read_sheet("project_tasks")      # the TOOL: a spreadsheet
days_left = deadline("Friday") - today()

for person in tasks:
    if person.status != "done":
        # THINK: ask the AI to write a friendly nudge
        msg = ai("Write a 1-line nudge to " + person.name +
                 ". Their part '" + person.task +
                 "' is due in " + days_left + " days.")
        send_discord(person.name, msg)   # ACT: the messenger TOOL

if count_unfinished(tasks) > 2 and days_left <= 2:
    send_discord("YOU", "⚠️ Heads up: 3 tasks still open, 2 days left!")  # CHECK + alert

That's ~10 lines and it already does something real. Ship this first.

Stage 6 Β· Watch It Run

Test it, then let it loop

Run it once by hand and read what it does β€” did it message the right people? Good. Now schedule it to run every morning at 8am (a free scheduler does this). Congrats: it's now an autonomous agent working while you sleep.

Stage 7 Β· Level Up

Add one improvement at a time

Only after v1 works: let it read replies and auto-update the sheet Β· draft the actual project outline Β· celebrate when someone finishes Β· handle multiple projects. Each upgrade = one more tool, one more line in the loop. That's the whole game.

🧭 The universal recipe: a real itch β†’ a one-sentence goal β†’ a short list of tools β†’ a Think-Act-Check loop β†’ the smallest version that runs β†’ then level up. Every agent β€” from a billion-dollar startup's to your class project's β€” is built exactly this way.
6

Set One Up & Watch It Work

No coding required to start. Three tiers, easiest first.

πŸ₯‡ Easiest β€” watch an agent + MCP right now (0 setup)

Open any modern AI assistant (like Claude) and ask:

"Search the web for today's top science headline,
 then make me an image about it."

Watch it think (plan) β†’ call a web tool via MCP β†’ call an image tool via MCP β†’ hand you the result. That chain β€” goal β†’ tools β†’ result β€” is an agent using MCP. You just watched it. πŸŽ‰

πŸ₯ˆ Beginner build β€” add your first MCP connector (~10 min, no code)

  1. Open Claude Desktop β†’ Settings β†’ Connectors.
  2. Click Add and pick a ready-made one (web-search or filesystem).
  3. Ask: β€œList the files in my Documents folder.”
  4. What you're seeing: Claude just made an MCP connection and used a tool. That's the whole magic, hands-on.

πŸ₯‰ See a raw API call with your own eyes (~5 min, no code)

  1. Paste this into your browser:
    https://official-joke-api.appspot.com/random_joke
  2. Hit Enter. The raw JSON response appears β€” that's exactly what an app receives from an API call.
  3. Refresh a few times β€” each refresh is a new API call returning new data.

πŸ† Build a tiny agent (~20 min, a little Python)

The classic starter is a tool-using loop: a script that takes a goal, lets the AI pick a tool, runs it, feeds the result back, and repeats β€” printing its Think β†’ Act β†’ Check steps so you can literally watch it reason.

πŸ“Œ Recap in one breath

  • Agentic AI β€” give it a goal; it plans, uses tools, and checks itself in a loop.
  • API call β€” a waiter carrying a request/response between two programs.
  • MCP β€” USB-C for AI: one universal way to plug an AI into many tools.
  • API vs MCP β€” a specific door vs. a universal door frame (MCP often uses APIs behind the scenes).
  • Responsible AI β€” you're the human in charge: verify, protect data, and ask "should I?"