sinai.blog
Back
·4 min read

MCP Apps: How I Built This Blog as an App Inside Claude

AIMCPClaudeDevelopment

Where are you reading this blog from?

If you are reading this post through Claude - you are already seeing what I am going to talk about. This blog is now available directly from within the conversation. You can read posts, like them, navigate between content - without opening a browser.

And if you are reading this on the website? Connect Claude to the blog and check for yourself.

What actually happened?

A few days ago Anthropic announced MCP Apps. Basically, this is an extension to the MCP protocol that allows displaying interactive interfaces inside the conversation with Claude.

Until now, Tools in MCP could only return text or data. Now? They can return complete HTML that you can click on, fill out forms, and trigger additional Tools.

If AppStore and Google Play are the stores for phone applications, then MCP Apps turns Claude into a platform that runs applications inside the conversation. And this opens up a whole world of possibilities.

Two new things worth knowing

App Tools

App Tools are Tools that return a User Interface instead of plain text. When Claude calls such a Tool, it receives both the content and metadata that points to a visual interface.

In my blog, the Tool called read_post returns the content of the post. But instead of dry markdown, Claude displays a designed reading interface with a title, date, post content, and a like button.

Interactive Tools

Interactive Tools are the real magic. They allow the interface to trigger other Tools back.

In the blog, it works like this:

  1. The interface displays a "Like" button
  2. You click on it
  3. The interface calls a Tool called like_post
  4. The Tool updates the number of likes in the database
  5. The interface displays the updated number

Everything happens in real-time, without leaving the conversation.

The Architecture

The blog runs on Next.js, and an MCP Server sits as an API route waiting for requests from Claude:

Flow:

  1. Claude Desktop sends a request to the MCP Server sitting at sinai.blog/api/mcp
  2. MCP Server routes the request to one of the three Tools
  3. read_post returns the post content with a reference to a visual interface (App Tool)
  4. The Interface is displayed inside Claude - with a like button
  5. Clicking Like triggers like_post directly from the interface (Interactive Tool)
  6. Likes are saved in Vercel KV

The Tools

list_posts - A regular Tool that returns a list of all posts with title, date, and summary.

read_post - App Tool that returns the post content with an interactive reading interface.

like_post - Interactive Tool that adds a like to a post and returns the updated number.

How to add an MCP App

It works exactly like any other MCP. In Claude Desktop:

  1. Go to Connectors
  2. Click on Add Connector
  3. Put the URL: https://sinai.blog/api/mcp/mcp
  4. And that's it

You can also see this in the video above.

After adding, simply ask Claude "Show me the posts from Sinai's blog".

The Bottom Line

If the AppStore brought us phone apps, MCP Apps brings apps to AI. Instead of downloading an app and opening it, you simply talk to Claude and it displays an interactive interface in real-time.

In this blog I used it for reading posts and likes - a relatively simple example. I'm already waiting to order Wolt through the chat and track the courier in real-time.

Dashboards, forms, editing tools, management interfaces - anything that can be built in HTML can now live inside a conversation with AI. Claude transforms from a chatbot into a platform.

P.S.

If you have ideas for additional uses in MCP Apps, or if you want to build something similar and have questions - send me a message. And if you are reading this through Claude, click the like and see the magic in action.