Skip to main content
Glama
PavelGuzenfeld

mcp-media-forge

MCP Media Forge

npm MCP Registry License: MIT

MCP server that generates diagrams, charts, HTML pages, and slide decks from text DSLs -- designed for AI coding agents to embed into Markdown.

LLM agents call tools like render_mermaid, render_html_page, or render_slides with text input, and get back file paths to assets ready to embed in docs.

Mermaid Flowchart

Mermaid Sequence Diagram

D2 Architecture Diagram

Graphviz Dependency Graph

Vega-Lite Bar Chart

Related MCP server: Diagram Bridge MCP Server

Tools

Diagram & Chart Renderers (Docker)

Tool

Input

Formats

Use Case

render_mermaid

Mermaid code

SVG, PNG

Flowcharts, sequence, ER, state, Gantt, git graphs

render_d2

D2 code

SVG, PNG

Architecture diagrams with containers and icons

render_graphviz

DOT code

SVG, PNG

Dependency graphs, network diagrams

render_chart

Vega-Lite JSON

SVG, PNG

Bar, line, scatter, area, heatmap charts

HTML Generators (No Docker)

Tool

Input

Output

Use Case

render_html_page

HTML body + theme

Self-contained HTML

Technical docs, reports, dashboards

render_slides

JSON slide array + theme

HTML slide deck

Presentations, status updates, walkthroughs

Utilities

Tool

Description

get_tool_guide

Usage examples, anti-patterns, complexity limits per tool

list_assets

List all generated files in the output directory

Quick Start

1. Start the rendering container (for diagram tools)

cd docker
docker compose up -d

HTML page and slide tools work without Docker.

2. Install the MCP server

Option A -- npx (no install)

npx mcp-media-forge

Option B -- Clone and build

git clone https://github.com/PavelGuzenfeld/mcp-media-forge.git
cd mcp-media-forge
npm install
npm run build

3. Register with your MCP client

Any MCP-compatible client (Claude Code, Cursor, VS Code + Copilot, Cline, etc.) can use this server. The standard config:

{
  "mcpServers": {
    "media-forge": {
      "command": "node",
      "args": ["/path/to/mcp-media-forge/dist/index.js"],
      "env": {
        "PROJECT_ROOT": "/path/to/your/project"
      }
    }
  }
}

Where to add this depends on your client:

  • Claude Code: ~/.claude/settings.json

  • Cursor: MCP settings panel

  • VS Code (Copilot): .vscode/mcp.json

  • Cline: MCP server configuration

4. Use it

Ask your AI assistant to generate diagrams, pages, or presentations:

"Create a sequence diagram showing the OAuth2 flow and embed it in the README"

"Generate an HTML page summarizing the API architecture with KPI cards"

"Make a slide deck with our Q1 metrics and architecture overview"

The agent calls the appropriate tool, gets back a file path, and embeds it in your markdown.

How It Works

AI Agent (any MCP client)
    |
    | MCP Protocol (JSON-RPC over stdio)
    v
MCP Media Forge (Node.js on host)
    |
    |--- Diagrams: docker exec (sandboxed, no network)
    |       |
    |       v
    |   Rendering Container
    |     ├── mmdc       (Mermaid CLI + Chromium)
    |     ├── d2         (D2 diagrams)
    |     ├── dot/neato  (Graphviz)
    |     └── vl2svg     (Vega-Lite via vl-convert)
    |
    |--- HTML/Slides: template engine (no Docker)
    |       |
    |       v
    |   CSS Design System (4 themes, depth tiers, components)
    |
    v
docs/generated/
  mermaid-a1b2c3.svg
  d2-7f8e9a.svg
  html_page-d4e5f6.html
  slides-8b9c0d.html

