Point, open, go deeper — inside the MCP view.

import { MCP_APP_MIME_TYPE, McpApp } from "@mcpview/server";

const server = new McpApp({ name: "invoices", version: "1.0.0" });

// The view: a single-file HTML bundle served as an ui:// resource.
server.registerResource(
  { uri: "ui://invoices/list-viewer", name: "Invoice list" },
  async (uri) => ({
    uri: uri.toString(),
    mimeType: MCP_APP_MIME_TYPE,
    text: "<!doctype html><html><!-- your bundled view --></html>",
  }),
);

// One tool. Hosts discover its view from _meta on the definition;
// the model's text stays tiny while the view renders the full data.
server.registerTool(
  {
    name: "invoice_list",
    description: "List recent invoices",
    inputSchema: {
      type: "object",
      properties: { limit: { type: "number" } },
    },
    _meta: { ui: { resourceUri: "ui://invoices/list-viewer" } },
  },
  async ({ limit = 20 }) => {
    const invoices = await listInvoices(limit); // your data source
    return {
      content: [{ type: "text", text: invoices.length + " invoices" }],
      structuredContent: {
        doctype: "Sales Invoice",
        count: invoices.length,
        data: invoices,
      },
      _meta: { ui: { resourceUri: "ui://invoices/list-viewer" } },
    };
  },
);

await server.start(); // stdio — or server.startHttp({ port: 3000 })

import { createMcpApp, defineView } from "@mcpview/view";

const app = await createMcpApp({
  info: { name: "Invoice list", version: "1.0.0" },
  root: document.getElementById("root")!,
  views: {
    list: defineView({ render: () => "<h1>Invoices</h1>" }),
  },
  initialView: "list",
});