NoaCG Broadcast Graphics and Playout — Claude Code MCP server
Builds broadcast graphics for NoaCG Studio inside coding agents. It scaffolds templates, tests layouts, generates preview frames, and packages projects for live playout.
claude mcp add --env NOACG_URL=<NOACG_URL> --env NOACG_AGENT_KEY=<NOACG_AGENT_KEY> --transport stdio cli -- npx -y @noacg/cliWhat NoaCG Broadcast Graphics and Playout does
This server runs the @noacg/cli tool over stdio, giving coding agents direct control over graphic authoring workflows. It allows assistants to generate fresh template scaffolds, inspect declared interface inputs, and bundle finished scenes.
All graphics rely on standard web files, including HTML and JavaScript templates. The built-in validator tests manifest conformance against runtime rules and captures transparent PNG frames of off-air or on-air states. Connecting to a remote workspace requires configuring the NOACG_URL endpoint and a valid NOACG_AGENT_KEY.
Transmitting live graphics to physical CasparCG playout hardware requires the dedicated NoaCG Bridge binary. This package focuses strictly on template authoring and local testing.
What it helps with
- Scaffold broadcast graphic templates from defined field schemas
- Validate graphic files against host runtime requirements
- Capture preview frames across different broadcast states
- Bundle multiple graphic overlays into production packages
Example prompts for the agent
- Scaffold a neutral scoreboard graphic inside ./football-scoreboard
- Validate the template in ./lower-third and render preview screenshots
- Package the graphics from ./stream-overlay for broadcast deployment
How to install NoaCG Broadcast Graphics and Playout
Platform CLI
claude mcp add --env NOACG_URL=<NOACG_URL> --env NOACG_AGENT_KEY=<NOACG_AGENT_KEY> --transport stdio cli -- npx -y @noacg/cliReplace <…> with your own values
Platform CLI
codex mcp add cli --env NOACG_URL=<NOACG_URL> --env NOACG_AGENT_KEY=<NOACG_AGENT_KEY> -- npx -y @noacg/cliReplace <…> with your own values
Config file
{
"mcpServers": {
"cli": {
"command": "npx",
"args": [
"-y",
"@noacg/cli"
],
"env": {
"NOACG_URL": "<NOACG_URL>",
"NOACG_AGENT_KEY": "<NOACG_AGENT_KEY>"
}
}
}
}Replace <…> with your own values
Config file
{
"servers": {
"cli": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@noacg/cli"
],
"env": {
"NOACG_URL": "<NOACG_URL>",
"NOACG_AGENT_KEY": "<NOACG_AGENT_KEY>"
}
}
}
}Replace <…> with your own values
Platform CLI
gemini mcp add -e NOACG_URL=<NOACG_URL> -e NOACG_AGENT_KEY=<NOACG_AGENT_KEY> cli npx -y @noacg/cliReplace <…> with your own values
Step by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about NoaCG Broadcast Graphics and Playout
How to install NoaCG Broadcast Graphics and Playout in Claude Code?
Run claude mcp add --env NOACG_URL=<NOACG_URL> --env NOACG_AGENT_KEY=<NOACG_AGENT_KEY> --transport stdio cli -- npx -y @noacg/cli in your terminal, replacing the placeholders with your actual deployment URL and key.
What does this MCP server do?
It equips coding agents with tools to scaffold, validate, take frame snapshots, and bundle HTML-based live graphics for NoaCG Studio.
Does this package handle live playout to CasparCG?
No, signal delivery to CasparCG is handled by the standalone NoaCG Bridge app. This server is strictly meant for template creation and validation.
