# Marp Player

> Free online Markdown-to-Slides presentation player powered by Marp Core.

Marp Player is a web-based tool that renders Marp-flavored Markdown into beautiful presentation slides in real-time. It runs entirely in the browser with server-side rendering via @marp-team/marp-core.

## Key Features

- Full Marp syntax support (frontmatter, directives, themes, custom CSS)
- Real-time slide preview with 500ms debounce
- PDF export (landscape 16:9, one slide per page, styles preserved)
- Fullscreen presentation mode (press F)
- Click-to-advance navigation (toggle switch)
- Auto-play with configurable intervals (1s–10s)
- Keyboard shortcuts (arrows, Space, Home/End)
- Speaker notes (HTML comments or <aside> tags)
- Built-in Marp themes (default, gaia, uncover)
- Dark/Light mode
- Mobile-first responsive design
- Load .md, .txt, .json files directly
- Save presentations as JSON
- Built-in example presentation demonstrating all features

## How It Works

1. User pastes Marp Markdown in the editor panel
2. Server-side API renders markdown via @marp-team/marp-core
3. Each slide is an SVG element with full CSS support
4. Navigate with arrows, clicks, auto-play, or fullscreen mode
5. Export to PDF via server-side HTML-to-PDF conversion

## Marp Syntax Quick Reference

Slides are separated by `---` (three dashes on a new line).

Frontmatter example:
```yaml
---
marp: true
theme: default
paginate: true
footer: My Presentation
size: 16:9
style: |
  section { background: #fff; }
  h1 { color: #333; }
---
```

Directives:
- `<!-- _class: lead -->` — Apply CSS class to current slide
- `<!-- _paginate: false -->` — Hide page number on current slide
- `<!-- _backgroundColor: #000 -->` — Set slide background
- `![bg](url)` — Background image
- `![bg left](url)` — Split background

## Tech Stack

- Next.js 14 (React, TypeScript)
- @marp-team/marp-core for server-side rendering
- Tailwind CSS + shadcn/ui
- HTML2PDF API for PDF export
- Docker support

## API for AI Agents (MCP + REST)

Marp Player supports two integration paths.

### 1. Native MCP server  — POST /api/v1/mcp

JSON-RPC 2.0 over HTTP POST (Model Context Protocol Streamable HTTP transport).
Use this URL in Claude Desktop, Cursor, Cline or any other MCP client.
Supported methods: `initialize`, `tools/list`, `tools/call`, `ping`,
`notifications/initialized` and friends.

Tools exposed:
- `create_share_link`      — store markdown, return a public play URL
- `render_pdf`             — markdown → 16:9 PDF (returned as base64 resource)
- `get_presentation`       — fetch metadata & markdown by id
- `delete_presentation`    — remove a shared presentation

Minimal Claude Desktop config:
```json
{
  "mcpServers": {
    "marp-player": {
      "type": "http",
      "url": "https://marp-play.techbuzzz.me/api/v1/mcp",
      "headers": { "Authorization": "Bearer YOUR_API_KEY" }
    }
  }
}
```

### 2. REST API (OpenAPI 3.1 for GPTs / LangChain)

- `POST /api/v1/render-pdf` — Marp markdown → binary PDF
- `POST /api/v1/play` — store markdown, return `{ playUrl, embedUrl, id }` (default TTL 30 days)
- `GET  /api/v1/presentations/{id}` — fetch stored presentation
- `DELETE /api/v1/presentations/{id}` — delete stored presentation
- `POST /api/v1/keys` — generate a Bearer token (shown only once)
- `GET  /api/v1/openapi` — full OpenAPI 3.1 spec for tool registration
- `GET  /api/v1` — discovery index

Authentication: `Authorization: Bearer <token>`. Keys are generated in the MCP
modal of the Marp Player UI, or via `MARP_API_KEYS` env var. If neither is
configured the API runs in open mode.

## Links

- Full documentation: /llms-full.txt
- MCP endpoint: /api/v1/mcp
- OpenAPI spec: /api/v1/openapi
- API index: /api/v1