Key design decisions:

  • Text in, file path out -- returns relative paths, never base64 blobs

  • Content-hash naming -- same input = same file = free caching + git-friendly

  • SVG preferred -- vector format, small files, diffs cleanly in git

  • Docker-contained -- diagram renderers run in a sandboxed container with network_mode: none

  • Self-contained HTML -- pages and slides have zero external dependencies (inline CSS/JS)

  • Input pre-validation -- catches common mistakes before Docker round-trips

  • Structured errors -- error responses include error_type, error_message, and suggestion to enable LLM self-correction

Tool Reference

get_tool_guide

Get usage guide for any tool before rendering. Returns examples, anti-patterns to avoid, complexity limits, and tips.

{ "tool_name": "mermaid" }

Available guides: mermaid, d2, graphviz, vegalite, html_page, slides, or all for a summary.

render_mermaid

{
  "code": "flowchart TD\n    A[Start] --> B{Decision}\n    B -->|Yes| C[Done]",
  "format": "svg",
  "theme": "default"
}

Parameter

Type

Default

Description

code

string

required

Mermaid diagram code (must start with diagram type)

format

svg | png

svg

Output format

theme

default | dark | forest | neutral

default

Mermaid theme

Pre-validation catches: missing diagram type, semicolons, HTML in labels, >25 nodes.

render_d2

{
  "code": "client -> server -> database",
  "format": "svg",
  "layout": "dagre"
}

Parameter

Type

Default

Description

code

string

required

D2 diagram code

format

svg | png

svg

Output format

theme

number

--

Theme ID (0=default, 1=neutral-grey, 3=terminal)

layout

dagre | elk | tala

dagre

Layout engine

Pre-validation catches: Mermaid/D2 syntax confusion, unbalanced braces, >3 nesting depth.

render_graphviz

{
  "dot_source": "digraph G { A -> B -> C }",
  "engine": "dot",
  "format": "svg"
}

Parameter

Type

Default

Description

dot_source

string

required

Graphviz DOT source code

engine

dot | neato | fdp | sfdp | twopi | circo

dot

Layout engine

format

svg | png

svg

Output format

Pre-validation catches: missing graph wrapper, -> in undirected graphs, unbalanced braces.

render_chart

{
  "spec_json": "{\"$schema\":\"https://vega.github.io/schema/vega-lite/v5.json\",\"data\":{\"values\":[{\"x\":1,\"y\":10}]},\"mark\":\"bar\",\"encoding\":{\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}}}",
  "format": "svg"
}

Parameter

Type

Default

Description

spec_json

string

required

Vega-Lite JSON specification

format

svg | png

svg

Output format

scale

number

1

Scale factor for PNG output

Pre-validation catches: invalid JSON, missing $schema/data/mark, >500 inline data rows.

render_html_page

Generates a self-contained themed HTML page. No Docker required.

{
  "title": "System Overview",
  "body_html": "<section id=\"metrics\"><h2>Metrics</h2><div class=\"mf-grid mf-grid-3\">...</div></section>",
  "theme": "swiss",
  "description": "Q1 architecture overview",
  "nav_sections": ["Metrics", "Architecture", "Roadmap"]
}

Parameter

Type

Default

Description

title

string

required

Page title

body_html

string

required

HTML body content (inner content only, no <html>/<head>/<body>)

theme

swiss | midnight | warm | terminal

swiss

Visual theme

description

string

--

Page description (meta tag + header)

nav_sections

string[]

--

Section names for floating IntersectionObserver navigation

Design system CSS classes:

Class

Purpose

mf-hero

Primary highlight section (large shadow)

mf-elevated

Secondary highlight (medium shadow)

mf-card

Bordered content card

mf-recessed

De-emphasized content

mf-grid mf-grid-2

Responsive 2-column grid

mf-grid mf-grid-3

Responsive 3-column grid

mf-split

Two equal columns

mf-kpi + mf-kpi-value + mf-kpi-label

Key metric display

mf-badge-success/warning/error/info

Status badges

Themes:

Theme

Style

Best for

swiss

