TypeScriptでClaude Code modを作る

1. ひとつの動作を決める

保存や通信を追加する前に/helloコマンドを作りましょう。Mods対応のClaude Codeを使い、オンライン例と異なる場合はインストール済みCLIの型宣言を優先します。

2. 三つのファイルを作る

Manifestは.claude-plugin/plugin.json、モジュール一覧はhooks/hooks.json、入口はhooks/register.tsxです。modulesのパスはhooks.jsonからの相対パスです。ジェネレーターでslash-commandを選ぶとダウンロードできます。

3. ハンドラーを登録する

claude-codeのRegisterは型だけをimportします。session.startでコマンドを登録し、command.runで処理します。next(e)は元のイベントを継続し、コマンドの戻り値は応答になります。型のためだけにNodeの実行時依存を追加しないでください。

4. ローカルで検証する

信頼できるテスト用プロジェクトで読み込み、生成された.claude-plugin/typesを確認します。プラグインのパスを付けてclaude plugin validateを実行し、/hello、再読み込み、停止を試します。構造の検証だけでは実行時のすべては確認できません。

5. 機能を一つずつ増やす

UI要素は対応するsurfaceの要素表から取得します。DOMやReactを前提にしません。バージョン、権限、導入と削除を記録し、エラーと後片付けも確認してください。

公式作成ガイド · 公式API

import type { Register } from "claude-code";
export const register: Register = (on) => {
  on("session.start", async ($, e, next) => {
    await $.command.register({ name: "hello", description: "Say hello" });
    return next(e);
  });
  on("command.run", { command: "hello" }, async () => ({ text: "Hello" }));
};