NoaCGStudio

Downloads

Three tools you can install

NoaCG runs in your browser. Install one of these only if you need what it does.

For playout on CasparCG

NoaCG Bridge

A small Windows program that connects NoaCG Playout to your CasparCG server. From the same rundown it also plays the templates and clips already on the server.

Using OBS, vMix or another browser source? You do not need the Bridge. Start the production, open Output links and add the output URL as a browser source.

Windows · version latest

Download NoaCG Bridge

Set it up

  1. Download NoaCG Bridge onto the computer you run the show from. There is nothing to install.
  2. Double-click it and leave its window open. Windows warns you once, because the file is not signed yet: choose More info, then Run anyway.
  3. A NoaCG page opens in your browser. Press Pair this browser. If the browser asks about your local network, allow it. To use another browser, copy the link into it instead.
  4. Enter the IP address of your CasparCG server and press Connect. NoaCG Bridge remembers the server and its channels, so the next browser you pair connects by itself and opens with the same setup.
  5. To put a production on air, open it and press Put on air in its Playout panel.

To pair another browser later, press Enter in the NoaCG Bridge window and copy the new link into it, or use the button for it in Playout settings.

The Bridge accepts connections from this computer only. It does not open CasparCG to the internet.

Which browser

Recommended Chrome or Edge. Asks once whether the site may reach your local network, and remembers the answer.
Supported Firefox. Asks whether the site may access other apps and services on this device. That is the Bridge, so choose Allow.
Not supported Safari. As far as we know, it does not let a web page reach a program on the same computer, and has no setting to allow it. Use another browser, or noacg caspar play from a terminal.

Does the browser ask again every day, or in every tab? Then it is set to forget site permissions, as shared school computers often are. Whoever manages the computer can allow noacg.studio for good with a browser policy:

  • Firefox: the LocalNetworkAccess policy with "SkipDomains": ["noacg.studio"]. It survives “delete everything on close”.
  • Chrome and Edge: the LoopbackNetworkAccessAllowedForUrls policy (older versions: LocalNetworkAccessAllowedForUrls) with https://noacg.studio.

If you run NoaCG on a computer in your own studio network instead of using noacg.studio, the browser does not ask at all.

The CasparCG guide in the docs

For Stream Deck

NoaCG Companion module

Runs a production from a Stream Deck or any surface Bitfocus Companion supports: Take, Out, cues and a graphic's live controls, with what is on air shown on the keys.

Companion 4.3 or later · version latest

Download the Companion module

Set it up

  1. In Companion open Modules, press Import module package and choose the file you downloaded.
  2. Publish the production once. On its page open Setup, then Stream Deck panel…, and press Pair a panel. The code works once, for five minutes.
  3. In Companion open Connections, search NoaCG and press Add beside NoaCG: NoaCG Studio, then Add again. Type the code into Pairing code, name the panel and press Save.
  4. Keep the production page open. In Companion's Buttons, open Presets, press NoaCG, open a section and drag keys onto your buttons.

The full guide

For AI coding agents

NoaCG CLI

A command-line tool that lets your AI coding agent, such as Claude Code or Codex, make NoaCG graphics. The agent builds the graphic, and the CLI checks that it plays and saves it to your NoaCG library.

npm package @noacg/cli · version latest

Needs Node.js 20 or newer, and Chrome or Edge for the check.

Paste this into your agent

It works in the session you have open, with nothing to install first. To save to your library, approve the sign-in it opens in your browser.

Use npx -y @noacg/cli@0.12.4 for every NoaCG command in this session. Run its doctor, read docs skill and follow it, and check whoami. If I am not logged in, run login so I can connect my account in the browser; if I decline, work locally and say nothing was saved. Then ask what to make. Build, validate with screenshots, save every graphic to my library, and return the direct links. Clearly state anything still pending or unconfirmed.

Optional: install the plugin

The plugin adds the NoaCG skill to your agent from its next session on. In Claude Code, it also gives you /noacg:graphic.

Claude Code. Type this in a session (version 2.1.275 or newer):

/plugin install noacg --marketplace NoaCG/NoaCG-Studio

Codex. Run these in a terminal:

codex plugin marketplace add NoaCG/NoaCG-Studio
codex plugin add noacg@noacg-studio

Another agent that supports MCP. Add a local (stdio) MCP server with the command npx and the arguments -y @noacg/cli mcp:

npx -y @noacg/cli mcp

From a terminal

Saving a graphic needs a free NoaCG account. Sign in once on each computer and approve it in the browser:

npx @noacg/cli login

Every command runs through npx with nothing installed. To install it once instead:

npm i -g @noacg/cli

The coding agent guide in the docs · @noacg/cli on npm

For your own SVGs

SVG examples

Nineteen graphics made in Illustrator, with an example for every SVG import behaviour: credits, scores, votes, quizzes and more. Each comes with editable artwork, its SVG export and a preview.

Change one or draw your own the same way, save it as SVG and import it into NoaCG.

NoaCG-SVG-examples.zip · Illustrator (.ai), SVG, PNG and PDF

Download the examples

Browse the SVG examples · How to name the layers