Loop Page Viewer

What it does

Renders Microsoft Loop pages as interactive widgets directly inside your AI chat. When an LLM creates or fetches a Loop page, instead of dumping raw text, this app displays a compact chicklet card that expands into fully rendered markdown with an inline editor.

Key features

• Inline chicklet rendering — Loop pages appear as compact cards with icon, title, and content preview, expanding on click to full rendered markdown.
• Edit mode — Switch to edit mode directly within the chat to modify page content, then save changes back through the Loop MCP server.
• Transparent background — The widget blends seamlessly into the host UI for a native feel.
• Accessible — Keyboard navigable with proper aria-expanded state management.
• Dual transport — Supports stdio (Claude Code, VS Code) and HTTP (web hosts) modes.

Installation

Claude Code — add to ~/.claude/settings.json:

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

VS Code Copilot — add to .vscode/mcp.json:

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

Claude Desktop (HTTP) — start with npm run serve:http, then tunnel with cloudflared and add as a custom connector.

Supported hosts

• Claude Desktop
• Claude Code
• VS Code Copilot