AI Toolkit

概要

AI Toolkit は、互いに関連する 3 つの画面をエディターに追加します。

• Ask AI — ツールバーから開くダイアログです。ワンクリックで使える 7 つのモード（校正、書き換え、短縮、拡張、要約、翻訳、理由付きの修正）、選択範囲／文書全体の対象の切り替え、適用前のインラインのプレビューがあります。
• AI Chat — 複数回のやり取りのための、ドッキングされたサイドパネルです。対象の範囲を認識し、クイックプロンプトと、AI の各応答に対するコピー／適用／挿入／置換の操作があります。
• AI Review — 保留中、承認済み、却下済みの提案を保持し続けるキューです。セッションをまたいだレビューのために、オプションでサーバー側の記録と同期できます。

3 つとも同じ aiToolkitResolver フックと同じオペレーションの仕様を共有しているので、ある画面でプレビューした提案を、別の画面で承認、却下、またはエスカレーションできます。

デモモード。リゾルバーを設定していない場合、プラグインには決定的な動作をする defaultResolveAction が用意されているので、API キーもネットワークへの呼び出しもなしに、予測どおりの出力で Ask AI、Chat、Review をローカルで動かせます。

インストール

AI Toolkit のスタイルシートとスクリプトは、エディターのコアバンドルの後に読み込みます。既定では、プラグインは読み込まれたときに、標準の default、basic、full、mobile のツールバーのプリセットに Ask AI ボタンを自動的に追加します。

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<link rel="stylesheet" href="/richtexteditor/plugins/aitoolkit.css" />

<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>
<!-- aitoolkit.js is bundled inside all_plugins.js.
     Include it separately only if you are loading plugins piecemeal. -->

<div id="editor"></div>
<script>
  var editor = new RichTextEditor("#editor", {
    toolbar: "full",
    aiToolkitPersistenceKey: "my-editor-ai"
  });
</script>

設定。ダウンロードした rte.js の先頭には、プレーンテキストで書かれた編集可能な RTE_DefaultConfig ブロックがあります。これを開いて、エディターのほかのすべての設定と一緒に、AI の既定値（永続化のキー、ラベル、リゾルバーのエンドポイントなど）を変更できます。別の設定ファイルを読み込む必要はありません。AI のボタンが表示される可能性がある場合は（既定のツールバーであっても）、常に aitoolkit.css が必要です。そうでないと、AI のドロップダウンメニューのサイズが正しくなりません。AI を有効にしたままボタンの自動追加を止めるには、aiToolkitAutoToolbarButtons: false を設定し、必要なツールバーにだけ aiassist を追加してください。

var editor = new RichTextEditor("#editor", {
  toolbar: "default",
  aiToolkitAutoToolbarButtons: false
});

3 つの画面

組み込みのモード

各モードは、config.aiToolkitDialogModes 内の { id, title, description } のエントリです。Ask AI ダイアログの Action ドロップダウンに表示され、runQuickAction(id) で呼び出せます。

これらは、デモ用リゾルバーのための決定的なスタブです。aiToolkitResolver を接続すると、各モードの処理方法は自分の関数が決めます。新しいモードを登録することもできます。カスタムアクションを参照してください。

aiToolkitResolver フック

これが唯一の拡張ポイントです。リゾルバーは構造化されたリクエストを受け取り、結果（または結果に解決される Promise）を返します。表示、プレビュー、レビュー、適用はエディターが処理します。

var editor = new RichTextEditor("#editor", {
  toolbar: "full",
  aiToolkitResolver: async function (request) {
    var reply = await fetch("/api/ai", {
      method: "POST",
      body: JSON.stringify({
        mode: request.mode,
        text: request.source,
        language: request.language
      })
    }).then(function (r) { return r.json(); });

    return {
      result: reply.text,             // string: the AI output
      reason: reply.explanation,      // string: why this change
      operations: [{                  // structured plan (optional)
        type: "preview-suggestion",
        text: reply.text,
        reason: reply.explanation
      }]
    };
  }
});

リクエストの形

レスポンスの形

次のフィールドを任意に含む、単純なオブジェクトを返します。すべて省略可能なので、不要なものは省いてください。

文字列や Promise を返すこともできます。文字列は { result: <that string> } になり、Promise は await されます。

オペレーションの種類

オペレーションは、リゾルバーが返せる構造化された計画です。エディターはそれらを順に実行します（または、計画のパネルからユーザーの操作で 1 つずつ実行します）。

独自のオペレーションの種類は、editor.aiToolkit.registerOperationHandler(type, handler) で登録できます。

