mod のインターフェースギャラリー

mod は要素を組み合わせてインターフェースを描画します。要素には、テキスト、ボックス、ボタン、フィールドのほか、コンテンツを整形してくれるものがいくつかあります。このページのサンプルは要素を描画するコードを示しており、ほとんどにはターミナルのペインに表示された結果のスクリーンショットが付いているため、見た目で要素を選べます。描画の仕組みを学ぶには、まずインターフェースに描画するをお読みください。主なプロパティと、各要素を描画するアプリについては要素リファレンスを参照してください。すべてのプロパティは型宣言に記載されています。

サンプルを試す

このページのサンプルはスニペットであり、mod 全体ではありません。それぞれが 1 つの要素と、その中に入れ子になったもののコードです。サンプルを自分のターミナルで確認するには、以下の手順で小さな mod を作成し、そこにサンプルを貼り付けます。この mod は /gallery コマンドを追加し、このコマンドがペインを開いてそこにサンプルを描画します。ペインは、幅の広いフルスクリーンのターミナルではトランスクリプトの横に表示されるサイドバーで、それ以外ではプロンプトの上に表示される枠付きの領域です。

mod を作成する

gallery という名前のディレクトリを作成し、その中に .claude-plugin ディレクトリと hooks ディレクトリを作成します。各ファイルについては mod を作成するで説明しています。マニフェストを gallery/.claude-plugin/plugin.json として保存します。

gallery/.claude-plugin/plugin.json

{
  "name": "gallery",
  "version": "0.1.0",
  "description": "Opens a pane that draws one sample",
  "author": { "name": "Your Name" }
}

gallery/hooks/hooks.json でエントリポイントを指定します。

gallery/hooks/hooks.json

{
  "modules": ["./register.js"]
}

コードを gallery/hooks/register.js として保存します。これはペインを開く /gallery コマンドを追加し、そのペインに Plain text を描画します。

gallery/hooks/register.js

// Stands in for your own callback in the samples that take one
const noop = () => {}
// The Select sample keeps its choice here
let picked = 'md'

// The Raster sample packs its cells with this function
const DEFAULT_COLOR = 0x01000000
function cellsOf(rows) {
  const numbers = rows.flat().flatMap(([char, color]) => [char.codePointAt(0), color, DEFAULT_COLOR])
  return new Uint8Array(Uint32Array.from(numbers).buffer).toBase64()
}

export function register(on) {
  on('session.start', async ($, e, next) => {
    await $.command.register({ name: 'gallery', description: 'Open the sample pane' })
    return next(e)
  })

  on('command.run', { command: 'gallery' }, async ($) => {
    await $.ui.open({ id: 'gallery', focus: true, closeOnEscape: true })
    return {}
  })

  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
    if (e.requestId !== 'gallery') return next(e)
    const { Box, Text, Button, Input, Select, Link, Markdown, Code, Raster, Svg } = $.ui.resolve(e)
    // Replace the element after return with a sample
    return Text({ children: ['Plain text'] })
  })
}

mod を実行する

シェルで、gallery を含むディレクトリから Claude Code を起動します。

claude --plugin-dir ./gallery

Claude Code のプロンプトで /gallery を実行します。Plain text が表示されたペインが開きます。

サンプルを差し替える

このページからサンプルをコピーします。register.js で、return の後に続くように Text({ children: ['Plain text'] }) をサンプルで置き換え、ファイルを保存します。Claude Code は保存のたびにモジュールを再読み込みするため、もう一度 /gallery を実行すると新しいサンプルが表示されます。

要素を選ぶ

サンプルは画面に表示したい内容ごとにまとめられています。

テキストを表示する：Text、Markdown、Link
コードと変更を表示する：Code
要素を配置する：Box
入力を受け付ける：Button、Input、Select
画像を描画する：Raster、Svg、Image、Client

テキストを表示する

画面に文字を表示する要素は 3 つあります。独自のスタイルを付ける Text、すでに整形済みのコンテンツ向けの Markdown、URL 向けの Link です。

`Text`

Text は、指定したスタイルで文字列を描画します。このサンプルでは、スタイルごとに 1 行ずつ表示します。

Box({
  flexDirection: 'column',
  children: [
    Text({ children: ['Plain text'] }),
    Text({ bold: true, children: ['bold'] }),
    Text({ italic: true, children: ['italic'] }),
    Text({ underline: true, children: ['underline'] }),
    Text({ strikethrough: true, children: ['strikethrough'] }),
    Text({ dimColor: true, children: ['dimColor'] }),
    Text({ inverse: true, children: ['inverse'] }),
    Text({ color: 'red', children: ["color: 'red'"] }),
    Text({ backgroundColor: 'blue', children: ["backgroundColor: 'blue'"] }),
  ],
})

スタイル名が付いた 9 行のテキストを表示したペイン：plain、bold、italic、underline、strikethrough、グレーの dimColor、inverse、赤の color、青の backgroundColor。

dimColor はテキストをグレーで描画します。backgroundColor はテキストの幅の分だけ塗りつぶします。

