MCP Client Chatbot

Keinsaas Navigator - 個人やチーム向けの、より優れたオープンソース AI チャットボットです。

Choi Sung Keun によって開発されました。

🚀 ライブデモ | 以下のプレビューで実際の動作をご覧ください！

デモチャット

• MCP ツールのデモ： ツールとチャット
• 画像生成のデモ： 画像生成機能とチャット

クイックスタート 🚀

数分でアプリを起動できます！インストールも支払いも不要です。

必要なのは AI プロバイダーの API キーを 1 つ（OpenAI、Claude、Gemini など）だけです。それ以外は、データベース、ファイルストレージ、ホスティングを含め、すべて無料プランで利用できます。

👉 数回クリックするだけでサイトをデプロイする手順はこちら

---

Keinsaas Navigator - ChatGPT、Claude、Grok、Gemini に着想を得た、個人やチーム向けのより優れたオープンソース AI チャットボットです。

• 複数の AI に対応 - OpenAI、Anthropic、Google、xAI、Ollama など、主要な LLM を統合
• 強力なツール - MCP プロトコル、ウェブ検索、JS／Python コード実行、データ可視化
• 画像生成 - AI モデル（OpenAI、Google Gemini、xAI）で画像を作成・編集
• 自動化 - カスタムエージェント、ビジュアルワークフロー、アーティファクト生成
• コラボレーション - エージェント、ワークフロー、MCP 設定をチームで共有
• 音声アシスタント - MCP ツールの完全な統合に対応したリアルタイム音声チャット
• 直感的な UX - @mention ですべての機能をすぐに呼び出し
• クイックスタート - Vercel のデプロイボタンから無料でデプロイ

Vercel AI SDK と Next.js で構築されており、主要な AI サービスの優れた機能を 1 つのプラットフォームに統合しています。

目次

• 目次
• プレビュー
  • 🧩 Playwright MCP によるブラウザー自動化
  • 🔗 カスタムツールとしてのビジュアルワークフロー
  • 🤖 カスタムエージェント
  • 🎙️ リアルタイム音声アシスタント + MCP ツール
  • ⚡️ ツールのクイックメンション（@）とプリセット
  • 🧭 ツール選択モード
  • 🛠️ デフォルトのツール
    • 🌐 ウェブ検索
    • ⚡️ JS,PYTHON 実行ツール
    • 📊 データ可視化ツール
• はじめに
  • クイックスタート（Docker Compose 版）🐳
  • クイックスタート（ローカル版）🚀
  • 環境変数
• 📘 ガイド
  • 🔌 MCP サーバーのセットアップとツールのテスト
  • 🐳 Docker ホスティングガイド
  • ▲ Vercel ホスティングガイド
  • 🗂️ ファイルストレージドライバー
  • 🎯 システムプロンプトとチャットのカスタマイズ
  • 🔐 OAuth サインインのセットアップ
  • 🕵🏿 OpenAI のようなプロバイダーの追加
  • 🧪 E2E テストガイド
• 💡 ヒント
  • 💬 一時チャットウィンドウ
• 🗺️ ロードマップ
• 🙌 コントリビュート
• 💬 Discord に参加

このプロジェクトは驚くべき速さで進化しています！⚡️ 新機能を次々にリリースし、バグをどんどん修正しています。最新情報をチェックしながら開発に参加するには、このリポジトリにスターを付けてください！

プレビュー

UX の雰囲気をつかんでみましょう。できることを簡単にご紹介します。

🧩 Playwright MCP によるブラウザー自動化

例： Microsoft の playwright-mcp ツールを使ってウェブブラウザーを操作します。

• LLM は、複数ステップのタスクを完了して最終メッセージを返すために、MCP サーバーのツールの使い方を自律的に判断し、複数回呼び出します。

プロンプトの例：

1. Use the @tool('web-search') to look up information about “modelcontetprotocol.”

