NoaCG Broadcast Graphics and Playout

@noacg/cli

NoaCG CLI - NoaCG Studio へとつなぐエージェント用の入口です。コーディングエージェントから、またはご自身のターミナルから、あらゆる NoaCG デプロイ環境に対して、NoaCG 用の放送グラフィックスを作成できます。ひな形の作成、検証、確認、スクリーンショットの撮影、パッケージ化、保存を行えます。詳しくはリポジトリの docs/AGENT_CLI.md をご覧ください。

パッケージ名は @noacg/cli、インストールされるコマンド名は noacg です。 そのため、npm i -g @noacg/cli を実行すると、noacg validate … のように使えます。以下のコマンドはすべて、実際に入力する表記になっています。

1 つのツール、3 つの入口。 MCP サーバーは、別途選ぶ必要のある 2 つ目のツールではありません。noacg mcp を実行すると、この同じパッケージが MCP サーバーとして動作します。また、Claude Code / Codex のプラグインには noacg-graphic スキルが含まれており、この同じパッケージをターミナルから操作します。エージェントに合わせて入口を選んでください。

入口	対象	インストール
プラグイン	Claude Code、Codex	以下の 2 つのコマンドを実行します。スキル（Claude Code では /noacg:graphic）を導入します。グラフィックの作成を始めるまで何も実行しません。常時稼働する MCP サーバーを追加する場合は、オプションの noacg-mcp プラグインを使います
MCP サーバー	あらゆる MCP クライアント	stdio 経由で npx -y @noacg/cli mcp を実行
ターミナル	シェルコマンドを実行するエージェント、およびご自身	npm i -g @noacg/cli

どれを選んでも、noacg-graphic スキルの内容は同じです。NoaCG グラフィックで公開すべきものと、そこに至るまでの手順を定めています。これは契約であり、デザインの指針ではありません。

NoaCG Playout を CasparCG サーバーに接続するには、別のツール NoaCG Bridge が必要です。noacg.studio/downloads からダウンロードしてください（リポジトリの Releases ページにある最新の Bridge リリース）。グラフィックの作成を目的としたものではなく、独自のバージョン番号があり、このパッケージに含まれるものは必要ありません。

エージェントに貼り付けてください

手軽に始める方法は、開いているセッションでこの CLI を npx 経由で実行するプロンプトを使うことです。事前のインストールは不要です。エージェントがセットアップを確認し、必要に応じてブラウザーで NoaCG アカウントに接続してから、作りたいものを尋ねます。完成したグラフィックは、それぞれリンクとともにライブラリに保存されます。noacg.studio/downloads からコピーしてください。実行する CLI の正確なバージョンが指定されています。

手動で実行したい方のために、実行されるコマンドを以下に示します。

インストール

npx @noacg/cli doctor                 # no install: runs the published build
npm i -g @noacg/cli                   # or install it once

Claude Code：noacg プラグインには /noacg:graphic としてスキルが含まれており、事前のインストールは不要です。このスキルはターミナルからこの CLI を実行します。オプションの noacg-mcp プラグインを追加すると、常時稼働する MCP サーバーを利用できます（費用については cli/plugin-mcp/README.md をご覧ください）。 Claude Code のセッション（2.1.275 以降）で、1 つのコマンドを実行すると、マーケットプレイスが追加され、確認を求められた後、インストールされます。

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

ターミナルまたはセットアップスクリプトからインストールする場合も、同じインストールを 2 つのコマンドで実行できます。

claude plugin marketplace add NoaCG/NoaCG-Studio
claude plugin install noacg@noacg-studio

MCP サーバーのみを追加する場合は、claude mcp add noacg -- npx -y @noacg/cli mcp を実行します。

このマーケットプレイスからインストールしたプラグインは、更新を指示するまで自動更新されません。 Claude Code は Anthropic 独自のマーケットプレイスでのみ自動更新を有効にするため、スキルのテキストはインストールしたバージョンのままです。一度 /plugin の Marketplaces で noacg-studio を選び、Enable auto-update を有効にすると、新しいバージョンがセッションの開始時に適用されます。または、手動で更新します： claude plugin marketplace update noacg-studio && claude plugin update noacg@noacg-studio。 実行中の CLI よりインストール済みのバージョンが古い場合は、noacg doctor にそのバージョンが表示されます。

Codex：同じリポジトリから、同じプラグインを利用できます。codex plugin add でスキルがインストールされるため、手動でコピーする必要はありません。codex plugin add noacg-mcp@noacg-studio を実行すると、同じ方法でオプションの常時稼働サーバーを追加できます。

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

Codex でも、Codex 独自の表記で同様に実行できます：codex plugin marketplace upgrade noacg-studio && codex plugin add noacg@noacg-studio。