`Markdown`

Markdown は、Claude の返答と同じようにテキストを整形します。内容は children ではなく text で渡します。

Markdown({
  text: '## Release notes\n\nThis build has **two** fixes and one `flag`:\n\n- Faster start\n- Fewer prompts\n\n> Quoted text',
})

太字の見出し Release notes、続いて太字の単語 1 つと色付きのコード単語 1 つを含む文、2 項目のリスト、左側にバーが付いた斜体の引用を表示したペイン。

見出しは # 記号なしで太字で描画されます。インラインコードはバッククォートなしで色付きで描画されます。引用は左側にバーが付いた斜体で描画されます。

`Link`

Link は、ラベルとそれに続く URL を描画します。

Link({ href: 'https://code.claude.com/docs', label: 'Claude Code docs' })

1 行を表示したペイン：ラベル Claude Code docs と、グレーの URL。

ターミナルは URL をラベルの後にテキストとして描画します。クリックで開くかどうかはユーザーのターミナルによって異なります。

コードと変更を表示する

Code は、Claude Code 独自のシンタックスカラーでソーステキストを描画するか、差分を描画します。

`Code`

language を指定するか、Claude Code に言語を推測させるために path を渡します。startLine を指定すると、その番号から行番号が付きます。

Code({
  language: 'javascript',
  startLine: 1,
  source: "const name = 'mods'\nconsole.log('hello ' + name)",
})

シンタックスカラーで表示された、行番号付きの 2 行の JavaScript を表示したペイン。

色はユーザーのテーマに従います。

差分としての `Code`

format: 'diff' を指定すると、source は 1 つ以上の unified diff のハンクになります。

Code({
  format: 'diff',
  source: '@@ -1,3 +1,3 @@\n # Mods\n-A mod is a plugin.\n+A mod is a plugin that runs code.\n Read on.',
})

4 行の差分を表示したペイン。削除された行は赤、追加された行は緑で網掛けされ、それぞれ行番号が付いています。追加された行では、that runs code という語がより濃く網掛けされています。

Claude Code は @@ の行の代わりに行番号を描画します。削除された行と追加された行が似ている場合、変更された語はより濃く網掛けされます。

要素を配置する

`Box`

Box は中の要素を行または列に配置し、枠線を描画することもできます。このサンプルでは、単語の行を枠線付きのボックスの上に置いています。

Box({
  flexDirection: 'column',
  gap: 1,
  children: [
    Box({
      flexDirection: 'row',
      columnGap: 4,
      children: [Text({ children: ['a row'] }), Text({ children: ['of three'] }), Text({ children: ['items'] })],
    }),
    Box({
      borderStyle: 'round',
      paddingX: 1,
      children: [Text({ children: ["borderStyle: 'round'"] })],
    }),
  ],
})

4 列ずつ間隔を空けて 1 行に並んだ 3 つの語、空行、1 行のテキストを囲む角丸の枠線を表示したペイン。枠線はペインの幅いっぱいに伸びています。

枠線はペインの幅まで伸びます。

入力を受け付ける

Button、Input、Select はコントロールです。ユーザーは Tab でこれらの間を移動し、フォーカスのあるものを操作します。どのキーが届くかについてはキーボードフォーカスとホットキーを参照してください。 focus: true でペインを開くと、ペインにキーボードフォーカスが与えられます。入力した文字はフォーカスを持つ Input に届くため、ペインが開いた時点で入力を受け付けるべきフィールドには autoFocus: true を追加してください。

`Button`

ボタンは onPress を実行します。このサンプルでは、デフォルトの形式、ホットキー付きの plain ボタン、淡色のボタンを示します。

Box({
  flexDirection: 'column',
  children: [
    Button({ key: 'save', label: 'Save', onPress: noop }),
    Button({ key: 'next', label: 'Next', hotkey: 'n', plain: true, onPress: noop }),
    Button({ key: 'skip', label: 'Skip', dimColor: true, onPress: noop }),
  ],
})

1 行に 1 つずつ 3 つのボタンを表示したペイン：角括弧付きの Save、角括弧なしで n が色付きの n: Next、グレーで角括弧付きの Skip。

フォーカスのあるボタンは反転表示で描画されます。ここではユーザーが Tab を 2 回押しています。

同じ 3 つのボタンで、2 番目の n: Next が反転表示で描画されています。

`Input`

Input は 1 行のテキストフィールドで、ユーザーが Enter を押すと onSubmit を実行します。

Input({
  key: 'title',
  label: 'Title',
  placeholder: 'Type a title and press Enter',
  value: '',
  submitLabel: 'save',
  onSubmit: noop,
})

フォーカスがないとき、フィールドはラベルとプレースホルダーを表示します。

1 行を表示したペイン：ラベル Title と、グレーのプレースホルダー Type a title and press Enter。

フォーカスがあると、ラベルが太字になり、カーソルが表示され、⏎ の後に submitLabel が表示されます。