White, geometric, blue accent

Technical docs

midnight

Deep navy, serif, gold accent

Presentations

warm

Cream paper, bold sans, terracotta

Reports

terminal

Dark, monospace, cyan accent

Developer content

render_slides

Generates a self-contained HTML slide deck with keyboard/touch navigation. No Docker required.

{
  "title": "Q1 Review",
  "slides": "[{\"title\":\"Q1 Review\",\"content\":\"Engineering update\",\"type\":\"title\"},{\"title\":\"Metrics\",\"content\":\"<ul><li>99.9% uptime</li></ul>\",\"type\":\"content\"}]",
  "theme": "midnight",
  "author": "Engineering Team"
}

Parameter

Type

Default

Description

title

string

required

Presentation title

slides

string

required

JSON array of slide objects

theme

swiss | midnight | warm | terminal

swiss

Visual theme

author

string

--

Author (shown on title slide)

Slide types:

Type

Layout

Best for

title

Centered large text + subtitle

Opening/closing slides

section

Centered heading + description

Topic dividers

content

Heading + body (bullets, text)

Most content

split

Heading + two columns

Before/after, comparisons

code

Heading + code block

Code walkthroughs

quote

Large blockquote + attribution

Testimonials, key quotes

kpi

Heading + auto-grid metrics

Dashboards, stats

image

Heading + centered image

Screenshots, diagrams

Navigation: Arrow keys, Space, PageUp/PageDown, Home/End. Touch: swipe left/right. Click dots to jump.

list_assets

{ "directory": "" }

Returns a JSON array of all generated files with name, path, size, and modification time.

Error Handling

All tools return structured errors that help LLMs self-correct:

{
  "status": "error",
  "error_type": "syntax_error",
  "error_message": "First line must declare diagram type. Got: \"A --> B\"",
  "suggestion": "Start with: flowchart TD, sequenceDiagram, erDiagram, ... See https://mermaid.js.org/syntax/"
}

Error types: syntax_error, rendering_error, dependency_missing.

Pre-validation catches common LLM mistakes before hitting the renderer:

  • Mermaid: missing diagram type, semicolons, HTML tags, legacy graph syntax

  • D2: Mermaid syntax confusion (-->, subgraph), unbalanced braces

  • Graphviz: missing digraph/graph wrapper, -> in undirected graphs

  • Vega-Lite: invalid JSON, missing required fields, oversized inline data

Environment Variables

Variable

Default

Description

PROJECT_ROOT

cwd()

Project root for output path resolution

OUTPUT_DIR

docs/generated

Output directory relative to PROJECT_ROOT

MEDIA_FORGE_CONTAINER

media-forge-renderer

Docker container name

Development

npm install
npm run build          # Build with tsup
npm run dev            # Watch mode
npm test               # Run all tests (95 total)
npm run test:unit      # Unit tests only (no Docker needed)
npm run test:component # Integration tests (Docker tools need container)
npm run lint           # Type-check with tsc

Running integration tests

cd docker && docker compose up -d   # Start renderer (diagram tools only)
cd .. && npm run test:component     # All integration tests

HTML page and slide integration tests run without Docker.

Examples

See examples/ for sample input files:

File

Tool

Description

mermaid/flowchart.mmd

render_mermaid

Decision flowchart

mermaid/sequence.mmd

render_mermaid

Client-server sequence

d2/architecture.d2

render_d2

Backend architecture with containers

graphviz/dependencies.dot

render_graphviz

npm dependency graph

vegalite/bar-chart.json

render_chart

Tool performance comparison

See examples/README.md for MCP tool call examples and expected responses.

License

MIT

Available Tools

8 tools
get_tool_guideA

Get usage guide for a rendering tool — includes examples, anti-patterns to avoid, complexity limits, and tips. Call this BEFORE your first render to avoid common mistakes. Available guides: mermaid, d2, graphviz, vegalite, html_page, slides (or "all" for a summary).

