MCP Integration for AI Agents

Create an MCP App with json-render

Chapter 4 · MCP Integration for AI Agents

📺 Based on the LinkedIn Learning course "Create an MCP App with json-render" by instructor Eve Porcello, published 17 April 2026. View the original course →

Chapter 3 wired the catalog and registry up to a browser-facing UI. This closing chapter exposes the exact same catalog and components to AI agents instead, over MCP (Model Context Protocol) — no separate component system, no duplicated definitions.

The MCP Server

mcp/server.ts stands up an MCP server using createMCPApp from @jsonrender/mcp, communicating over stdio transport — the standard, simple way an MCP server talks to a connecting client over standard input/output rather than a network socket.

import { createMCPApp } from "@jsonrender/mcp";
import { catalog } from "../catalog/catalog";
import { dashboardSpec } from "../specs/dashboard";

const app = createMCPApp({
  catalog,
  specs: { dashboard: dashboardSpec },
  transport: "stdio",
});

app.start();

The Same Catalog, Reused

Notice the MCP server imports the exact same catalog object Chapter 2 built for the browser-facing pipeline — there's no separate, parallel definition of what components exist for the "AI agent" side of the app.

What Agents Can See

Once running, the MCP server exposes real, structured information an agent can query and act on:

The full component list — every entry in the catalog, so an agent knows what it's allowed to reference
Initial state — a starting point for whatever the agent is being asked to build or modify
Available specs — existing, named specs (like dashboard) the agent can inspect or extend, rather than starting from nothing

Testing With the MCP Inspector

The real, standard way to test an MCP server directly — without needing a full agent client wired up yet — is the MCP Inspector:

npx @modelcontextprotocol/inspector

Running this connects to the local MCP server and lets you browse its exposed tools directly — the same real catalog, initial state, and specs an actual AI agent would see, inspectable by hand before ever connecting a real agent to it.

The Core Value: Define Once, Render Anywhere

Tying the Whole Course Together

This is the real payoff Chapter 1 opened with: the same catalog, the same registry, the same specs serve two completely different consumers — a human, typing a prompt into Chapter 3's Dashboard Builder in a browser, and an AI agent, querying this chapter's MCP server directly. Neither consumer needed its own separate component system; both draw from the identical source of truth built in Chapter 2.

	Browser path (Ch. 3)	Agent path (Ch. 4)
Entry point	`app/api/generate/route.ts`	`mcp/server.ts`
Consumer	A human, via the Dashboard Builder UI	An AI agent, over MCP
Shared source	The same catalog, registry, and specs

Hands-On Exercises

Exercise 1

A new component is added to the catalog and given a real registry entry, but only the browser-facing dashboard picks it up — an AI agent connecting via MCP still doesn't see it. Explain, in your own words, the most likely cause, based on this chapter's own "same catalog" material.

📄 View solution

Exercise 2

Explain, in your own words, why testing with the MCP Inspector before connecting a real AI agent is a genuinely useful step, rather than an unnecessary extra one.

📄 View solution

Exercise 3

Summarize, in your own words, how each of this course's four chapters contributed to the final "define once, render anywhere" result — one sentence per chapter.

📄 View solution

Course Complete

mcp/server.ts: createMCPApp from @jsonrender/mcp, stdio transport, reusing the exact same catalog and specs as the browser path
Agents see the real component list, initial state, and available specs
Test with npx @modelcontextprotocol/inspector before connecting a real agent
The course's own core value: define components once, render anywhere — a human in a browser (Ch.3) and an AI agent over MCP (Ch.4) both draw from the identical catalog, registry, and specs built in Chapter 2
Create an MCP App with json-render is now complete — 4/4 chapters.