miibo（会話AI）とRAG検索を組み合わせた、展示会・イベント検索インターフェースです。
チャットで質問すると、ナレッジデータストアからイベント情報を検索し、カード形式で表示します。
| 項目 | 内容 |
|---|---|
| 使用AI | miibo（mebo） |
| 検索方式 | RAG（ナレッジデータストア） |
| フロントエンド | Vanilla JS + 素のCSS |
| デプロイ | Vercel（サーバーレス関数でAPIキー管理） |
このプロジェクトにはローカル版とVercel版の2種類があります。
| ver_local | ver_vercel | |
|---|---|---|
| 用途 | 動作確認・開発用 | 本番公開用 |
| APIキー管理 | js/api_id.js に直接記述 |
Vercel環境変数で管理 |
| 起動方法 | VSCode Live Server など | Vercelにデプロイ |
| APIキーの露出 | あり（ブラウザから見える） | なし（サーバーレス関数で隠蔽） |
基本的な流れ： ver_local でローカル動作確認 → 問題なければ ver_vercel をVercelにデプロイ
東京ビッグサイト検索AI/
├── ver_local/ # ローカル動作確認用（Live Server）
│ ├── index.html
│ ├── css/style.css
│ └── js/
│ ├── api_id.js # APIキーをここに直接記述
│ └── script.js
├── ver_vercel/ # Vercelデプロイ用
│ ├── index.html
│ ├── css/style.css
│ ├── js/
│ │ ├── api_id.js # Vercel版では不使用（環境変数で管理）
│ │ └── script.js
│ ├── api/
│ │ └── chat.js # Vercelサーバーレス関数（APIキー隠蔽）
│ └── package.json
└── README.md
以下の4ステップで設定します。
-
ナレッジデータストアにCSVを登録
-
エージェントにデータストアを紐付ける
-
システムプロンプト（SystemPrompt.txt）をmiiboのプロンプト内に設定する
-
APIキーとエージェントIDを取得する
ver_local/js/api_id.js を開き、APIキーを書き換えます。
const MEBO_API_KEY = "あなたのAPIキー";
const MEBO_AGENT_ID = "あなたのエージェントID";VSCode の Live Server で ver_local/index.html を開いて動作確認します。
ver_vercel/ ディレクトリをGitHubリポジトリのルートとしてVercelに接続します。
Vercelダッシュボード → Settings → Environment Variables に以下を追加します。
| 変数名 | 値 |
|---|---|
MEBO_API_KEY |
miiboのAPIキー |
MEBO_AGENT_ID |
miiboのエージェントID |
APIキーはサーバーレス関数（api/chat.js）で処理され、フロントエンドには露出しません。
左右のスプリットレイアウトになっています。
┌─────────────────┬──────────────────────────────┐
│ チャットパネル │ イベントカードパネル │
│ │ │
│ AIの返答 │ ┌──────┐ ┌──────┐ ┌──────┐ │
│ （吹き出し） │ │カード │ │カード │ │カード │ │
│ │ └──────┘ └──────┘ └──────┘ │
│ クイックリプライ │ │
│ 入力フォーム │ │
└─────────────────┴──────────────────────────────┘
miiboのレスポンスにはテキストの他に、以下のJSON形式のExtensionブロックが含まれます。
script.js がこれを解析してイベントカードとして描画します。
```extension
{
"type": "show_events",
"events": [
{
"name": "展示会名",
"period": "4/8（水）〜 4/10（金）",
"venue": "東1-3ホール",
"target": "一般・商談",
"admission": "無料（要登録）",
"description": "イベントの概要説明",
"sub_events": ["同時開催の専門展1", "同時開催の専門展2"],
"url": "https://example.com"
}
],
"followups": ["一般向けを探す", "IT・DX系", "ファッション系"]
}
```
| フィールド | 説明 |
|---|---|
events |
イベントカードの配列（最大5件） |
sub_events |
同時開催・専門展のリスト。なければ [] |
followups |
クイックリプライボタンのテキスト（2〜3件） |
東京ビッグサイトのイベントデータは以下の東京都オープンデータカタログサイトからダウンロードしてください。
https://catalog.data.metro.tokyo.lg.jp/dataset/t001001d0000000001
ダウンロードしたデータをCSVにする場合、miibo用フォーマットに変換してから登録します。
miibo のナレッジデータストアは以下のフォーマットのCSVのみ受け付けます。
label, url, text
- 元データ（n件）を会期・会場でグループ化してn件に圧縮しています
- 圧縮ルール：
（内）表記の子イベントは親イベントに統合し、同会場・同会期のイベントもまとめています
- 本コードは個人が学習・実験目的で作成したものです
- 使い方に関するサポートは行いません
- 本コードの使用によって生じたいかなる損害・トラブルについても、作者は一切の責任を負いません
- 動作を保証するものではありません
- ナレッジデータストアにCSVを登録済み
- エージェントにデータストアを紐付け済み
- システムプロンプトを設定済み
- APIキーとエージェントIDを設定済み
- Live Serverまたは Vercel でページが開く
- クイックリプライを押してイベントカードが表示される
- 「詳細を見る →」のリンクが正しいURLに飛ぶ