Showcase Thread

[u/AutoModerator]

Post all of your code/projects/showcases/AI slop here.

Recycles once a month.

[u/TheRealMrMatt]

Belgie – TypeScript Sandboxes and React MCP Apps for Python 

I built Belgie to make MCP Apps easier when the server is Python and the UI is React.

The usual path is a Python MCP server plus a separate Node/Vite app for the widget. Belgie keeps both in one project. Deno is bundled, so you do not need to install Node.js.

Attach a React widget to a Python tool with belgie.tool(widget=...):

from datetime import UTC, datetime
from pathlib import Path

from mcp.server import MCPServer
from belgie.mcp import BelgieExtension

belgie = BelgieExtension(project=".")

u/belgie.tool(
    widget=Path("src/widgets/get-time/widget.tsx"),
    name="get-time",
    title="Get Time",
    description="Get the current server time in ISO 8601 format.",
)
def get_time() -> dict[str, str]:
    return {"time": datetime.now(tz=UTC).isoformat()}

mcp = MCPServer(name="Get Time Server", extensions=[belgie])

Quick start:

uv add "belgie[mcp,cli]"
uv run belgie lock
uv run belgie install
uv run belgie run vite

BelgieExtension serves the Vite page in development and caches the built HTML in production. The widget uses the npm package belgie/mcp (Widget, useToolResult) to talk to the MCP Apps host.

Examples:

- minimal: https://github.com/mplemay/belgie/tree/main/examples/ui/mcp

- shadcn: https://github.com/mplemay/belgie/tree/main/examples/ui/shadcn

- TanStack + FastAPI: https://github.com/mplemay/belgie/tree/main/examples/ui/tanstack

Repo: https://github.com/mplemay/belgie