Lessons from building 20 MCP Apps in 2 days

My team built 20 MCP Apps in two days. This gave me a clear view of what these tools do and where they fail.

MCP Apps are the first official extension to the MCP spec. They let a tool return a UI resource with its result. The host renders this UI in a sandboxed iframe. You can show tables, charts, and forms directly in a chat.

Visual information is often better than text. A chart beats a CSV file. A list of pull requests is easier to read than a wall of text.

Here are the lessons we learned:

• Apps live inside the server An MCP App is not a hosted URL. It is fetched via MCP, not HTTP. The UI code ships with your MCP server.

• Use React and Vite We used React to use our existing design system. We set up one Vite project in a /ui folder. It outputs one HTML file for every TSX file during the build.

• Text is still the primary contract If a host does not support MCP Apps, it ignores the UI property. The user only sees the text response. Never put the only answer in the UI. If you do, your tool breaks for users on terminal clients. Always design as if half your users will only see text.

• Expect inconsistent layouts Every host implements the spec differently. ChatGPT renders wide. Claude renders narrow. Mobile is different again. Design layouts that reflow at narrow widths from the start.

• The dev loop is slow There is no standard testing tool yet. You must build, install, and check it manually in every client. It feels slow compared to standard frontend work.

• Do not collect secrets in an app Apps run in a sandboxed iframe. The host can see the content. Never put API keys or OAuth tokens in form fields. Use a separate secure form if you need sensitive data.

If you start now:

  • Bundle your UI inside your server.
  • Use a multi-page Vite setup.
  • Import your existing design system directly.

MCP Apps are early and the spec is moving. The tooling is thin, but they are worth shipping.

Source: https://dev.to/arcade/lessons-from-building-20-mcp-apps-in-2-days-1f98

Optional learning community: https://t.me/GyaanSetuAi