codex plugin がない Codex では、代わりに次の手順でインストールします。このパッケージから skill/noacg-graphic/ を ~/.codex/skills/noacg-graphic/ にコピーし、 その後 codex mcp add noacg -- npx -y @noacg/cli mcp を実行します。

任意の MCP クライアント：npx -y @noacg/cli mcp を stdio サーバーとして実行します。コマンドは npx、引数は -y @noacg/cli mcp です。

使い方

npx @noacg/cli types
npx @noacg/cli scaffold --type scoreboard --design neutral --name "Football scoreboard" --out ./football-scoreboard
#  ...design it: edit football_scoreboard.html, css/template.css, js/template.js ...
#  (the html is named after the GRAPHIC, not the folder: the name's spaces become underscores)
npx @noacg/cli validate ./football-scoreboard --screenshots ./shots
npx @noacg/cli inspect ./football-scoreboard
npx @noacg/cli login                  # once per machine: a scoped key that can only create graphics in your library
npx @noacg/cli save ./football-scoreboard

コマンド	内容
doctor	このツールが使用するブラウザーと NoaCG のデプロイ（NOACG_URL）、検出したブリッジのバージョン、キーが保持されているかを確認します。また、インストール済みプラグインのスキルがこの CLI より古い場合と、CLI が npm の latest より古い場合は、それぞれ行を表示します。更新が不要な場合は、どちらも表示されません。
types	デプロイが認識するグラフィックの種類（フィールド、オペレーターイベント、デザイン、ニュートラルなスキャフォールド）を表示します。
scaffold --type <id> [--design <id>|neutral] [--name N] [--set key=value]... --out <dir>	種類をもとに、完全で有効なパッケージを作成します。カタログのシャーシ、または NEUTRAL スキャフォールド（プレーンなスパイン上のフィールド、マシン、コントロール、ランタイム）を生成します。
scaffold --fields "Label:kind[=value],..." [--name N] --out <dir>	宣言したフィールドだけを持つ、種類を指定しないグラフィックを作成します。
validate <dir|zip> [--no-bench] [--no-house-contract] [--screenshots <dir>]	静的ゲートとライブランタイムベンチを実行し、検出事項をすべて学習用の行として表示します。レディネスの行、オプションのオフエア／オンエア／ストレス状態のフレームも生成し、ソースからパッケージの生成部分を再生成します。サードパーティ製 OGraf パッケージでは、マニフェストへの準拠とホスト主導のライフサイクルチェックを行います。
inspect <dir|zip>	グラフィック独自のコントラクトから NoaCG が導き出すオペレーター用サーフェス（入力、ボタン、手順）を表示します。
screenshot <dir|zip> --state off|onair|stress --out <png>	透明なフレームを 1 枚生成します。
pack <dir|zip>... --name N [--save] [--out <file.noacgpack.json>] [--rundown <cues.json>] [--layer n]...	複数のグラフィックを 1 つのパッケージにまとめます。レイヤーと、任意でキューのランダウンを指定できます。--save はグラフィックを検証して NoaCG Home にパッケージを送信します。パッケージは Home → Productions に表示され、Install ボタンでプロダクションを作成できます。--out は Import a package カードから読み込めるファイルとして書き出します。共有する場合は、--save とともに --share --license cc-by-4.0 --shown-as S --description D を指定すると、キューを除いたパッケージをレビュー用に Community packs へ送信します。
docs [topic]	スキルのリファレンステキストを表示します。
mcp	MCP サーバーとして stdio 経由で同じ動詞を提供します。
login [--name N] [--no-browser] [--key <noacg_ak_…>]	このマシン用のスコープ付きエージェントキーを取得します。NoaCG の同意ページを開き、ループバックリスナーでワンタイムコードを受信して引き換えます。このキーで作成できるのは、ライブラリ内のグラフィックだけです。キーは Settings → Account → Agent access、または logout で無効化できます。CI では NOACG_AGENT_KEY を使用します。
logout [--local] / whoami	このマシンのキーを無効化して忘れる／保持中のキーと、現在も有効かどうかを表示します。
save <dir|zip>... [--name N] [--folder F] [--no-bench]	検証（ゲートとベンチ）を実行し、エラーがあれば保存を拒否します。その後、グラフィックを 1 回の送信で NoaCG ライブラリに保存し、それぞれの #/graphic/<id> リンクを表示します。すべて保存されるか、何も保存されないかのどちらかです。中断後に同じコマンドを再実行すると処理を再開し、二重に保存することはありません。保存先はライブラリであり、プロダクションではありません。
bridge [--port 8899] [--origin URL]… [--no-open] [--quiet]	NoaCG Bridge：ブラウザーからは扱えない AMCP ソケットを保持し、NoaCG ページがプレイアウトプロトコルを通信するループバック専用 HTTP サーフェスを提供します。ワンクリックでブラウザーとペアリングできるリンクを開きます。127.0.0.1 にバインドし、それ以外は拒否します。NoaCG 以外をオリジンとするリクエストも拒否します。起動したままにしてください。以前は caspar agent という名前で、現在も同じように実行できます。
caspar status|send|play|stop [--server HOST] [--amcp-port 5250]	ブラウザーを使わずに同じ AMCP を利用します。サーバーの状態確認、コマンドの送信、またはプロダクションの出力 URL をチャンネルに設定できます（play --url <output URL> --channel 1 --layer 20）。
任意のコマンドに --json を追加すると、標準出力に 1 つの JSON オブジェクトを出力します。終了コード：0 は問題なし、1 は検出事項あり、または拒否、2 は使用法／I/O エラーです。環境変数：NOACG_URL（デフォルトは https://noacg.studio。開発サーバーまたはセルフホスト環境も使用できます）、NOACG_BROWSER（Chromium の実行ファイル。指定しない場合は、システムの Chrome／Edge または Playwright がインストールした Chromium を使用します）、NOACG_AGENT_KEY（CI 用のキー。保存済みのキーより優先されます）、NOACG_CREDENTIALS_DIR（複数のログインを 1 つのアカウントで使う場合に、login がキーを保存するフォルダー。デフォルトはユーザーごとの設定ディレクトリです）。

