Visual MCP-UI Integration Platform
What if you could visually discover MCP tools, design custom UI components, map interactions to tool calls, and export production-ready code?
It needed to work as a bidirectional MCP client that could connect to any MCP server, render interactive UI resources in chat, and provide a complete visual workflow from tool discovery through code generation.
It also needed to support both local (stdio) and remote (SSE/HTTP) transports with authentication, and real-time validation of parameter mappings.
Started with a basic Next.js chat interface using @assistant-ui/react. Used ShadCN components. Got Ollama streaming working from my local system. It was a challenge getting the stream animation nailed down. Lot's of stuttering at first.
Transformed the chat app into an MCP client with MCP-UI rendering. Then I wired up the MCP SDK, handling tool registration dynamically, and getting UI resources to render correctly
MCP-UI Builder Module: Content Type Architecture
The builder module implements a flexible content rendering system built on three core content types, each with distinct capabilities:
Content Types:
rawHtml (default) – Native HTML content rendering
externalUrl – Remote resource integration
remoteDom – Dynamic DOM manipulation
Each content type supports specific MIME type handling and determines the available configuration options.
Renderer Configuration:
Content type selection cascades to the following renderer options:
Auto-resize behavior
Sandbox permission controls
iframe title attributes
Container styling customization
This architecture enables granular control over content rendering while maintaining flexibility across different integration scenarios.
Component Libraries & Action System Templates
A comprehensive collection of 13 production-ready templates designed for rapid prototyping and deployment:
UI Components: Forms, Dashboards, Tables, Galleries, Charts
Interactive Examples: AI Assistant Helper, Documentation Viewer, Navigation Panel, Status Notifier, Multi-Action Demo
MCP-UI Action Types
Implemented a complete bidirectional communication system with five core action types:
Tool – Execute MCP tools for form submissions and data operations
Prompt – Send context-aware messages to AI for intelligent assistance
Link – Navigate to external resources including documentation and dashboards
Intent – Trigger application-level actions such as navigation and settings modifications
Notify – Display user feedback with automatic variant detection (success/error states)
This architecture enables rich, interactive experiences with full client-server communication across all action types.
Flexible Export Options
Built a dual-export system to accommodate different deployment scenarios:
Integration Snippet – Generate embeddable code for incorporating MCP-UI components into existing MCP servers
Standalone Server – Export complete, production-ready servers in TypeScript or JavaScript with FastMCP integration
FastMCP Export
The FastMCP export option generates a fully configured MCP server using the FastMCP framework—basically a more streamlined, easier to code MCP server starter template.
This enables developers to move from visual UI design to a running MCP server much quicker.
Live Preview System
Developed a real-time preview engine using MCPUIRenderer that renders UI changes instantly in an isolated iframe environment, providing immediate visual feedback during the design process.
Save Settings
Implemented save/load functionality for UI resources, enabling template reusability across projects and facilitating design system consistency.
Settings Page: User-specific MCP server configuration
Context Tab: Server discovery and tool browsing
Design Tab: Monaco editor with live preview
Actions Tab: Interactive element detection, action mapping, parameter binding
Export Tab: Displays fully integrated code
If you've built MCP servers, you know the resource format isn't complicated - but there's friction. You're switching between thinking about your server logic and thinking about HTML/CSS/JavaScript for UIs. Then you're manually typing out all those metadata keys. UI Builder removes that context switch. You stay in "design mode" - pick a template, tweak it, configure options with dropdowns and toggles - then copy-paste the generated code. The code is clean, properly typed, follows MCP-UI spec exactly.
Plus: the live preview means you catch mistakes immediately. No more deploy → test → fix → redeploy loop. You see it working before you even copy the code. That's the whole point of the UI Builder - make MCP-UI accessible and fast, so you spend more time building cool interactions and less time fighting with iframe configs and metadata formats.
There are things that still need refining, like the interface. However, the current state of LoopCraft is a good representation of what things are and where things could head.
current version -> here
The main concept I attempted to express is the importance of the relationship between the server and the agent played out in the user interface.
What does the server instruct the agent to do? What parts of the interface will the agent compose itself? How does this interaction play out in a multi-stage process?
Phase 2: Enhanced Builder (In Progress)
Remote DOM Support
Full React component support in MCP-UI
Web Components framework integration
Client-side hydration and state management
Visual UI Editor
Component library with pre-built blocks
Phase 3: Advanced Features (Planned)
Analytics & Monitoring
Custom dashboards
MCP Orchestration
Server chains and workflows
Conditional tool execution
Event-driven automation
Extended Capabilities
Advanced debugging tools for MCP protocol
Webhook support for external integrations
Phase 4: Ecosystem (Future)
Marketplace & Monetization
Server marketplace with ratings
Platform Extensions
Third-party integrations (Zapier, n8n, etc.)
AI-powered template generation