ParametersJSON Schema
NameRequiredDescriptionDefault
tool_nameYesTool to get guide for: "mermaid", "d2", "graphviz", "vegalite", "html_page", "slides", or "all"

TDQS

A4.5/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations provided, so the description carries the full burden. It describes the content (examples, anti-patterns, etc.) and available tools but does not explicitly state it is read-only or has no side effects. However, the tone and purpose strongly imply it is a harmless guide retrieval.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two efficient sentences with a parenthetical list. No wasted words—every sentence earns its place. The key action and prerequisites are front-loaded.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple one-parameter tool with no output schema, the description fully covers purpose, content, usage timing, and available options. No gaps remain for an AI agent to resolve.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100% (parameter tool_name has a description listing valid values). The main description reinforces these values, adding contextual meaning (e.g., 'or "all" for a summary'). This adds value beyond the schema's bare enumeration.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states 'Get usage guide for a rendering tool' and specifies it includes examples, anti-patterns, complexity limits, and tips. It differentiates from sibling rendering tools by being a guide retrieval rather than a rendering action.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Explicitly advises 'Call this BEFORE your first render to avoid common mistakes,' providing clear when-to-use guidance. Also lists available tool names, helping the agent choose the correct parameter value.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

list_assetsB

List all generated media assets in the output directory.

ParametersJSON Schema
NameRequiredDescriptionDefault
directoryNoSubdirectory to list (default: docs/generated)

TDQS

B3.1/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations provided. The description implies a read-only operation but does not disclose potential errors (e.g., missing directory) or behavior like recursion, leaving significant gaps.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Extremely concise single sentence with no wasted words. Information is front-loaded and easy to parse.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple, single-parameter tool, the description is adequate but lacks details on return format or error handling. Could be slightly more informative.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100% with a clear parameter description. The tool description adds no extra meaning beyond the schema, meeting baseline expectations.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states it lists all generated media assets in the output directory. It distinguishes from sibling tools (render tools) by focusing on listing rather than rendering.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance on when to use this tool vs alternatives. It does not specify prerequisites or context, leaving the agent to infer usage.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

render_chartA

Render a Vega-Lite chart to SVG or PNG. Supports: bar, line, point (scatter), area, rect (heatmap), boxplot, and layered/composite charts. IMPORTANT: spec_json must be valid JSON with "$schema", "data", "mark", and "encoding" fields. Anti-patterns: missing $schema, omitting encoding types, >500 inline data rows. Call get_tool_guide('vegalite') for examples.

ParametersJSON Schema
NameRequiredDescriptionDefault
scaleNoScale factor for PNG (default: 1). Use 2 for retina-crisp output.
formatNoOutput format. SVG preferred.svg
spec_jsonYesVega-Lite JSON spec (as string). Must include "$schema", "data", "mark", "encoding". Always specify encoding types (quantitative/nominal/temporal/ordinal).

TDQS

A3.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations exist, so description must cover behavior. It does not mention any side effects, permissions, rate limits, or return format. The agent cannot infer safety or operational constraints.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Four concise sentences, front-loaded with purpose. Every sentence contains essential information without fluff. Efficient use of space.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

No output schema and no annotations; the description covers core usage but omits return format and any behavioral context. Adequate but not thorough.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, but description enriches semantics: clarifies scale usage for retina output, specifies required fields in spec_json, and warns about anti-patterns. Adds real value beyond schema definitions.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states it renders Vega-Lite charts to SVG or PNG, with a specific verb and resource. It distinguishes from sibling tools like render_mermaid by naming the charting library and formats.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Lists supported chart types and anti-patterns, and references get_tool_guide for examples. Provides context on when to use, but lacks explicit exclusion of alternatives.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

render_d2A

