Create an MCP App with json-render

Dive into dynamic dashboard creation with json-render in this hands-on course for developers building AI-powered applications. Learn how to generate brand-consistent UI from natural language prompts while validating AI output with structured JSON contracts. DX engineer Eve Porcello shows you how to define a controlled catalog of components using Zod schemas to keep AI-generated interfaces stable and maintainable.

Explore streaming AI-generated UI in real time, binding components to live data with state paths and two-way input binding, and automatically validating and repairing malformed output. The course culminates in packaging your application as an MCP tool that renders directly inside Cursor, demonstrating the architectural payoff of a catalog-first approach. By the end, you'll have a complete, working reference project you can adapt for your own generative UI applications.

Learning objectives
Generate brand-consistent dashboard UIs from natural language prompts using json-render.
Constrain and validate AI-generated UI with structured JSON contracts.
Define and enforce a controlled component catalog using Zod schemas.
Stream AI-generated interfaces progressively in real time.
Bind UI components to live data using state paths and two-way input binding.
Package and serve a generative UI project as an MCP tool in Cursor.
Export a production-ready React dashboard with no runtime dependencies.