同じフィールドで、ラベルが太字になり、プレースホルダーの最初の文字にブロックカーソルがあり、リターン記号の後に save という語が続いています。

入力するとプレースホルダーが置き換わります。

同じフィールドに入力された文字 Rel があり、その後にリターン記号と save という語が続いています。

`Select`

Select では、ユーザーが複数の選択肢から 1 つを選べます。選択された選択肢の value を引数に onSelect を実行します。

Select({
  key: 'format',
  label: 'Format',
  value: picked,
  options: [
    { value: 'md', label: 'Markdown' },
    { value: 'html', label: 'HTML' },
    { value: 'txt', label: 'Plain text' },
  ],
  onSelect: (value) => {
    picked = value
  },
})

閉じているときは、ラベルと現在の選択肢を表示します。

1 行を表示したペイン：ラベル Format、現在の選択肢 Markdown、小さな下向き矢印。

開いているときは、選択肢を一覧表示し、そのうち 1 つをマークします。

開いたピッカーで、ラベルの下に 3 つの選択肢が並んでいます。2 番目の選択肢 HTML が反転表示で描画されています。

ユーザーが選択肢を選ぶと、リストが閉じます。

画像を描画する

`Raster`

Raster は色付きの文字セルのグリッドで、ヒートマップ、スパークライン、ゲーム盤などに使います。描画はターミナルが行います。このサンプルでは、スターターモジュールの cellsOf 関数を使用しています。この関数は、セルを Raster が受け取る文字列にパックします。詳しくは色付きセルのグリッドを描画するで説明しています。

Raster({
  key: 'grid',
  columns: 3,
  rows: 2,
  cells: cellsOf([
    [['█', 0x2e7d32], ['█', 0xf9a825], ['█', 0xc62828]],
    [['█', 0x2e7d32], ['█', 0x2e7d32], ['█', 0xf9a825]],
  ]),
})

色付きブロックの小さなグリッドを表示したペイン。3 つずつ 2 行で、緑、琥珀、赤、続いて緑、緑、琥珀。

Raster は各色をより小さなパレットに丸めるため、0x2e7d32 は #337733 として描画されます。

`Svg`

Svg は Desktop アプリで SVG ドキュメントを描画します。

Svg({
  alt: 'Three bars of rising height',
  width: 120,
  height: 60,
  source:
    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 60"><rect x="10" y="40" width="20" height="20" fill="#2e7d32"/><rect x="50" y="25" width="20" height="35" fill="#f9a825"/><rect x="90" y="5" width="20" height="55" fill="#c62828"/></svg>',
})

ターミナルでは、Svg だけを返すペインは空のまま開きます。そこに別のものを描画するには、e.surface を確認して別のツリーを返してください。

`Image` と `Client`

さらに 2 つの要素については、ここにサンプルがありません。Image はターミナルで PNG または生のピクセルを描画します。Client は、アニメーションやポインター入力のために、ユーザーが用意した別のファイルが描画する領域です。これらのプロパティは要素リファレンスに記載されています。

mod が描画できる場所を確認する

サンプルはすべてペインに描画しています。mod は他の場所にも描画でき、Claude Code を呼び出して代わりに何かを表示させることもできます。

ペインとバンド：描画する場所を選ぶ
スピナーなど Claude Code 自身の行：Claude Code がすでに描画しているものを変更する
トースト、ステータスライン、ログ行：ターンを開始せずに何かを表示する
質問ダイアログ：ユーザーが決定するまでツール呼び出しを保留する

次のステップ

インターフェースに描画する：タブ付きのペインを段階的に作成する
描画をテストする：テストからボタンを押す
要素リファレンス：各要素の主なプロパティと、それを描画するアプリ

プラグイン

プラグインを使用する

プラグインを作成

Mod

マーケットプレイスを運営する

組織のプラグインを管理

トラブルシューティング

リファレンス

mod のインターフェースギャラリー

サンプルを試す

要素を選ぶ

テキストを表示する

`Text`

`Markdown`

`Link`

コードと変更を表示する

`Code`

差分としての `Code`

要素を配置する

`Box`

入力を受け付ける

`Button`

`Input`

`Select`

画像を描画する

`Raster`

`Svg`

`Image` と `Client`

mod が描画できる場所を確認する

次のステップ

​サンプルを試す

​要素を選ぶ

​テキストを表示する

​Text

​Markdown

​Link

​コードと変更を表示する

​Code

​差分としての Code

​要素を配置する

​Box

​入力を受け付ける

​Button

​Input

​Select

​画像を描画する

​Raster

​Svg

​Image と Client

​mod が描画できる場所を確認する

​次のステップ

サンプルを試す

要素を選ぶ

テキストを表示する

`Text`

`Markdown`

`Link`

コードと変更を表示する

`Code`

差分としての `Code`

要素を配置する

`Box`

入力を受け付ける

`Button`

`Input`

`Select`

画像を描画する

`Raster`

`Svg`

`Image` と `Client`

mod が描画できる場所を確認する

次のステップ