---
title: ターミナル UI (TUI) の使用
description: Code2Prompt のインタラクティブなターミナル UI をマスターし、ファイル選択、設定調整、プロンプト生成を視覚的に行う方法を学びます。
---

import { Card, CardGrid, Steps, Aside, Tabs, TabItem } from "@astrojs/starlight/components";

<Card title="チュートリアル概要">
`Code2Prompt` の完全インタラクティブターミナル UI (TUI) を使いこなす方法をステップバイステップで解説します。
</Card>

## TUI の起動

以下のように `--tui` フラグを付けてコマンドを実行すると、TUI が起動します。

```sh
code2prompt path/to/codebase --tui
```

## 1. 選択タブ (ファイルツリー)

- **ナビゲーション:** `↑` / `↓` でカーソル移動、`←` / `→` でディレクトリ展開/縮小  
- **選択:** `Space` でファイルまたはディレクトリ全体を選択/解除  
- **検索:** `s` または `/` で検索モードに入り、テキストやワイルドカード (`*`, `?`) で即座にフィルタリング  
- **終了:** `Enter` または `Esc` で検索モードを抜け、通常のナビゲーションに戻ります

<img src="/assets/images/tui1.png" alt="選択タブ" style="width: 100%;" />

## 2. 設定タブ

出力形式やトークナイザーなど、生成前に調整したい設定を視覚的に変更できます。

<img src="/assets/images/tui2.png" alt="設定タブ" style="width: 100%;" />

## 3. 統計タブ

トークン使用量を確認し、LLM に送信する前にコストを把握できます。`←` / `→` で 3 つのビューを切り替えます。

<img src="/assets/images/tui3.png" alt="統計タブ" style="width: 100%;" />

## 4. テンプレートタブ

Handlebars テンプレートを作成・編集できるマルチカラムレイアウトです。キーボードショートカットで 3 つのサブパネルをすばやく切り替えられます。

<img src="/assets/images/tui4.png" alt="テンプレートタブ" style="width: 100%;" />

## 5. 出力タブ

ファイル選択と設定が完了したら `Enter` を押して最終出力を生成します。出力タブでは生成されたプロンプトがそのまま表示されます。

- **スクロール:** `↑` / `↓`, `PgUp`, `PgDn` でテキストを確認  
- **コピー:** `c` でプロンプト全体をクリップボードにコピー  
- **保存:** `s` でローカルの Markdown ファイルに保存（例: `prompt_20260613_204753.md`）

不足しているファイルがあれば、`1` を押して選択タブに戻り、ファイルをマークして `Enter` でリアルタイムに再生成できます。

<img src="/assets/images/tui5.png" alt="出力タブ" style="width: 100%;" />