# あなたのサイトに「AIに質問」ボタンを

askai-button は、Webページの隅に「AIに質問」ボタンを表示する部品です。訪問者が質問を入力してAIサービスを選ぶと、質問とあなたのサイトのURLが入った状態で、ChatGPT・Claude・Google AIモードのいずれかが別のタブで開きます。

- [導入方法を見る](https://elephancube.github.io/askai-button/install/)
- [しくみと注意点](https://elephancube.github.io/askai-button/how-it-works/)

## 右下のボタンは実物です

このページの右下にある「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 で公開しています。有料版はありません。

## しくみ

1. **訪問者が質問を入力します**

   ボタンを押して開いたパネルに質問を入力し、使うAIサービスを選びます。

2. **ボタンが文面を組み立てます**

   質問と、あなたのサイトのURLを含む短い文面を、訪問者のブラウザーの中で組み立てます。

3. **AIサービスが別のタブで開きます**

   その文面を付けたURLで、選ばれたAIサービスを開きます。回答はAIサービスが生成します。

渡すのはURLだけで、ページの本文は渡しません。サイトを読みに行くかどうか、どのように答えるかは、AIサービス側の動作によります。詳しくは「[しくみと注意点](https://elephancube.github.io/askai-button/how-it-works/)」をご覧ください。

## AIに渡る文面

AIサービスに渡るのは、次の文面だけです（日本語のページでの標準の文面）。`{question}` は訪問者の質問に、`{site_url}` はサイトのトップのURLに置き換わります。

```text
{question}

この質問について、以下のURLを参照して回答してください。
{site_url}
```

たとえば、このサイトで「WordPressでも使えますか？」と質問すると、次の文面になります。

```text
WordPressでも使えますか？

この質問について、以下のURLを参照して回答してください。
https://elephancube.github.io/askai-button/
```

文面は自由に変更できます。変更のしかたは「[リファレンス](https://elephancube.github.io/askai-button/reference/#query-template)」をご覧ください。

## 次に読むページ

- [導入方法](https://elephancube.github.io/askai-button/install/)：`<script>` タグ（ファイルを自分のサーバーに置く方法と、CDN から読み込む方法）、npm、WordPress プラグインでの入れ方
- [リファレンス](https://elephancube.github.io/askai-button/reference/)：オプション、`data-*` 属性、API、イベントの一覧
- [WordPress](https://elephancube.github.io/askai-button/wordpress/)：プラグインの設定画面、ページ別の設定、フィルター
- [しくみと注意点](https://elephancube.github.io/askai-button/how-it-works/)：プライバシー、AIサービスごとの違い、AIがサイトを読めない場合
- [GitHub リポジトリ](https://github.com/elephancube/askai-button)：ソースコード、不具合の報告

---

- HTML: https://elephancube.github.io/askai-button/
- English: https://elephancube.github.io/askai-button/en/index.md
- llms.txt: https://elephancube.github.io/askai-button/llms.txt