Render a D2 architecture diagram to SVG or PNG. Best for: architecture diagrams with containers, nested groups, icons, and complex layouts. IMPORTANT: D2 syntax is NOT Mermaid. Use '->' for arrows (not '-->'), containers with 'name: { ... }' (not 'subgraph'). Anti-patterns: Mermaid syntax, unbalanced braces, >3 nesting levels. Call get_tool_guide('d2') for examples.

ParametersJSON Schema
NameRequiredDescriptionDefault
codeYesD2 diagram code. Use '->' for arrows, 'name: { ... }' for containers. NOT Mermaid syntax.
themeNoD2 theme ID: 0=default, 1=neutral-grey, 3=terminal, 100=neutral-default
formatNoOutput format. SVG preferred. PNG is slower (requires Chromium conversion).svg
layoutNoLayout engine. dagre=hierarchical (default), elk=complex layouts with many crossingsdagre

TDQS

A4.5/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description bears full burden. It discloses performance characteristics (PNG slower via Chromium), syntax restrictions (no Mermaid, limited nesting), and error-prone patterns. Missing details on error messages, output size limits, or throttling.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Extremely concise: four sentences front-loading purpose, best-for, syntax, anti-patterns, and guidance. No wasted words; every sentence earns its place.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a tool with 4 parameters (no output schema), the description is remarkably complete. It covers purpose, syntax, format selection, layout guidance, common mistakes, and points to examples. The agent can use this without confusion.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema covers all parameters (100%), so baseline is 3. Description adds value by explaining the ordering of layout engines ('dagre=hierarchical', 'elk=complex') and highlighting PNG speed tradeoff. These enrich the schema's enum descriptions.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states 'Render a D2 architecture diagram to SVG or PNG' with a specific verb and resource. It distinguishes itself from siblings like render_mermaid by emphasizing D2's unique syntax and suitability for complex architecture diagrams.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Provides clear context: 'Best for: architecture diagrams with containers, nested groups, icons, and complex layouts.' Includes explicit anti-patterns and a reference to get_tool_guide for examples. Could be improved by explicitly stating when not to use (e.g., if the goal is a sequence diagram, use Mermaid).

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

render_graphvizA

Render a Graphviz DOT diagram to SVG or PNG. Best for: dependency graphs, network diagrams, tree structures, large auto-layout graphs (100+ nodes). IMPORTANT: Source must be wrapped in 'digraph G { ... }' or 'graph G { ... }'. Use '->' with digraph, '--' with graph. Engine guide: dot=hierarchical, neato=spring, fdp=force-directed, sfdp=large graphs, circo=circular, twopi=radial. Call get_tool_guide('graphviz') for examples.

ParametersJSON Schema
NameRequiredDescriptionDefault
engineNoLayout engine: dot=hierarchical, neato=spring, fdp=force-directed, sfdp=large, circo=circular, twopi=radialdot
formatNoOutput format. SVG preferred.svg
dot_sourceYesGraphviz DOT source. Must start with 'digraph G {' or 'graph G {'. Use '->' for directed, '--' for undirected.

TDQS

A4.4/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Discloses syntax requirements (digraph G, -> vs --) and engine options with their typical uses. With no annotations, it carries the burden well, though tips on error handling or limits are missing.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Very concise: single paragraph with logical flow from purpose to use cases to important notes to engine guide to additional resources. No wasted words.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given no output schema and moderate complexity (3 params), description covers syntax, engines, and use cases adequately. Minor omission: difference between SVG and PNG output.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema covers all parameters (100%), but description adds extra context: engine guide (e.g., 'sfdp=large graphs') and syntax rules. Adds value beyond schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

States exactly what it does: 'Render a Graphviz DOT diagram to SVG or PNG.' Differentiates from siblings like render_mermaid and render_d2 by specifying Graphviz format.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Provides clear use cases: dependency graphs, network diagrams, tree structures, large auto-layout graphs. Also mentions calling get_tool_guide for examples, but does not explicitly exclude scenarios.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

render_html_pageA

