PopUI
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@PopUIshow me a color picker for this design"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
PopUI - Collaborative UX for Claude Desktop
Overview
PopUI is a companion desktop app for macOS that gives Claude Desktop new tools.
Leveraging Claude's ability to create user interfaces, PopUI creates a bi-directional bridge to a visual context.
Claude creates and automatically displays a user interface (similar to artifacts)
Claude can read changes done in the UI and use the UI as a visual context
Claude can also push changes to the UI, visually updating it for the user
The UI can send events and text back to chat, obviating the need for keyboard input in the loop
Related MCP server: day-planner-mcp
Collaborative UX
How is this different from Artifacts?
PopUI closes the interaction loop. While Claude Artifacts can generate interactive UI elements, any events or changes that happen in them are trapped outside of the chat conversation. With PopUI, Claude has tools to interrogate and manipulate the external state, allowing Claude to build further conversation on top of that shared context.
Realtime visual context
PopUI also gives the Claude and the user the ability to receive and manipulate visual context.
Some examples:
Instantly build control panels for tweaking and refining values in the chat
Talk to Claude about colors with a color picker with swatches.
Talk to Claude about a physical layout
Play turn-based games with Claude on a shared gameboard
Give Claude a sense of time with a real-time wall clock
Give Claude a literal face to express its emotions during the chat
Installation
Just download the latest release and launch the app.
Automatic SSE Proxy to Claude Desktop
PopUI provides all its dependencies to function, even the MCP gateway for Claude! The first time you launch PopUI, you'll be asked to install into Claude Desktop. After this, PopUI will be launched by Claude Desktop and automatically connected as an MCP server.
You can access all the created user interfaces from the settings window or from the menubar icon.
Sponsorship & Collaboration
PopUI was my MCP hackathon entry.
If you like it, please consider supporting me through sponsorship or work opportunities.
My Apple Developer membership cost $100/year 💸 Oh for codesign...
Sponsor me or connect with me on LinkedIn if you're interested in collaborating!
⭐Stars⭐ are always appreciated!
This server cannot be deployed
Maintenance
Related MCP Connectors
- SimSenseOAuthai.simsense
Deploy sims to any screen. Control your displays with Claude.
Deploy sims to any screen. Control your displays with Claude.
One workspace of tools for Claude and ChatGPT: connect 600+ apps, generate media, build tools.
An agent-first office suite Claude & ChatGPT read and write over one MCP URL.
Related MCP Servers
- FlicenseBqualityDmaintenanceBridges Claude Desktop with Claude Code CLI to delegate complex coding tasks like creating React apps, building APIs, and debugging scripts while maintaining interaction through the Desktop interface.51-
- FlicenseAqualityDmaintenanceAn MCP App that renders an interactive dashboard in Claude conversations to unify calendar events, emails, and documents into a single interface. It enables users to manage their daily schedule and perform actions like meeting preparation through bidirectional communication between the UI and the model.2-
- AlicenseNot gradedqualityDmaintenanceEnables Claude to interact directly with Figma Desktop for creating UI components, managing design tokens, and auditing files through natural language. It establishes a live connection between the AI and the Figma API via a local server and companion plugin.6,112 npmMIT
- FlicenseAqualityDmaintenanceProvides interactive, React-based UI apps inside Claude Desktop for tracking workouts, planning trips, budgeting, comparing products, and making decisions with bidirectional communication.8-