jpskill.com
📦 その他 コミュニティ

noui-setup

NoUIプロジェクトを初めて利用する際に、必要な環境設定、関連ファイルのインストール、Chrome拡張機能の読み込みなど、NoUIの各種機能を実行するための準備をスムーズに行うSkill。

📜 元の英語説明(参考)

Use this skill when the user wants to set up the NoUI project for the first time, install dependencies, configure the environment, load the Chrome extension, or prepare to run any NoUI skill. Triggers on "set up NoUI", "install NoUI", "configure noui", "load the Chrome extension", "first time setup", "get NoUI running", or "I want to start using NoUI".

🇯🇵 日本人クリエイター向け解説

一言でいうと

NoUIプロジェクトを初めて利用する際に、必要な環境設定、関連ファイルのインストール、Chrome拡張機能の読み込みなど、NoUIの各種機能を実行するための準備をスムーズに行うSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o noui-setup.zip https://jpskill.com/download/9729.zip && unzip -o noui-setup.zip && rm noui-setup.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/9729.zip -OutFile "$d\noui-setup.zip"; Expand-Archive "$d\noui-setup.zip" -DestinationPath $d -Force; ri "$d\noui-setup.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して noui-setup.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → noui-setup フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

NoUI セットアップ

NoUI プロジェクトのための初回環境セットアップです。他の NoUI スキルを実行する前に、これを実行してください。

すべてのコマンドは noui/ ディレクトリ(リポジトリのルート)から実行します。


重要なルール (絶対に違反しないこと)

  • すべての CLI 呼び出しには 常に .venv/bin/python cli/main.py を使用してください。システムの pythonpython3 は絶対に使用しないでください。
  • 個々のパッケージを pip install することは 絶対に しないでください。すべての依存関係は poetry install --no-root によって管理されます。
  • pip install -e . を実行することは 絶対に しないでください。このプロジェクトでは pyproject.tomlpackage-mode = false が設定されており、編集可能なインストールはサポートされていません。
  • バックエンドを実行する前に、常に .env.example.env にコピーし、ANTHROPIC_API_KEY を設定してください。
  • 拡張機能をロードする際は、常に 開発者モードで noui/extension/ からロードしてください。パッケージ化されたインストールパスは動作しません。

ステップ 1 — 仮想環境の作成

python3 -m venv .venv

リポジトリのルートに .venv/ を作成します。以降のすべてのコマンドは .venv/bin/python を使用します。

python3 --version が 3.11 より古いバージョンを返す場合は、python3.11 -m venv .venv または python3.12 -m venv .venv を明示的に使用してください(どちらもサポートされています。このプロジェクトでは >=3.11 が必要です)。


ステップ 2 — 依存関係のインストール

.venv/bin/python -m pip install poetry
.venv/bin/python -m poetry install --no-root

pyproject.tomlpackage-mode = false が設定されているため、--no-root が必要です。すべてのランタイム依存関係 (FastAPI, FastMCP, Anthropic SDK, SQLAlchemy, httpx など) は .venv にインストールされます。

よくあるエラー:

エラー 修正
ModuleNotFoundError: No module named 'poetry' 上記の pip install poetry ステップを再実行してください
python3: command not found またはバージョン < 3.11 OS のパッケージマネージャーを使用して Python 3.11 または 3.12 をインストールし、そのインタープリターで venv を再作成してください
This build backend cannot be used in 'editable' mode pip install -e . を実行しました。代わりに poetry install --no-root を使用してください

ステップ 3 — 環境変数の設定

cp .env.example .env

.env を開き、以下を入力してください。

