Briefing Utility with Transcription, Live Exchange & Reporting

OpenAI APIを活用した、軽量ブラウザベースのAIテキストチャット。
会話からの自動要約・メール送信まで、ワンストップで完結。

詳しく見る

概要

BUTLERは、OpenAI Chat Completions APIを活用したブラウザベースのAIテキストチャットアプリケーションです。 Webブラウザさえあれば特別なインストールなしに利用でき、PHPによる軽量なサーバーサイド構成で手軽にデプロイ可能です。

アクセス制御には8桁英数字のPIN認証を採用しており、認証後はAIとのリアルタイムなテキスト対話が可能です。 応答はSSE（Server-Sent Events）を用いた擬似ストリーミング方式で表示され、まるでAIがタイピングしているかのような自然な体験を実現します。

また、会話終了後にはAIが自動で要約を生成し、その内容をワンクリックでメール送信することができます。 会議の議事録やヒアリング結果のレポートなど、ビジネスシーンでの活用を想定した機能をワンストップで提供します。

4画面構成 シンプルなSPA設計で直感的な画面遷移を実現
PIN認証 8桁英数字によるセキュアなアクセス制御
SSEストリーミング リアルタイムな応答でタイピング風の体験を提供
自動要約 ワンクリックで会話のレポートを生成・共有

特徴

PIN認証

8桁英数のPIN認証で不正アクセスを防止。ファイルベースのセッション管理で有効期限2時間のトークンを発行。

AIテキストチャット

OpenAI GPT-4oモデルとのリアルタイムテキスト対話。会話コンテキストを保持した自然な対話体験。

SSE擬似ストリーミング

サーバーサイドで生成した応答を3文字ずつ15ms間隔で送信。タイピングのようなリアルタイム表示を実現。

自動要約生成

会話終了後にAIが自動で要約を生成。システムプロンプト内の要約ルールにも対応し、フォーマットのカスタマイズが可能。

メール送信

生成した要約をワンクリックでメール送信。会議の議事録やヒアリング結果の共有に活用可能。

システムプロンプト設定

対話開始前にシステムプロンプトを自由に設定可能。AIの振る舞いやトーンを用途に合わせてカスタマイズ。

画面フロー

1

PIN入力

8桁英数PINでアクセス認証

  • 英数字のみ入力許可（フロントエンド検証）
  • 認証成功でセッショントークン発行
  • 5回連続失敗で一時ロック
2

システムプロンプト設定

AIの振る舞いを指示するプロンプトを入力（任意）

  • テキストエリアで自由入力
  • デフォルトプロンプト適用可能
  • スキップして直接チャットへ進行可
3

テキストチャット

AIとリアルタイムにテキスト対話

  • SSEによるリアルタイム応答表示
  • 会話履歴の自動スクロール
  • Markdown風テキスト装飾対応
4

要約・メール送信

会話の自動要約を確認し、メールで送信

  • AIによる自動要約生成
  • 宛先・件名を指定してメール送信
  • 要約テキストの手動編集にも対応

技術構成

レイヤー技術備考
フロントエンドHTML / CSS / JavaScriptSPA構成、外部FW不使用
バックエンドPHP 8.xAPIエンドポイント提供
AI APIOpenAI Chat Completions APIGPT-4oモデル
認証PIN + ファイルベーストークン有効期限2時間
ストリーミングServer-Sent Events (SSE)擬似ストリーミング方式
メール送信PHP mail() / SMTP要約テキスト送信
データ保存JSONファイルセッション・会話履歴
ファイル構成
butler/
├── index.html              メインHTML（SPA）
├── css/
│   └── style.css           スタイルシート
├── js/
│   └── app.js              フロントエンドロジック
├── api/
│   ├── auth.php            PIN認証API
│   ├── chat.php            チャットAPI（SSE）
│   ├── summary.php         要約生成API
│   └── mail.php            メール送信API
├── data/
│   ├── sessions/           セッショントークン保存
│   └── logs/               会話ログ保存
├── config.php              設定ファイル（APIキー等）
└── .htaccess               アクセス制御

API仕様

POST /api/auth.php

PINコードを検証し、認証トークンを発行します。

Request Body
{
  "pin": "A1b2C3d4"
}
Response（200 OK）
{
  "success": true,
  "token": "a3f8c1...e7b2d9",
  "expires_in": 7200
}
POST /api/chat.php

ユーザーのメッセージをAIに送信し、SSEでストリーミング応答を返します。

Request Body
{
  "token": "a3f8c1...e7b2d9",
  "message": "今日の会議の議題を整理してください",
  "system_prompt": "あなたは優秀な秘書です。",
  "history": []
}
Response（SSE stream）
data: {"chunk": "かし"}
data: {"chunk": "こま"}
data: {"chunk": "りま"}
...
data: {"done": true}
POST /api/summary.php

会話履歴からAIが要約テキストを生成します。

Request Body
{
  "token": "a3f8c1...e7b2d9",
  "history": [
    {"role": "user", "content": "..."},
    {"role": "assistant", "content": "..."}
  ]
}
Response（200 OK）
{
  "success": true,
  "summary": "【要約】本日の会議では..."
}
POST /api/mail.php

生成された要約テキストを指定のメールアドレスへ送信します。

Request Body
{
  "token": "a3f8c1...e7b2d9",
  "to": "user@example.com",
  "subject": "会議要約レポート",
  "body": "【要約】本日の会議では..."
}
Response（200 OK）
{
  "success": true,
  "message": "メールを送信しました"
}

セキュリティ

APIキーの秘匿

OpenAI APIキーはサーバーサイド（config.php）にのみ保管され、フロントエンドには一切露出しません。クライアントからAPIキーへ直接アクセスすることは不可能です。

PIN認証とトークンベースのセッション管理

8桁英数字のPIN認証後、暗号学的に安全なランダムトークンを発行。トークンには2時間の有効期限が設定され、期限切れ時は再認証が必要です。

暗号学的に安全なトークン生成

セッショントークンはPHPの random_bytes() 関数により生成され、予測困難な暗号学的に安全な乱数を使用しています。

入力値の双方向検証

フロントエンドでのリアルタイムバリデーションに加え、バックエンドでも全入力値を検証。二重チェックにより不正データの混入を防止します。

XSS対策

DOM操作には textContent および createElement() を使用し、innerHTML の直接利用を回避。スクリプトインジェクションのリスクを排除しています。

HTTPS推奨

通信経路の暗号化のため、本番環境ではHTTPSでの運用を強く推奨しています。PIN・トークン・会話データを安全に保護します。

動作要件

項目要件
サーバーPHP 8.0以上（8.1以上推奨）
PHP拡張curl, json, mbstring, openssl
WebサーバーApache（mod_rewrite推奨）/ Nginx
外部APIOpenAI API キー（Chat Completions API対応）
メール送信PHP mail() が使用可能な環境、またはSMTP設定
ブラウザChrome / Edge / Firefox / Safari（最新版推奨）
通信HTTPS推奨（SSL/TLS証明書）
ディスクセッション・ログ保存用の書き込み権限（dataディレクトリ）