Render a self-contained themed HTML page from body content. No Docker required. Wraps your HTML in a design system with typography, depth tiers, cards, grids, KPIs, badges, and section navigation. IMPORTANT: body_html is the INNER content only — do NOT include , , or tags. Use mf- prefixed CSS classes: mf-hero, mf-elevated, mf-card, mf-grid, mf-kpi, mf-badge-success, etc. Themes: swiss (clean docs), midnight (presentations), warm (reports), terminal (dev content). Call get_tool_guide('html_page') for design system reference and examples.

ParametersJSON Schema
NameRequiredDescriptionDefault
themeNoVisual theme: swiss=clean docs, midnight=dark editorial, warm=cream reports, terminal=dev monospaceswiss
titleYesPage title (shown in header and browser tab)
body_htmlYesHTML body content (inner content only, no <html>/<head>/<body>). Use mf- prefixed classes for styling.
descriptionNoPage description (shown below title and in meta tag)
nav_sectionsNoSection names for floating navigation. Must match id attributes on <section> elements in body_html.

TDQS

A4.4/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations provided, so description carries full burden. It reveals that the tool wraps HTML in a design system, requires specific mf- prefixed CSS classes, and warns against including outer tags. It also mentions the themes and references get_tool_guide for details. No discussion of auth or rate limits, but those are less critical for a rendering tool.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, well-structured paragraph with no redundant information. Key points are front-loaded (what it does, no Docker) and all details are relevant. Every sentence adds value, making it concise yet comprehensive.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

The tool has 5 parameters and no output schema. The description covers the main input constraints and provides a reference for more details. It could have mentioned the return value format (a complete HTML string), but overall it is sufficiently complete for the tool's simplicity and supported by the schema.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, but the description adds value by explaining usage beyond schema: e.g., body_html is 'inner content only', themes are expanded with contexts, nav_sections must match id attributes. This clarifies semantics beyond the schema descriptions.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool renders a self-contained themed HTML page from body content, mentioning key features like themes and CSS classes. It distinguishes from sibling tools like render_mermaid or render_slides by focusing on HTML page rendering and referencing get_tool_guide for design system details.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides clear when-to-use guidance (rendering a themed HTML page) and notes no Docker required. It gives important instructions about body_html content. However, it does not explicitly exclude use cases or list alternatives beyond the sibling tools.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

render_mermaidA

Render a Mermaid diagram to SVG or PNG. Supports: flowchart, sequenceDiagram, erDiagram, stateDiagram-v2, gantt, pie, gitGraph, classDiagram, journey, mindmap. IMPORTANT: Code must start with diagram type (e.g., 'flowchart TD'). Do NOT use semicolons. Do NOT use HTML tags in labels. Anti-patterns: 'graph' (use 'flowchart'), unquoted special chars in labels, >25 nodes without subgraphs. Call get_tool_guide('mermaid') for examples and full anti-pattern list.

ParametersJSON Schema
NameRequiredDescriptionDefault
codeYesMermaid diagram code. Must start with diagram type declaration (e.g., 'flowchart TD', 'sequenceDiagram'). No semicolons.
themeNoMermaid theme. 'neutral' best for docs, 'forest' for dark backgroundsdefault
formatNoOutput format. SVG preferred (smaller, git-friendly diffs)svg

TDQS

A4.6/5.0
Behavior5/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations provided, so description carries full burden. It discloses required syntax, anti-patterns (33+25 node warning), and output format preferences. This gives clear behavioral expectations.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two sentences plus bullet-like anti-pattern list. Front-loaded with purpose. Every sentence earns its place, no fluff.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Covers purpose, constraints, and output format. No output schema, but typical render tool returns image data. Could specify if output is base64 or file, but enough for agent to infer. Omits nothing critical.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema covers all 3 parameters with descriptions (100% coverage). Description adds value: suggests SVG for git-friendly diffs, theme use-cases (neutral for docs, forest for dark). Adds meaningful guidance beyond schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states 'Render a Mermaid diagram to SVG or PNG' and lists 10 supported diagram types, matching the tool name and distinguishing it from siblings like render_d2 or render_graphviz.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Provides explicit constraints: code must start with diagram type, no semicolons, no HTML tags, and warns against anti-patterns. Also directs to get_tool_guide for examples. Lacks explicit when-not-to-use vs alternatives, but sibling names imply context.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

