Which integrations are available for this server?

Provides an interactive interface for rendering and editing Markdown content, allowing users to view formatted Loop pages and make real-time updates directly within the chat interface.

How do I use Loop Page Viewer?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Loop Page Viewer open the 'Project Roadmap' page from Loop" 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.

Loop Page Viewer

MCP App that renders Microsoft Loop pages inline in chat with view and edit capabilities.

When an LLM creates or fetches a Loop page, this server displays it as an interactive widget — rendered markdown with an edit mode — directly in the conversation instead of just returning text.

Prerequisites

Node.js 18+
An MCP host that supports MCP Apps (Claude Desktop, claude.ai, VS Code Copilot, Goose, etc.)
A Loop MCP server for fetching/updating pages (e.g., @microsoft/loop-mcp)

Setup

1. Clone and build

git clone https://github.com/yemi33/loop-page-viewer.git
cd loop-page-viewer
npm install
npm run build

2. Add to Claude Code

Add to your ~/.claude/settings.json:

{
  "mcpServers": {
    "loop-page-viewer": {
      "command": "npx",
      "args": ["tsx", "/path/to/loop-page-viewer/server.ts"],
      "tools": ["*"]
    }
  }
}

Replace /path/to/loop-page-viewer with the actual path to the cloned repo.

3. Add to VS Code (Copilot)

Add to your .vscode/mcp.json:

{
  "servers": {
    "loop-page-viewer": {
      "type": "stdio",
      "command": "npx",
      "args": ["tsx", "/path/to/loop-page-viewer/server.ts"]
    }
  }
}

4. Add to Claude Desktop or other web hosts

Start the server in HTTP mode:

npm run serve:http

Then connect your host to http://localhost:3001/mcp. For Claude Desktop, use cloudflared to tunnel:

npx cloudflared tunnel --url http://localhost:3001

Add the generated URL as a custom connector in Claude Desktop settings.

Tools

Tool	Description
`show_loop_page`	Renders a Loop page inline with view/edit UI. Accepts title, content (markdown), link, workspaceId, and pageId.
`request_page_update`	Called by the inline editor when the user saves. Returns instructions for the host to forward the update to the Loop MCP server.

How it works

You ask the LLM to create or fetch a Loop page (via your Loop MCP server)
The LLM calls show_loop_page with the page data
The host renders an interactive viewer inline in chat (sandboxed iframe)
You can view the rendered markdown or switch to edit mode
On save, the app calls request_page_update, and the LLM forwards the changes to mcp__loop__update_page

Development

npm run build          # Build the UI bundle
npm run serve          # Start in stdio mode (for Claude Code)
npm run serve:http     # Start in HTTP mode (for web hosts, port 3001)
npm run dev            # Build + start HTTP mode

To test with the MCP Inspector:

npx @modelcontextprotocol/inspector npx tsx server.ts

To test rendering with the basic-host:

npm run serve:http
# In another terminal:
git clone https://github.com/modelcontextprotocol/ext-apps.git
cd ext-apps/examples/basic-host
npm install
SERVERS='["http://localhost:3001/mcp"]' npm start
# Open http://localhost:8080