marno-mcp-server

MCP server that generates OpenUI Lang markup for rich AI chat interfaces. Provides tools that take structured data and return renderable UI — product listings, booking forms, order tables, dashboards, and more.

Install

npm install -g marno-mcp-server

Or use directly with npx:

npx marno-mcp-server

Usage

As an MCP Server (stdio)

The server communicates over stdin/stdout using the Model Context Protocol.

node node_modules/marno-mcp-server/dist/index.js

In Claude Desktop / Claude Code

Add to your MCP config:

{
  "mcpServers": {
    "marno": {
      "command": "npx",
      "args": ["-y", "marno-mcp-server"]
    }
  }
}

In n8n (MCP Node)

Add an MCP node with stdio transport:

• Command: npx
• Args: -y marno-mcp-server

Available Tools

generate_product_listing

Renders a grid of product cards with images, prices, and action buttons.

{
  "products": [
    {
      "title": "Wireless Headphones",
      "price": "$79.99",
      "image": "https://...",
      "description": "Noise-cancelling Bluetooth headphones",
      "url": "https://shop.example/headphones"
    }
  ]
}

generate_booking_form

Renders a booking card with date, time, attendees, and a join-meet button.

{
  "title": "Team Standup",
  "date": "June 15, 2026",
  "time": "10:00 AM",
  "duration": "30 minutes",
  "attendees": "Alice, Bob",
  "meet_url": "https://meet.google.com/abc-defg-hij"
}

generate_order_table

Renders a table of orders with columns for ID, customer, total, date, and status.

{
  "orders": [
    {
      "id": "ORD-001",
      "name": "John Doe",
      "total_price": "$149.99",
      "created_at": "June 10, 2026",
      "status": "fulfilled"
    }
  ]
}

generate_event_list

Renders a list of calendar events with title, date, time, and status.

{
  "events": [
    {
      "title": "Product Launch",
      "date": "June 20, 2026",
      "time": "2:00 PM",
      "status": "confirmed"
    }
  ]
}

generate_dashboard

Renders stat cards and an optional bar chart.

{
  "title": "Sales Dashboard",
  "stats": [
    { "label": "Revenue", "value": "$12,345", "trend": "up" },
    { "label": "Orders", "value": "89", "trend": "flat" }
  ],
  "chart_data": {
    "labels": ["Jan", "Feb", "Mar"],
    "values": [10, 25, 15],
    "series_name": "Monthly Sales"
  }
}

generate_custom_ui

Escape hatch — pass any component tree for custom layouts.

{
  "components": [
    {
      "type": "Card",
      "props": {},
      "children": [
        { "type": "TextContent", "props": { "0": "Hello World", "1": "large-heavy" } }
      ]
    }
  ]
}

Available Components

The generated OpenUI Lang markup supports these components: Stack, Card, CardHeader, TextContent, Button, Input, Table, Col, BarChart, LineChart, PieChart, StatCard, Image, Separator, Form, FormControl, Select, Tabs, Accordion, Steps, Modal, Callout, Tag.

Response Format

All tools return OpenUI Lang markup — a compact, line-based format:

root = Stack([title, grid])
title = TextContent("Products", "large-heavy")
grid = Stack([card1, card2], "row", "m", "start", "start", true)
card1 = Card([header1, body1])
...

The marno-chat-widget renders this automatically via the <Renderer> component from @openuidev/react-lang.

License

MIT