render_slidesA

Render a self-contained HTML slide deck with keyboard/touch navigation, progress bar, and transitions. No Docker required. Supports 8 slide types: title, content, split, code, quote, kpi, image, section. IMPORTANT: slides is a JSON array string of objects with title, content (HTML), and optional type. Content density limits: max 6 bullets per slide, max 10 code lines, max 25 words for quotes, max 30 slides total. Call get_tool_guide('slides') for slide type reference and examples.

ParametersJSON Schema
NameRequiredDescriptionDefault
themeNoVisual theme for the slide deckswiss
titleYesPresentation title
authorNoAuthor name (shown on title slide)
slidesYesJSON array of slide objects: [{"title": "...", "content": "HTML...", "type": "content|title|split|code|quote|kpi|image|section"}]

TDQS

A4.4/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations provided, so description carries full burden. Discloses key behaviors: self-contained output, navigation, transitions, and content density limits (max bullets, code lines, quote words, total slides). Does not cover error handling or idempotency, but provides useful constraints.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Three sentences front-loaded with purpose and key features. No redundant words. Efficiently conveys essential information, with a call to action for additional details.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Covers purpose, constraints, and references external guide. Lacks details on output format (though implied) and error handling for limit violations. Given no output schema and 4 parameters, description is adequate but could be more thorough on edge cases.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, baseline 3. Description adds value by explaining that 'slides' is a JSON array string with specific structure and optional type, and includes content density limits per slide type, which go beyond the schema description.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Clearly states the tool renders a self-contained HTML slide deck with specific features (keyboard navigation, progress bar). The verb 'render' and resource 'slide deck' are explicit. Distinguishes from sibling tools like render_mermaid and render_chart by focusing on slides.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Mentions 'No Docker required' as a contextual note, suggesting alternatives might require Docker. Directs users to call get_tool_guide('slides') for more info, but does not explicitly state when to avoid this tool or compare directly with siblings.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

TDQS

A4.1/5.0
Disambiguation5/5

Each rendering tool targets a distinct output format (Mermaid, D2, Graphviz, Vega-Lite, HTML, slides), with no overlapping purposes. get_tool_guide and list_assets have clearly separate roles.

Naming Consistency5/5

All rendering tools follow the 'render_<format>' pattern, with 'get_tool_guide' and 'list_assets' using a consistent verb_noun structure. Naming is uniform and predictable.

Tool Count5/5

8 tools cover a broad range of media types and supporting functions (guide, listing). This is well-scoped for a media rendering server without being excessive or minimal.

Completeness4/5

The tool surface covers key generation tasks for multiple formats and includes guidance and asset listing. Minor gap: no tool to delete or update assets, but this aligns with a generate-focused server.

Maintenance

ActivityInactive
ResponsivenessSyncing

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

  • A
    license
    B
    quality
    D
    maintenance
    Enables AI assistants to generate and render Mermaid diagrams (flowcharts, sequence diagrams, etc.) as PNG/SVG images with local file saving and HTTP access URLs. Supports batch processing and intelligent caching for efficient diagram creation.
    1
    12
    1
    MIT
  • A
    license
    Not graded
    quality
    D
    maintenance
    Enables AI agents to generate stylized images from text and code, with syntax highlighting and markdown formatting support.
    MIT

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/PavelGuzenfeld/mcp-media-forge'

If you have feedback or need assistance with the MCP directory API, please join our Discord server