2. Then, using : @mcp("playwright")
   - navigate Google (https://www.google.com)
   - Click the “Login” button
   - Enter my email address ([email protected])
   - Clock the "Next"  button
   - Close the browser

🔗 カスタムツールとしてのビジュアルワークフロー

例： チャットの会話で呼び出せるツールになるカスタムワークフローを作成します。

• LLM ノード（AI の推論用）とツールノード（MCP ツールの実行用）を接続して、ビジュアルワークフローを作成します
• ワークフローを公開すると、チャットで @workflow_name ツールとして利用できるようになります
• 複雑な複数ステップのプロセスを、再利用可能な自動化シーケンスとして連結します

🤖 カスタムエージェント

例： カスタム指示とツールへのアクセス権を持つ、専門性の高い AI エージェントを作成します。

• 固有のシステムプロンプトと利用可能なツールを設定して、カスタムエージェントを定義します
• チャットで @agent_name を使って、エージェントを簡単に呼び出します
• 課題や PR のツール、プロジェクトのコンテキストを備えた GitHub Manager エージェントのような、タスクに特化したアシスタントを作成します

たとえば、次の手順で GitHub Manager エージェントを作成できます。

• GitHub のツール（課題や PR の作成、コメント、クエリ）を提供します
• システムプロンプトにプロジェクトの詳細を追加します
• @github_manager を呼び出して、リポジトリを管理します

### 🎙️ リアルタイム音声アシスタント＋MCP ツール

OpenAI の新しい Realtime API を使って構築したリアルタイム音声チャットボットアシスタントのデモです。さらに、完全なMCP ツール連携に対応しています。 アシスタントに自然に話しかけると、リアルタイムでツールを実行する様子を確認できます。

⚡️ ツールのクイック呼び出し（@）とプリセット

チャット中に @toolname と入力すると、ツールをすばやく呼び出せます。 名前を覚える必要はありません。@ と入力して、リストから選ぶだけです！

ツールの選択とメンション（@）— 使い分け方：

• ツールの選択：よく使うツールをすべてのチャットで LLM が常に利用できるようにします。利便性を高め、時間が経っても一貫したコンテキストを保つのに適しています。
• メンション（@）：メンションしたツールだけを、その応答に限って一時的に割り当てます。LLM に送信されるのはメンションしたツールだけなので、トークンを節約でき、速度と精度の向上にもつながります。

それぞれに利点があります。両方を組み合わせて、効率とパフォーマンスのバランスを取りましょう。

必要な MCP サーバーまたはツールだけを選択して、ツールプリセットを作成することもできます。 クリックするだけでプリセットをすぐに切り替えられるため、タスクやワークフローごとにツールを整理するのに最適です。

🧭 ツール選択モード

ツール選択モードを使うと、各チャットでツールをどのように使用するかを制御できます。⌘P でいつでも切り替えられます。

• 自動： 必要に応じてモデルが自動的にツールを呼び出します。
• 手動： ツールを呼び出す前に、モデルが許可を求めます。
• なし： ツールの使用を完全に無効にします。

状況に応じて、自律的なやり取り、ガイド付きのやり取り、またはツールを使わないやり取りを柔軟に選択できます。

🛠️ デフォルトのツール

🌐 ウェブ検索

Exa AI を利用した組み込みのウェブ検索機能です。セマンティック AI でウェブを検索し、チャット内で URL から直接コンテンツを抽出できます。

• オプション： .env に EXA_API_KEY を追加すると、ウェブ検索が有効になります
• 無料プラン： 月 1,000 件のリクエストを無料で利用できます。クレジットカードは不要です
• 簡単な設定： dashboard.exa.ai ですぐに API キーを取得できます

🎨 画像生成

AI モデルを利用した、組み込みの画像生成・編集機能です。チャット内で画像の作成、編集、変更を直接行えます。

• 対応操作： 画像の生成、編集、合成
• 現在のモデル： Gemini Nano Banana、OpenAI

⚡️ JS、Python 実行ツール

シンプルな JS 実行ツールです。

📊 データ可視化ツール

インタラクティブなテーブル：高度な機能を備えた、機能豊富なデータテーブルを作成できます。

• 並べ替えとフィルタリング：任意の列で並べ替え、データをリアルタイムでフィルタリングできます
• 検索とハイライト表示：テキストを自動でハイライト表示する、全体検索機能です
• エクスポートオプション：遅延読み込みライブラリを使用して、CSV または Excel 形式にエクスポートできます
• 列の管理：表示設定で列の表示・非表示を切り替えられます
• ページネーション：組み込みのページネーションで、大規模なデータセットを扱えます
• データ型のサポート：文字列、数値、日付、ブール値を適切にフォーマットします

チャートの生成：さまざまな種類のチャート（棒グラフ、折れ線グラフ、円グラフ）でデータを可視化できます

さらに、API リクエスト用の HTTP クライアントなど、さまざまなツールも用意されています。

…ほかにも、まだまだ機能があります。 ぜひ試して、ほかに何ができるか確かめてみてください！

はじめに

このプロジェクトでは、推奨パッケージマネージャーとして pnpm を使用します。

# If you don't have pnpm:
npm install -g pnpm

クイックスタート（Docker Compose 版）🐳

# 1. Install dependencies
pnpm i

# 2. Enter only the LLM PROVIDER API key(s) you want to use in the .env file at the project root.
# Example: The app works with just OPENAI_API_KEY filled in.
# (The .env file is automatically created when you run pnpm i.)

# 3. Build and start all services (including PostgreSQL) with Docker Compose
pnpm docker-compose:up

クイックスタート（ローカル版）🚀

pnpm i

#(Optional) Start a local PostgreSQL instance
# If you already have your own PostgreSQL running, you can skip this step.
# In that case, make sure to update the PostgreSQL URL in your .env file.
pnpm docker:pg

# Enter required information in the .env file
# The .env file is created automatically. Just fill in the required values.
# For the fastest setup, provide at least one LLM provider's API key (e.g., OPENAI_API_KEY, CLAUDE_API_KEY, GEMINI_API_KEY, etc.) and the PostgreSQL URL you want to use.

pnpm build:local && pnpm start

# (Recommended for most cases. Ensures correct cookie settings.)
# For development mode with hot-reloading and debugging, you can use:
# pnpm dev

または、データベースのみ Docker Compose を使用して起動し、アプリは pnpm で実行します

# Start Postgres only via compose
# Ensure your .env includes: POSTGRES_USER, POSTGRES_PASSWORD, POSTGRES_DB matching POSTGRES_URL
docker compose -f docker/compose.yml up -d postgres

# Apply migrations
pnpm db:migrate


# Run app locally
pnpm dev   # or: pnpm build && pnpm start

ブラウザーで http://localhost:3000 を開いて、始めましょう。

環境変数

pnpm i コマンドを実行すると、.env ファイルが生成されます。そこに API キーを追加してください。

# === LLM Provider API Keys ===
# You only need to enter the keys for the providers you plan to use
GOOGLE_GENERATIVE_AI_API_KEY=****
OPENAI_API_KEY=****
XAI_API_KEY=****
ANTHROPIC_API_KEY=****
OPENROUTER_API_KEY=****
OLLAMA_BASE_URL=http://localhost:11434/api



# Secret for Better Auth (generate with: npx @better-auth/cli@latest secret)
BETTER_AUTH_SECRET=****

# (Optional)
# URL for Better Auth (the URL you access the app from)
BETTER_AUTH_URL=

# === Database ===
# If you don't have PostgreSQL running locally, start it with: pnpm docker:pg
POSTGRES_URL=postgres://your_username:your_password@localhost:5432/your_database_name

# (Optional)
# === Tools ===
# Exa AI for web search and content extraction (optional, but recommended for @web and research features)
EXA_API_KEY=your_exa_api_key_here


# Whether to use file-based MCP config (default: false)
FILE_BASED_MCP_CONFIG=false

# === File Storage ===
# Vercel Blob is the default storage driver (works in both local dev and production)
# Pull the token locally with `vercel env pull`
FILE_STORAGE_TYPE=vercel-blob
FILE_STORAGE_PREFIX=uploads
BLOB_READ_WRITE_TOKEN=

# -- S3 (coming soon) --
# FILE_STORAGE_TYPE=s3
# FILE_STORAGE_PREFIX=uploads
# FILE_STORAGE_S3_BUCKET=
# FILE_STORAGE_S3_REGION=

# (Optional)
# === OAuth Settings ===
# Fill in these values only if you want to enable Google/GitHub/Microsoft login

#GitHub
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=

#Google
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
# Set to 1 to force account selection
GOOGLE_FORCE_ACCOUNT_SELECTION=


# Microsoft
MICROSOFT_CLIENT_ID=
MICROSOFT_CLIENT_SECRET=
# Optional Tenant Id
MICROSOFT_TENANT_ID=
# Set to 1 to force account selection
MICROSOFT_FORCE_ACCOUNT_SELECTION=

# Set this to 1 to disable user sign-ups.
DISABLE_SIGN_UP=

# Set this to 1 to disallow adding MCP servers.
NOT_ALLOW_ADD_MCP_SERVERS=

📘 ガイド

better-chatbot の実行と設定に関する、手順ごとのガイドです。

🔌 MCP サーバーのセットアップとツールのテスト

• 環境に MCP サーバーを追加して設定する方法

🐳 Docker ホスティングガイド

• 環境設定を含め、Docker を使ってチャットボットをセルフホストする方法です。

▲ Vercel ホスティングガイド

• 本番環境で使うチャットボットを、簡単な手順で Vercel にデプロイできます。

🗂️ ファイルストレージドライバー

• Vercel Blob（デフォルト）によるクラウドベースのファイルストレージを利用して、開発環境と本番環境の両方でスムーズにアップロードできます。S3 のサポートは近日対応予定です。

🎯 システムプロンプトとチャットのカスタマイズ

• カスタムシステムプロンプト、ユーザー設定、MCP ツールの指示で、チャットボットの利用体験をカスタマイズできます

🔐 OAuth サインインのセットアップ

• 安全なユーザーログインを実現するために、Google、GitHub、Microsoft の OAuth を設定します。

🕵🏿 OpenAI 互換プロバイダーの追加

• OpenAI 互換の AI プロバイダーを追加する方法

🧪 E2E テストガイド

• 複数ユーザーのシナリオ、エージェントの表示テスト、CI/CD との統合など、Playwright を使った包括的なエンドツーエンドテストです
  

💡 ヒント

💬 一時チャットウィンドウ

• メインのスレッドとは別に、軽量なポップアップチャットを開いて、簡単な質問やテストに利用できます。

🗺️ ロードマップ

better-chatbot に近日追加予定の機能：

• ファイルのアップロードとストレージ（Vercel Blob との統合）
• 画像生成
• 共同ドキュメント編集（OpenAI Canvas のような、ユーザーとアシスタントによる共同編集）
• RAG（検索拡張生成）
• Web ベースのコンピューティング（WebContainers との統合）

💡 ご提案や特定の機能のご要望がありましたら、issue を作成してください！

💖 サポート

このプロジェクトがお役に立ちましたら、開発の支援をご検討ください。

• ⭐ このリポジトリに Star を付ける
• 🐛 バグを 報告 し、機能を提案する
• 💰 継続的な開発を支援するために スポンサーになる

皆さまのご支援により、このプロジェクトを維持・改善できます。ありがとうございます！🙏

🙌 コントリビューション

皆さまからのコントリビューションを歓迎します！バグ報告、機能のアイデア、コードの改善など、すべてが最高のローカル AI アシスタントを作るための助けになります。

⚠️ プルリクエストや Issue を送信する前に、コントリビューションガイドをお読みください。 皆でより効果的に作業し、全員の時間を節約できます。

コントリビューションの詳しいガイドラインについては、コントリビューションガイドをご覧ください。

言語翻訳： 新しい言語の翻訳を追加して、より多くのユーザーがチャットボットを利用できるようにしましょう。翻訳への貢献方法については、language.mdをご覧ください。

一緒に作り上げましょう 🚀

💬 Discord に参加する

コミュニティに参加して質問したり、公式 Discord サーバーでサポートを受けたりしましょう！