editor.aiToolkit.registerOperationHandler("insert-callout", function (op, ctx) {
  // ctx = { snapshot, resolved, request, action, editor }
  ctx.editor.insertHTML(
    '<aside class="callout">' + ctx.editor.htmlEncode(op.text) + '</aside>'
  );
  return true; // mark the operation as handled
});

プログラムからの API

すべての画面は、editor.aiToolkit を通じてコードから開いて操作できます。

// Open the Ask AI dialog
editor.aiToolkit.openDialog({ presetMode: "rewrite", autoRun: false });

// Quick actions (no dialog) - target: selection if present, else whole document
editor.aiToolkit.runQuickAction("proofread");
editor.aiToolkit.runQuickAction("translate", { language: "spanish" });

// Panels
editor.aiToolkit.openChatPanel({ focusComposer: true });
editor.aiToolkit.openReviewPanel({ focusPanel: true });
editor.aiToolkit.closeChatPanel();
editor.aiToolkit.closeReviewPanel();
editor.aiToolkit.toggleChatPanel();
editor.aiToolkit.toggleReviewPanel();

// Resolve without rendering - useful for tests + headless flows
editor.aiToolkit.resolveAction("rewrite", { source: "hello world" })
  .then(function (resolved) { console.log(resolved.result); });

// Swap the resolver at runtime
editor.aiToolkit.setResolver(myResolver);

// Review queue
var pending = editor.aiToolkit.getSuggestions();
editor.aiToolkit.clearSuggestions();
editor.aiToolkit.saveSuggestionLedger();
editor.aiToolkit.loadSuggestionLedger();

カスタムのアクションとモード

分野に特化したアクション（SEO 向けの書き換え、法的な条項のチェック、文体の統一など）を登録できます。それらは同じダイアログ、チャット、レビューの UI に組み込まれます。

// Add a new dialog mode (appears in the Action dropdown)
editor.aiToolkit.registerDialogMode({
  id: "seo",
  title: "SEO rewrite",
  description: "Rewrite for stronger keyword coverage while preserving meaning."
});

// Register the action with a target (where output goes by default)
editor.aiToolkit.registerAction({
  id: "seo",
  title: "SEO rewrite",
  target: "selection-preview",
  resolverMode: "seo"          // passed as request.mode to your resolver
});

// Your resolver handles it just like built-in modes
config.aiToolkitResolver = function (request) {
  if (request.mode === "seo") { /* call your SEO service */ }
  /* ... */
};

永続化とリモートの記録

AI Review ドロワーの提案は、自分で指定するキーで localStorage に保存されます。エディターのインスタンスごと（たとえば文書ごと）に範囲を分けるには、aiToolkitPersistenceKey を設定してください。

new RichTextEditor("#editor", {
  aiToolkitPersistenceKey: "doc-42-review",     // localStorage scope
  aiToolkitSuggestionLedgerUrl: "/api/ai/ledger", // optional GET/POST for cross-session sync
  aiToolkitReviewLogUrl: "/api/ai/review-log",    // optional activity feed endpoint
  aiToolkitReviewSyncInterval: 15000               // ms between sync polls (default 15s)
});

記録の URL を設定すると、プラグインは開いたときに GET し、承認／却下のときに POST するので、レビューのキューがセッションをまたいで残り、レビュー担当者の間で共有されます。

BYOK（独自のキーの持ち込み）

重要：エディターは API キーを受け付けることも保存することもありません。キーはサーバー側のシークレットマネージャーに置くものです。

推奨される BYOK のパターンは次のとおりです。

1. 管理用の UI で、テナントがプロバイダーを選んでキーを貼り付けます。フォームはバックエンドに POST します。
2. バックエンドは、テナント単位でキーをシークレットマネージャーに書き込みます。
3. エディターの aiToolkitResolver は、セッションの Cookie を付けて /api/ai に POST します。ブラウザーにキーはありません。
4. バックエンドはテナントのキーを調べてプロバイダーを呼び出し、必要な部分だけに整えたレスポンスを返します。

動作する管理用のフォーム、振り分けを行うリゾルバー、Express 風のサーバーの概略については、BYOK のデモを参照してください。

設定リファレンス

試してみる

上記のすべての画面は、公開デモで API キーなしで動作します。

• AI Toolkit のデモ — Ask AI、クイックアクション、Chat、Review ドロワー
• BYOK のデモ — 管理用の設定フォーム、振り分けを行うリゾルバー、サーバー側の概略
• AI Toolkit の概要 — 実際に動くエディターのモックアップを含む紹介ページ