AIが続きの文章を提案してくれるInputManJSの「AIサジェストチップ」の使い方

便利で快適な入力フォーム開発に特化したJavaScriptライブラリ「InputManJS(インプットマンJS)」の最新バージョン「V6J」では、各種AIプラットフォームのAPIを利用して、リッチテキストエディタ(GcRichTextEditor)と複数行テキスト(GcMultiLineTextBox)に文章の生成、校正、要約、翻訳といったAIによる文章作成支援機能を組み込むことができる「AI文章作成アシスタントコンポーネント(GcTextAssistant)」が新機能として追加されました。

前回はリッチテキストエディタにAI文章作成アシスタントを組み込んで使用する方法と、アシスタントメニューをカスタマイズして使用する方法をご紹介しました。

今回はAI文章作成アシスタントコンポーネントが提供する、入力された内容に応じたサジェストをツールチップとして表示、入力できる「AIサジェストチップ」機能をご紹介します。

AI文章作成アシスタントのメニューをカスタマイズする"

ベースとなるAI文章作成アシスタントコンポーネントを組み込んだアプリは以下よりダウンロード可能です。

AIサジェストチップの使用方法

AIサジェストチップを使用するには、GcConfigurationManagerクラスregisterAIServiceメソッドを使用してAIサービスを登録しておく必要があります。こちらは前回の記事で設定済みですが、AIサジェストチップはAI応答をストリーミングで受け取ることができないので、APIコール時のbodyに設定するstreamオプションをfalseに設定します。以下はAIサジェストチップを使用する場合と、その他のAI連携機能を使用する場合でレスポンスの形式を分岐するコード例です。

・・・(中略)・・・
GC.InputMan.ConfigurationManager.registerAIService(async (context) => {
  try {
    const controller = new AbortController();
    const { signal } = controller;

    if (context.behavior === "gcsmarttip") {
      const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/chat`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          userPrompt: context.input,
          systemPrompt: context.prompt,
          stream: false,
        }),
        signal,
      });
      if (!res.ok) {
        throw new Error(`HTTP error! Status: ${res.status}`);
      }
      const json = await res.json();
      return json.result || '';
    } else {
      const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/chat`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          userPrompt: context.input,
          systemPrompt: context.prompt,
          stream: true,
        }),
        signal,
      });
      const reader = res.body.getReader();
      const decoder = new TextDecoder('utf-8');
      let done = false;
      try {
        while (!done) {
          const { value, done: isDone } = await reader.read();
          done = isDone;
          if (value) {
            const chunkText = decoder.decode(value, { stream: !done });
            if (chunkText) context.streamWriter(chunkText);
          }
        }
      } finally {
        reader.releaseLock();
      }
    }
  } catch (error) {
    throw error;
  }
});
・・・(中略)・・・

AIサービスの登録が完了したら、同じく「client/src/main.js」の中で、コンストラクタのuseAISmartTipオプションをtrueに設定します。また、AISmartTipConfigインターフェースのscenarioオプションを指定することで、より効果的な応答が得られるように調整します。

・・・(中略)・・・
const gcRichTextEditor = new GC.InputMan.GcRichTextEditor(
  document.querySelector('#gcRichTextEditor1'),
  {
    width: 1250,
    height: 600,
    toolbar: ['newdocument', 'print', 'undo', 'redo', 'cut', 'copy', 'paste', 'pastetext', 'selectall',
      'blockquote', 'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript',
      'styles', 'fontfamily', 'fontsize', 'align', 'lineheight', 'forecolor', 'backcolor', 'removeformat',
      'outdent', 'indent', 'aitextassistant'
    ],
    useAISmartTip: true,
    AISmartTipConfig: {
        scenario: 'メシウスのJavaScriptライブラリに関する情報',
    },
・・・(中略)・・・

実行すると設定したサジェストチップが使用可能になります。文章を途中まで入力し、Tabキーを押下するとAIが提案した内容がチップとして生成されます。もう一度Tabキーを押下することでチップの内容をエディタに適用できます。

AIサジェストチップのオプションの設定方法

AIサジェストチップでは前述のscenarioオプションのほか、チップの表示時間や候補の適用方法などを以下のようなカスタマイズオプションが用意されています。

オプション説明デフォルト値
durationチップの表示時間(単位:ミリ秒)10000
promptユーザー入力のプロンプト。このプロパティを設定するとscenarioは無効となりますDefaultPrompt
scenario入力シナリオ。設定すると組み込みのプロンプトに追加され、より効果的な応答が得られます
createShortcutカーソル位置にチップを作成するショートカットキー{ key: GC.InputMan.AI.GcSmartTipShortCutKey.Tab }
applyShortcutカーソル位置にチップの内容を挿入するショートカットキー{ key: GC.InputMan.AI.GcSmartTipShortCutKey.Tab }
closeShortcutチップを閉じるショートカットキー{ key: GC.InputMan.AI.GcSmartTipShortCutKey.Esc }

以下はpromptオプションを指定して、AIへの具体的な指示をプロンプトに追加する例です。

・・・(中略)・・・
    AISmartTipConfig: {
      prompt: '開発者向けにInputManJSの特長が伝わる文章として100文字以内で簡潔に補完してください',
    },
・・・(中略)・・・

実行すると、以下のようにより精度の高い内容をチップとして取得、適用することができます。

今回作成したサンプルは以下よりダウンロード可能です。

さいごに

今回はInputManJSの新機能「AIサジェストチップ」を使用する方法をご紹介しました。本機能の使用により、業務アプリに文脈を理解した入力補助機能を組み込むことが可能です。また、その振る舞いもオプションのプロンプトで自在にカスタマイズできます。

製品サイトでは、InputManJSの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

\  この記事をシェアする  /