Beyond Chat: Building Generative UI with Next.js and the Model Context Protocol (MCP)

For the past two years, interacting with AI has meant watching a cursor stream Markdown text inside a chat bubble. It was magical at first, but for complex business workflows, dumping raw JSON or paragraphs of text onto a user isn't an application—it's just a raw API response.

The next evolution of AI isn't better text; it's Generative UI. It’s about AI agents that don't just tell you the answer, but dynamically generate the exact interactive React components—buttons, charts, forms, dashboards—you need to take action.

To explore this, I built Manufact, an edge-deployed AI interface leveraging the Model Context Protocol (MCP) to bridge the gap between LLM reasoning and interactive React UIs. Here is a breakdown of the architecture.

The Core Problem: AI vs. The DOM

When building AI applications with Next.js and LLMs (like Gemini or Groq), the standard flow is linear:

User sends a prompt.
Backend hits the LLM.
LLM returns a text stream.
Frontend renders Markdown.

But what if the user asks, "Show me my sales data for Q3 and let me adjust the forecast"?

A standard LLM returns a Markdown table. A Generative UI agent returns a fully interactive chart and a slider component that recalculates state in real-time. To achieve this, the AI needs to stop returning plain text and start returning structured tool calls that the frontend can instantly map to UI elements.

Enter Manufact: The Architecture

Manufact is built on a modern Next.js stack, designed to seamlessly render dynamic UI components based on the AI's real-time intent.

1. The Model Context Protocol (MCP) Integration

Instead of hardcoding hundreds of custom API endpoints, Manufact utilizes the core concepts of the Model Context Protocol. MCP standardizes how AI models interact with external tools and data sources.

When a user submits a query, the LLM evaluates a registry of available tools (e.g., render_invoice_form, generate_kanban_board).

2. Streaming UI State

The hardest part of Generative UI is latency. You can't wait for the LLM to finish "thinking" before rendering the UI.

In Manufact, the backend streams the response. As the LLM streams its output, the backend parses the chunks for tool-call signatures. The moment a tool call is identified, the frontend intercepts it and dynamically mounts the corresponding React component—long before the AI has finished its sentence.

3. The Client-Side Component Registry

To make this secure and fast, the LLM doesn't actually write React code. Evaluating AI-generated code directly in the browser is a massive security risk and incredibly slow.

Instead, the frontend maintains a strict registry of pre-built, highly optimized React components:

// The Component Registry maps AI intents to safe React UIs
import { DynamicInvoice } from '@/components/ui/invoice';
import { InteractiveTable } from '@/components/ui/table';

export const UI_REGISTRY = {
  "invoice_generator": (props) => <DynamicInvoice {...props} />,
  "data_table": (props) => <InteractiveTable {...props} />,
};

When the LLM decides the user needs an invoice, it outputs a JSON object with type: "invoice_generator" and the required props. The React frontend simply looks up the key in the registry and renders the component with the AI's data.

Performance on the Edge

Because AI interactions require low latency to feel natural, Manufact relies heavily on Next.js edge runtimes. By keeping the component registry lightweight and utilizing streaming server components, the time-to-first-byte (TTFB) for dynamic UI generation is nearly instantaneous.

There are no heavy cold starts, and the state remains perfectly synced between the AI's context window and the user's browser session.

The Takeaway

We are moving away from chatting with AI to working through AI. By combining tool-calling protocols with dynamic React component registries, we can build interfaces that adapt to the user's exact needs in real-time.

Building Manufact proved that the future of frontend engineering isn't just about building static dashboards—it’s about building flexible, modular component systems that AI agents can orchestrate on the fly.

Want to see the code or try it out?

💻 Check out my full-stack architectures on GitHub
🚀 Test out my other real-time AI projects like Manufact Live Demo
Let's connect on LinkedIn! I am currently looking for a full-time Full-Stack or AI Engineering role where I can ship architectures just like this.

Command Palette