変数 必須 目的
ANTHROPIC_API_KEY はい MCP コンパイラの LLM 呼び出しを強化します
TABBY_API_HOST 認証フローのみ Tabby エンドポイント (デフォルト: http://localhost:8080)
TABBY_ADMIN_TOKEN 認証フローのみ Tabby プロファイルをプロビジョニングするための管理者トークン
NOUI_PORT いいえ バックエンドポート (デフォルト: 8002)

認証されていないアプリのサポートのみが必要な場合は、ANTHROPIC_API_KEY のみが必須フィールドです。


ステップ 4 — Chrome 拡張機能のロード

  1. Chrome を開き、chrome://extensions/ に移動します。
  2. デベロッパーモード を有効にします (右上隅のトグル)。
  3. パッケージ化されていない拡張機能を読み込む をクリックします。
  4. noui/extension/ ディレクトリを選択します。
  5. NoUI Workflow Recorder アイコンが Chrome ツールバーに表示されます。

アイコンが表示されない場合は、パズルピースの拡張機能メニューをクリックしてピン留めしてください。

確認: アイコンをクリックします。記録モードのオプションを含む NoUI ポップアップが表示されるはずです。


ステップ 5 — インストール確認

.venv/bin/python cli/main.py status

バックエンドがまだ起動していない場合の予想される出力:

NoUI backend:
  Not reachable at http://localhost:8002

これにより、Python、venv、およびすべてのインポートが機能していることが確認されます。この時点でバックエンドが実行されていないことは想定どおりです。


意思決定フロー

開始
  │
  ├─ .venv/ は存在しますか?
  │     ├─ いいえ → ステップ 1: python3 -m venv .venv
  │     └─ はい → スキップ
  │
  ├─ 依存関係はインストールされていますか?
  │     ├─ いいえ → ステップ 2: pip install poetry + poetry install --no-root
  │     └─ はい → スキップ
  │
  ├─ .env は存在しますか?
  │     ├─ いいえ → ステップ 3: cp .env.example .env + ANTHROPIC_API_KEY を入力
  │     └─ はい → ANTHROPIC_API_KEY が設定されていることを確認
  │
  ├─ Chrome 拡張機能はロードされていますか?
  │     ├─ いいえ → ステップ 4: noui/extension/ からパッケージ化されていない拡張機能を読み込む
  │     └─ はい → スキップ
  │
  └─ ステップ 5: .venv/bin/python cli/main.py status
       └─ 準備完了 → /record-login または /record-workflow に進む

CLI コマンドリファレンス

コマンド 目的
.venv/bin/python cli/main.py status バックエンドの到達可能性とセッション数を検証します
.venv/bin/python cli/main.py start ポート 8002 で FastAPI バックエンドを起動します
.venv/bin/python cli/main.py stop バックエンドを停止します
.venv/bin/python cli/main.py tabby status Docker Compose サービスと Tabby API の稼働状況を確認します
.venv/bin/python cli/main.py tabby start Docker Compose インフラストラクチャと Tabby API を起動します
.venv/bin/python cli/main.py tabby stop [--infra] Tabby API (およびオプションで Docker Compose) を停止します
.venv/bin/python cli/main.py tabby setup 完全な Tabby プロビジョニング: エージェントクライアント + ServiceProfiles + TABBY_* を .env に書き込みます
.venv/bin/python cli/main.py tabby session status 設定されたプロファイルのブラウザセッションの状態を表示します
.venv/bin/python cli/main.py tabby session ensure 正常なブラウザセッションが存在することを確認します
.venv/bin/python cli/main.py tabby session stop ローカルで実行されているワーカーを停止します

Tabby setup — 認証されたアプリのワークフローでは、tabby start を実行してから tabby setup (インタラクティブ) を実行して、エージェントの資格情報と ServiceProfiles をプロビジョニングします。これにより、TABBY_CLIENT_IDTABBY_CLIENT_SECRET、および TABBY_API_URL.env に書き込まれます。プロビジョニングステップには、TABBY_ADMIN_TOKEN (または tabby/.env.localADMIN_BOOTSTRAP_EMAIL/ADMIN_BOOTSTRAP_PASSWORD) がまだ必要です。


トラブルシューティング

現象 修正
cli/main.pyImportError または ModuleNotFoundError が発生する 依存関係がインストールされていません。poetry install --no-root を再実行してください
バックエンドから .env not found エラーが発生する noui/ ディレクトリから cp .env.example .env を実行してください
拡張機能に "Manifest file is missing" と表示される noui/extension/ ( manifest.json を含むディレクトリ) を選択したことを確認してください
拡張機能はロードされるが、ポップアップが空白である chrome://extensions/ でエラーを確認し、削除してパッケージ化されていない拡張機能を再ロードしてください
起動時にポート 8002 が既に使用されている lsof -i :8002 で競合するプロセスを見つけます。.envNOUI_PORT=8003 を設定して別のポートを使用します
生成されたツールが "No Tabby page matching ..." を発生させる Tabby ブラウザでターゲットサイトを開くか、`

(原文がここで切り詰められています)

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

NoUI Setup

One-time environment setup for the NoUI project. Run this before any other NoUI skill.

All commands run from the noui/ directory (the repo root).


Critical Rules (Never Violate)

  • ALWAYS use .venv/bin/python cli/main.py for all CLI invocations — never the system python or python3
  • NEVER run pip install individual packages — all deps are managed by poetry install --no-root
  • NEVER run pip install -e . — the project uses package-mode = false in pyproject.toml and does not support editable installs
  • ALWAYS copy .env.example to .env and set ANTHROPIC_API_KEY before running the backend
  • ALWAYS load the extension from noui/extension/ in Developer mode — the packed install path does not work

Step 1 — Create the Virtual Environment

python3 -m venv .venv

Creates .venv/ in the repo root. All subsequent commands use .venv/bin/python.

If python3 --version returns something older than 3.11, use python3.11 -m venv .venv or python3.12 -m venv .venv explicitly (both are supported; the project requires >=3.11).


Step 2 — Install Dependencies

.venv/bin/python -m pip install poetry
.venv/bin/python -m poetry install --no-root

--no-root is required because pyproject.toml sets package-mode = false. All runtime deps (FastAPI, FastMCP, Anthropic SDK, SQLAlchemy, httpx, etc.) are installed into .venv.

Common errors:

Error Fix
ModuleNotFoundError: No module named 'poetry' Re-run the pip install poetry step above
python3: command not found or version < 3.11 Install Python 3.11 or 3.12 via your OS package manager, then re-create the venv with that interpreter
This build backend cannot be used in 'editable' mode You ran pip install -e . — use poetry install --no-root instead

Step 3 — Configure Environment Variables

cp .env.example .env

Open .env and fill in:

Variable Required Purpose
ANTHROPIC_API_KEY Yes Powers the MCP compiler's LLM calls
TABBY_API_HOST Auth flows only Tabby endpoint (default: http://localhost:8080)
TABBY_ADMIN_TOKEN Auth flows only Admin token for provisioning Tabby profiles
NOUI_PORT No Backend port (default: 8002)

If you only need unauthenticated app support, ANTHROPIC_API_KEY is the only required field.


Step 4 — Load the Chrome Extension

  1. Open Chrome and navigate to chrome://extensions/
  2. Enable Developer mode (toggle, top-right corner)
  3. Click Load unpacked
  4. Select the noui/extension/ directory
  5. The NoUI Workflow Recorder icon appears in the Chrome toolbar

If the icon does not appear, click the puzzle-piece Extensions menu and pin it.

Verify: Click the icon — you should see the NoUI popup with recording mode options.


Step 5 — Verify the Installation

.venv/bin/python cli/main.py status

Expected output when the backend has not yet been started:

NoUI backend:
  Not reachable at http://localhost:8002

This confirms Python, the venv, and all imports are working. The backend not running at this point is expected.


Decision Flow

Start
  │
  ├─ Does .venv/ exist?
  │     ├─ No  → Step 1: python3 -m venv .venv
  │     └─ Yes → skip
  │
  ├─ Are deps installed?
  │     ├─ No  → Step 2: pip install poetry + poetry install --no-root
  │     └─ Yes → skip
  │
  ├─ Does .env exist?
  │     ├─ No  → Step 3: cp .env.example .env + fill in ANTHROPIC_API_KEY
  │     └─ Yes → verify ANTHROPIC_API_KEY is set
  │
  ├─ Is Chrome extension loaded?
  │     ├─ No  → Step 4: Load unpacked from noui/extension/
  │     └─ Yes → skip
  │
  └─ Step 5: .venv/bin/python cli/main.py status
       └─ Ready → proceed to /record-login or /record-workflow

CLI Command Reference

Command Purpose
.venv/bin/python cli/main.py status Verify backend reachability and session counts
.venv/bin/python cli/main.py start Start the FastAPI backend on port 8002
.venv/bin/python cli/main.py stop Stop the backend
.venv/bin/python cli/main.py tabby status Check Docker Compose services and Tabby API liveness
.venv/bin/python cli/main.py tabby start Start Docker Compose infra and Tabby API
.venv/bin/python cli/main.py tabby stop [--infra] Stop the Tabby API (and optionally Docker Compose)
.venv/bin/python cli/main.py tabby setup Full Tabby provisioning: agent client + ServiceProfiles + write TABBY_* to .env
.venv/bin/python cli/main.py tabby session status Show browser session state for configured profiles
.venv/bin/python cli/main.py tabby session ensure Ensure a HEALTHY browser session exists
.venv/bin/python cli/main.py tabby session stop Stop the locally-running worker

Tabby setup — for authenticated app workflows, run tabby start then tabby setup (interactive) to provision agent credentials and ServiceProfiles. This writes TABBY_CLIENT_ID, TABBY_CLIENT_SECRET, and TABBY_API_URL to .env. You still need TABBY_ADMIN_TOKEN (or ADMIN_BOOTSTRAP_EMAIL/ADMIN_BOOTSTRAP_PASSWORD in tabby/.env.local) for the provisioning step.


Troubleshooting

Symptom Fix
ImportError or ModuleNotFoundError on cli/main.py Deps not installed — re-run poetry install --no-root
.env not found error from backend Run cp .env.example .env from the noui/ directory
Extension shows "Manifest file is missing" Confirm you selected noui/extension/ (the dir containing manifest.json)
Extension loads but popup is blank Check chrome://extensions/ for errors; remove and re-load unpacked
Port 8002 already in use on start lsof -i :8002 to find conflicting process; set NOUI_PORT=8003 in .env to use another port
Generated tool raises "No Tabby page matching ..." Open the target site in the Tabby browser, or tabby session ensure --profile <slug>
Generated tool raises Connection refused on port 9222 Tabby's CDP endpoint is down — tabby session ensure --profile <slug>