AIに導入してもらう
導入プロンプトをコピーして、プロジェクトで作業しているコーディングAI（Claude Code、Codex、Cursorなど）に貼り付けてください。NeedMarkのインストール、needmark.config.tsの作成、開発サーバーへの組み込みまで行い、レビューの始め方を案内します。
このプロジェクトにNeedMark（https://github.com/mssh21/needmark）を導入してください。NeedMarkは開発時だけ動くツールで、私がブラウザでUIを指してコメントを書くと、コーディングAI向けにローカルファイルとして保存されます。 1. `node -v`を実行してください。Node.js 22.12以降が必要です。古い場合は作業を止めて私に伝えてください。 2. 開発サーバーを持つアプリのフォルダで作業してください（モノレポならそのパッケージのフォルダ）。一番近いロックファイルでパッケージマネージャーを決めます。pnpm-lock.yamlならpnpm、yarn.lockならYarn、package-lock.jsonか、ロックファイルがなければnpmです。NeedMarkのコマンドはそれぞれ`pnpm exec needmark`、`yarn needmark`、`npx needmark`になります。以下では<needmark>と書きます。 3. 開発用の依存として入れてください。`pnpm add -D needmark`、`yarn add -D needmark`、`npm install -D needmark`のいずれかです。 4. needmark.config.tsがまだなければ、質問なしで初期設定し、開発サーバーにつないでください。 <needmark> init --language=ja --share=local --capture=dom --connect=yes コメントをGitで共有するよう私が頼んだ場合だけ、--share=gitにしてください。 5. initの出力を読んでください。initはvite.config.*かastro.config.*にneedmark()を追加するか、Next.jsのdevスクリプトを`needmark dev --`経由にし、変更した行を表示します。その変更はそのまま残してください。開発サーバーを検出できなかったと表示された場合は、https://github.com/mssh21/needmark/blob/main/docs/getting-started.ja.md#開発サーバーにつなぐ の手順で手動でつないでください。ほかの変更はしないでください。NeedMarkは本番ビルドには入りません。 6. `<needmark> list`を実行し、`[]`と表示されることを確認してください。 7. あなたがMCPサーバーを使える場合は、NeedMarkを登録するか私に確認してください。登録するとコメントとスクリーンショットを直接読めます。私が同意した場合だけ、このフォルダで登録してください。例：`claude mcp add needmark -- <needmark> mcp`、`codex mcp add needmark -- <needmark> mcp` 8. 最後に、いつもの開発コマンドで開発サーバーを起動し、いつもどおり開けばページ下部にNeedMarkのツールバーが出ると伝えてください。NEEDMARK=offでNeedMarkなしで起動できること、`<needmark> remove`で接続を元に戻せることも伝えてください。
導入
Node.js 22.12以降が必要です。アプリのプロジェクトで実行します。
pnpm add -D needmark pnpm exec needmark init pnpm dev
npm install -D needmark npx needmark init npm run dev
yarn add -D needmark yarn needmark init yarn dev
いつもどおりアプリを開くと、ページ下部にNeedMarkのツールバーが表示されます。
initは最初に推奨設定（レビュー画面はターミナルの言語、コメントはこのコンピューターだけに保存、スクリーンショットはページを描き直して作成、開発サーバーへの接続）を示します。Enterでそのまま使い、nと答えると説明付きの一覧から項目ごとに選べます。質問と表示は英語です。変更した行はすべて表示し、アプリのソースと本番ビルドには触れません。
- Vite（React、Vueなど）：
vite.config.*のpluginsにneedmark()を追加します。 - Astro：
astro.config.*のvite.pluginsにneedmark()を追加します。 - Next.js：
devスクリプトをneedmark dev --経由にし、いつものポートでツールバーが出るようにします。
NEEDMARK=offで自分だけNeedMarkなしで起動でき、needmark.config.tsのenabled: falseで全員分を止められます。needmark removeで接続を元に戻せます。ほかの開発サーバーは開発サーバーにつなぐを参照してください。
使い方
- 開発サーバーでアプリを開き、ツールバーのコメント（+）を押します。
Shift+Cでも始められます。 - 要素をクリックするか、範囲をドラッグします。Shift+クリックで複数の要素、Alt/Option+ドラッグで文章の一部を選べます。
- コメントを書き、修正・相談・質問から種類を選んで保存します。スクリーンショットは付けても付けなくても構いません。
- コメント一覧を開いてプロンプトをコピーを押し、AIに貼り付けます。
- AIがコードを直し、どう確認したかを返信します。結果を自分で確かめてから、コメントを解決済みにします。
保存されるもの
コメントは1件ずつプロジェクト内のフォルダになります。ファイルを読めるAIならどれでも扱え、ローカルに置いたままにもGitで共有もできます。
.needmark/feedback/<id>/ comment.md コメント、ページ、対象 context.json セレクタ、コンポーネント、ソースの位置 screenshot.png 任意。パスワード欄はマスク
AIに直接読ませる
Claude Code、Codex、Gemini CLIなどMCPに対応したAIは、needmark mcpを通してコメントの一覧とスクリーンショットを読み、返信や解決、新しいコメントの待ち受けができます。追加のサーバーやアカウントは不要で、ネットワークのポートも開きません。
# Claude Code claude mcp add needmark -- pnpm exec needmark mcp # Codex codex mcp add needmark -- pnpm exec needmark mcp
# Claude Code claude mcp add needmark -- npx needmark mcp # Codex codex mcp add needmark -- npx needmark mcp
# Claude Code claude mcp add needmark -- yarn needmark mcp # Codex codex mcp add needmark -- yarn needmark mcp
MCPを使わない場合も、CLIのneedmark export、watch、reply、resolveで同じことができます。