あなたのサイトに「AIに質問」ボタンを
askai-button は、Webページの隅に「AIに質問」ボタンを表示する部品です。訪問者が質問を入力してAIサービスを選ぶと、質問とあなたのサイトのURLが入った状態で、ChatGPT・Claude・Google AIモードのいずれかが別のタブで開きます。
右下のボタンは実物です
このページの右下にある「AIに質問」ボタンは、askai-button そのものです。押すとパネルが開きます。質問を入力するか、質問の例を選んで、送信してみてください。選んだAIサービスが別のタブで開き、質問とこのサイトのURLが渡されます。
このサイトは日本語と英語で用意しています。ボタンとパネルの文言は、ページの言語（<html lang>）に合わせて切り替わります。画面上部の「English」から英語のページを開くと、ボタンも英語になります。
特長
APIキーもサーバーも不要
AIのAPIは呼びません。AIサービスのURLを組み立てて開くだけなので、APIキーの取得も、サーバー側の処理も、利用料も必要ありません。
質問を保存・送信しません
ボタン自体は外部と通信しません。質問を保存・送信・計測することもありません。ブラウザーに残すのは「最後に選んだAIサービス」だけです。WordPress プラグインでは、設定でオンにした場合に限り、クリックの月ごとの合計をサイト自身のデータベースに保存できます（質問の内容は保存しません）。
1行で導入できます
<script> タグを1行追加すれば、どのサイトでも動きます。npm パッケージと WordPress プラグインも用意しています。
ページの言語に合わせて表示
ボタンとパネルの文言は、閲覧者のブラウザーの設定ではなく、ページの言語に合わせます。日本語と英語を同梱しており、ほかの言語も追加できます。
小さなファイル1つ
配布ファイルは askai-button.min.js の1つだけです。CSSも含めて、gzip 圧縮後のサイズは約 8.8 KB です。ほかのライブラリには依存しません。
無料のオープンソース
ライブラリは MIT License、WordPress プラグインは GPL-2.0-or-later で公開しています。有料版はありません。
しくみ
訪問者が質問を入力します
ボタンを押して開いたパネルに質問を入力し、使うAIサービスを選びます。
ボタンが文面を組み立てます
質問と、あなたのサイトのURLを含む短い文面を、訪問者のブラウザーの中で組み立てます。
AIサービスが別のタブで開きます
その文面を付けたURLで、選ばれたAIサービスを開きます。回答はAIサービスが生成します。
渡すのはURLだけで、ページの本文は渡しません。サイトを読みに行くかどうか、どのように答えるかは、AIサービス側の動作によります。詳しくは「しくみと注意点」をご覧ください。
AIに渡る文面
AIサービスに渡るのは、次の文面だけです（日本語のページでの標準の文面）。{question} は訪問者の質問に、{site_url} はサイトのトップのURLに置き換わります。
{question}
この質問について、以下のURLを参照して回答してください。
{site_url}
たとえば、このサイトで「WordPressでも使えますか？」と質問すると、次の文面になります。
WordPressでも使えますか？
この質問について、以下のURLを参照して回答してください。
https://elephancube.github.io/askai-button/
文面は自由に変更できます。変更のしかたは「リファレンス」をご覧ください。
次に読むページ
- 導入方法：
<script>タグ（ファイルを自分のサーバーに置く方法と、CDN から読み込む方法）、npm、WordPress プラグインでの入れ方 - リファレンス：オプション、
data-*属性、API、イベントの一覧 - WordPress：プラグインの設定画面、ページ別の設定、フィルター
- しくみと注意点：プライバシー、AIサービスごとの違い、AIがサイトを読めない場合
- GitHub リポジトリ：ソースコード、不具合の報告