MCP Dynamic Form UI (PoC)

What it does

This proof-of-concept demonstrates how MCP apps can deliver fully dynamic, data-driven form UIs inside AI assistant interfaces. Rather than hardcoding screens, the MCP server emits a FormSpec JSON contract that drives a React widget — meaning the UI adapts to any workflow without code changes. The included demo implements a multi-step case management flow (classification, facts, parties, review, routing) using a Node.js MCP server and a Next.js widget.

The architecture validates the full MCP Apps stack: ui:// resource URIs for inline HTML delivery, PostMessageTransport for widget-host communication, and a devhost bridge for local development against any MCP-capable host.

Key features

• FormSpec-driven rendering — the server declares field types, visibility rules, required conditions, and select options; the widget renders them automatically, no per-step UI code required
• Full validation pipeline — backend enforces required fields, type checking, conditional rules (e.g. justificativaSigilo required when sigilo=true), and draft vs. complete submission modes
• Inline UI delivery — the ui://nf/forms.html resource is served inline by the MCP server for maximum compatibility, including ChatGPT Connectors
• Devhost for local testing — built-in Next.js devhost page proxies widget interactions to the MCP server without needing a live AI host
• ChatGPT Connector compatible — expose port 4000 via HTTPS (e.g. ngrok) and register as a ChatGPT Developer Connector

Installation

This is a local development proof-of-concept — no npm package is published.

git clone https://github.com/DevJoaoLopes/poc-mcp-apps.git
cd poc-mcp-apps
pnpm install
pnpm dev
# UI at http://localhost:3000/devhost
# MCP server at http://localhost:4000/mcp

ChatGPT Connector (Developer Mode):

1. Expose port 4000 publicly: ngrok http 4000
2. In ChatGPT Developer Mode, create a Connector pointing to https://YOUR-NGROK/mcp

Supported hosts

Explicitly validated against ChatGPT Connectors. Local devhost works with any MCP-compatible client via HTTP.