ディスク上のパッケージ

<slug>/
  SOURCES - edit these                  GENERATED - never edit; `noacg validate` rebuilds them
    <slug>.html                            <slug>.ograf.json   the OGraf v1 manifest (+ v_noacg)
    css/template.css                       graphic.mjs         the OGraf Web Component
    js/template.js                         FIELDS.md  README.md  controlpanel.html
    js/gsap.min.js  images/  fonts/

1 つのフォルダーが、有効な EBU OGraf v1 Graphic、SPX／CasparCG パッケージ、そして編集するワークスペースを兼ねます。ZIP にしてスタジオの Import 画面からインポートでき、OGraf レンダラーにドロップすると再生されます。このフォルダーがそのまま満たすのは、この 2 つです。グラフィック自体は通常の HTML、CSS、JS で、NoaCG は同じソースから OBS／vMix オーバーレイ、H2R、LiveOS 向けにエクスポートします。NoaCG に取り込み、あらゆるものへ出力できます。

MCP

同じ動詞を stdio 経由で使います。npx -y @noacg/cli mcp を実行します。ツールは 1 つで、名前は noacg、ターミナルと同じ文法です。command が動詞（types、scaffold、validate、inspect、screenshot、docs、save。最後の save は noacg login の後に使用）で、その他の引数はその動詞のフラグです。そのため、{ "command": "validate", "path": "./my-graphic", "screenshots": true } はフレームを画像として返します。スキルのリファレンスもリソースです（noacg://docs/<topic>）。noacg-graphic スキルは skill/ に含まれています。

ツールを 7 つではなく 1 つにしているのは、MCP クライアントがサーバーの設定されたすべてのセッションで、グラフィックに関係のないセッションも含め、各ツールのスキーマをモデルのコンテキストに追加するためです。この形式は約 590 トークンで、置き換え前の 7 ツール形式の約 1,160 トークンに比べて少なくなっています。使い方の説明はスキルにあり、グラフィックを作成するときにのみ読み込まれます。

bridge と caspar は、意図的に MCP ツールにしていません。これらはライブの送出ハードウェアを操作するもので、オーサリングエージェントではなくオペレーターが判断すべきことだからです。

開発

npm install
npm run build                                # generates the plugin's skill copy, then tsc
NOACG_URL=http://localhost:5174 npm test     # against a NoaCG dev server's /bridge
npm run check:skill                          # every shipped copy of the skill matches cli/skill/

ライセンス

Apache-2.0 — NoaCG Studio 自体のライセンスである AGPL-3.0-only とは意図的に異なります。このツールは、コーディングエージェントが NoaCG を利用するための入り口です。そのため、ポリシー審査なしでどこにでもインストールできるよう、寛容なライセンス、明示的な特許許諾、そしてこのツールで作成したものにコピーレフトが及ばない条件でライセンスされています。Studio の AGPL はホストされたアプリケーションを保護するものであり、そこに接続するクライアントを制限する意図はありませんでした。

作成したグラフィックはあなたのものです。どちらのライセンスも、このツールがひな形を生成するテンプレートや、エクスポートして放送に使用するものには適用されません。

ひな形から生成されるパッケージに含まれるため、サードパーティに関する注意事項が 1 つあります。グラフィックにバンドルされるアニメーションランタイム（js/gsap.min.js）は GreenSock の GSAP で、当社のものではなく、独自の標準ライセンスに従います。これはこの npm パッケージの一部ではなく、デプロイ時に生成されるグラフィックに含まれます。