ChatGPTNextWeb/NextChat

⭐ 84,624 🍴 61,073 TypeScript📄 MIT License GitHubで見る →

主な特徴

複数のAIプロバイダー対応（OpenAI、Anthropic、Google、DeepSeek、Alibabaなど25以上）
Vercelでワンクリックデプロイ（1分以内）
軽量なクライアント（約5MB）、PWA対応
プライバシーファースト（データはローカルに保存）
Markdownサポート（LaTeX、Mermaid、コードハイライト）
プロンプトテンプレート（Mask機能）
Artifacts機能（生成コンテンツのプレビュー・共有）
プラグインシステム（Web検索、計算機など）
リアルタイムチャット対応
MCP（Model Context Protocol）サポート
多言語対応（13言語以上）
セルフホストLLMとの互換性（RWKV-Runner、LocalAIなど）

リポジトリ解析: ChatGPTNextWeb/NextChat

基本情報

リポジトリ名: ChatGPTNextWeb/NextChat
主要言語: TypeScript
スター数: 84,624
フォーク数: 61,073
最終更新: 2025年（非常に活発に開発中）
ライセンス: MIT License
トピックス: AIチャットクライアント、ChatGPT、Claude、Gemini、Next.js、TypeScript、PWA

概要

一言で言うと

Claude、DeepSeek、GPT-4、Gemini Proなどの複数のAIモデルをサポートする軽量で高速なAIアシスタントクライアントで、Vercelでのワンクリックデプロイやセルフホスティングが可能。

詳細説明

NextChat（旧名：ChatGPT-Next-Web）は、様々なAIモデルとインタラクションできるオープンソースのチャットクライアントです。特にプライバシーを重視し、すべてのデータをブラウザのローカルストレージに保存します。Next.jsをベースに構築され、デスクトップアプリ（Windows/Mac/Linux）、ウェブアプリ、iOSアプリとして利用できます。

主な特徴

複数のAIプロバイダー対応（OpenAI、Anthropic、Google、DeepSeek、Alibabaなど25以上）
Vercelでワンクリックデプロイ（1分以内）
軽量なクライアント（約5MB）、PWA対応
プライバシーファースト（データはローカルに保存）
Markdownサポート（LaTeX、Mermaid、コードハイライト）
プロンプトテンプレート（Mask機能）
Artifacts機能（生成コンテンツのプレビュー・共有）
プラグインシステム（Web検索、計算機など）
リアルタイムチャット対応
MCP（Model Context Protocol）サポート
多言語対応（13言語以上）
セルフホストLLMとの互換性（RWKV-Runner、LocalAIなど）

使用方法

インストール

前提条件

Node.js >= 18
Docker >= 20（Dockerデプロイの場合）
OpenAI APIキーまたはその他のAIプロバイダーのAPIキー

インストール手順

# 方法1: Vercelデプロイ（推奨）
# 1. GitHubアカウントでリポジトリをFork
# 2. VercelにサインアップしGitHubアカウントを接続
# 3. 環境変数を設定（OPENAI_API_KEY、CODEなど）
# 4. Deployボタンをクリック

# 方法2: Dockerデプロイ
docker pull yidadaa/chatgpt-next-web

docker run -d -p 3000:3000 \
   -e OPENAI_API_KEY=sk-xxxx \
   -e CODE=your-password \
   yidadaa/chatgpt-next-web

# 方法3: ローカル開発
git clone https://github.com/ChatGPTNextWeb/NextChat.git
cd NextChat
# .env.localファイルを作成しAPIキーを設定
yarn install
yarn dev

# 方法4: シェルスクリプト
bash <(curl -s https://raw.githubusercontent.com/Yidadaa/ChatGPT-Next-Web/main/scripts/setup.sh)

基本的な使い方

Hello World相当の例

# ブラウザでアクセス
http://localhost:3000

# アクセスパスワードが設定されている場合は入力
# 設定画面でAPIキーを入力
# 新しいチャットを開始してAIと会話

実践的な使用例

// プロンプトテンプレート（Mask）の作成例
// app/masks/cn.ts
export const CN_MASKS: BuiltinMask[] = [
  {
    avatar: "1f4da",
    name: "プログラマー",
    context: [
      {
        id: "prog-0",
        role: "system",
        content:
          "あなたは経験豊富なプログラマーです。コードの問題を解決し、最適な実装を提案してください。",
        date: "",
      },
    ],
    modelConfig: {
      model: "gpt-4",
      temperature: 0.5,
      max_tokens: 2000,
    },
  },
];

// プラグインの使用例
// 設定画面でプラグインを有効化
// Web検索プラグイン、計算機プラグインなどを選択

高度な使い方

// カスタムモデルの追加
// 環境変数で設定
CUSTOM_MODELS=+llama,+claude-2,-gpt-3.5-turbo,gpt-4-1106-preview=gpt-4-turbo

// Azure OpenAIの設定
AZURE_URL=https://{resource-name}.openai.azure.com/openai
AZURE_API_KEY=your-azure-api-key
AZURE_API_VERSION=2023-07-01-preview
CUSTOM_MODELS=+gpt-3.5-turbo@Azure=gpt35

// MCP（Model Context Protocol）の有効化
ENABLE_MCP=true

// チャット履歴の同期（UpStash）
// UpStash Redisを使用して複数デバイス間でチャット履歴を同期

ドキュメント・リソース

公式ドキュメント

README.md: プロジェクト概要、セットアップ手順、環境変数の説明
docs/faq-*.md: 多言語対応のFAQ（英語、中国語、日本語、スペイン語、韓国語）
docs/vercel-*.md: Vercelデプロイの詳細ガイド
docs/synchronise-chat-logs-*.md: チャット履歴同期の設定方法
docs/translation.md: 新しい翻訳の追加方法
公式サイト: https://nextchat.club
Webアプリデモ: https://app.nextchat.club

サンプル・デモ

app/masks/: プロンプトテンプレートの例
public/prompts.json: awesome-chatgpt-promptsに基づくプロンプト集
public/plugins.json: 利用可能なプラグインのリスト
デスクトップアプリ: GitHub Releases
iOSアプリ: App Store

チュートリアル・ガイド

プロジェクトGitHub: https://github.com/ChatGPTNextWeb/NextChat
NextChat-Awesome-Plugins: https://github.com/ChatGPTNextWeb/NextChat-Awesome-Plugins
FAQドキュメント（多言語対応）
Discordコミュニティ（開発者サポート）

技術的詳細

アーキテクチャ

全体構造

NextChatはNext.js 14をベースとしたモダンなウェブアプリケーションで、クライアントサイドでのデータ管理とAPIプロキシを組み合わせたアーキテクチャを採用しています。プライバシーを重視し、すべてのチャット履歴や設定はブラウザのIndexedDBに保存されます。Tauriを使用したデスクトップアプリも提供しています。

ディレクトリ構成

nextchat/
├── app/                # Next.js App Router
│   ├── api/            # APIルート（各AIプロバイダーへのプロキシ）
│   ├── client/         # APIクライアント実装
│   ├── components/     # Reactコンポーネント
│   ├── store/          # Zustandストア（状態管理）
│   ├── locales/        # i18n翻訳ファイル
│   ├── masks/          # プロンプトテンプレート
│   ├── utils/          # ユーティリティ関数
│   └── mcp/            # Model Context Protocol実装
├── public/             # 静的ファイル
├── docs/               # ドキュメント
├── scripts/            # ビルド・セットアップスクリプト
└── src-tauri/          # Tauriデスクトップアプリ

主要コンポーネント

Chatコンポーネント: メインのチャットUI
- 場所: app/components/chat.tsx
- 依存: useChatStore、useAccessStore、Markdownコンポーネント
- インターフェース: メッセージ送信、履歴管理、ストリーミング処理
APIプロキシ: 各AIプロバイダーへのリクエストを中継
- 場所: app/api/[provider]/route.ts
- 依存: 各プロバイダーAPIクライアント
- インターフェース: 認証、ストリーミング、エラーハンドリング
Store管理: Zustandを使用した状態管理
- 場所: app/store/*.ts
- 依存: IndexedDB（永続化）
- インターフェース: chat、config、access、mask、pluginなど

技術スタック

コア技術

言語: TypeScript 5.2.2、JavaScript
フレームワーク:
- Next.js 14.1.1（App Router使用）
- React 18.2.0
- Zustand 4.3.8（状態管理）
- Tauri 1.5.11（デスクトップアプリ）
主要ライブラリ:
- react-markdown (8.0.7): Markdownレンダリング
- mermaid (10.6.1): ダイアグラム描画
- @fortaine/fetch-event-source (3.0.6): SSEストリーミング
- idb-keyval (6.2.1): IndexedDBラッパー
- @modelcontextprotocol/sdk (1.0.4): MCPサポート
- rehype-katex/remark-math: LaTeX数式レンダリング
- html-to-image (1.11.11): チャット履歴の画像エクスポート

開発・運用ツール

ビルドツール:
- Next.jsビルドシステム（standaloneモード、exportモード対応）
- Webpack 5（カスタム設定あり）
- SWC（高速トランスパイル）
テスト:
- Jest 29.7.0 + React Testing Library
- ESLint + Prettier（コード品質）
- Husky + lint-staged（pre-commit hooks）
CI/CD:
- GitHub Actions（自動テスト・ビルド）
- Dockerイメージ自動ビルド
- Vercelデプロイ統合
デプロイ:
- Vercel（推奨、ワンクリックデプロイ）
- Docker（セルフホスト用）
- Cloudflare Pages、Zeaburなど

設計パターン・手法

プライバシーファースト: サーバーにデータを保存せず、ブラウザのIndexedDBに保存
APIプロキシパターン: Next.js API Routesを使用してCORSや認証を処理
ストリーミングレスポンス: Server-Sent Events (SSE)を使用
プラグインアーキテクチャ: 動的ロードと独立したプラグインシステム
多言語対応: コンテキストベースのi18n実装
PWA対応: Service Workerとマニフェストでオフライン動作

データフロー・処理フロー

チャットフロー:
- ユーザー入力 → ローカルストアに保存
- APIキー検証 → プロバイダー選択
- APIプロキシ経由でリクエスト送信
- SSEでストリーミングレスポンス受信
- Markdownレンダリングで表示
データ永続化フロー:
- Zustand storeの変更を検知
- IndexedDBに自動保存（debounce処理）
- アプリ起動時にIndexedDBから復元
- オプションでWebDAV/UpStash同期
APIプロキシフロー:
- クライアントから/api/[provider]にリクエスト
- 認証情報をヘッダーに追加
- 対象AIプロバイダーAPIに転送
- ストリーミングレスポンスをパイプスルー

API・インターフェース

公開API

Chat Completion API

目的: AIモデルとの対話
使用例:

// app/client/api.ts
const api = new ClientApi();
const response = await api.llm.chat({
  messages: [
    { role: "system", content: "You are a helpful assistant." },
    { role: "user", content: "Hello!" }
  ],
  model: "gpt-4",
  stream: true,
  temperature: 0.7
});

設定・カスタマイズ

設定ファイル

# 環境変数での設定
OPENAI_API_KEY=sk-xxxx              # OpenAI APIキー
CODE=password1,password2            # アクセスパスワード（複数可）
BASE_URL=https://api.openai.com     # APIベースURL
CUSTOM_MODELS=+llama,-gpt-3.5-turbo # モデルカスタマイズ
DEFAULT_MODEL=gpt-4                 # デフォルトモデル
HIDE_USER_API_KEY=1                 # ユーザーAPIキー入力を無効化
DISABLE_GPT4=1                      # GPT-4を無効化
ENABLE_BALANCE_QUERY=1              # 残高クエリを有効化
ENABLE_MCP=true                     # MCP機能を有効化

拡張・プラグイン開発

プラグイン作成: public/plugins.jsonに登録
プラグインインターフェース:
- 名前、説明、アイコン
- OpenAPIスキーマ定義
- 認証設定（APIキー、OAuthなど）
Mask（プロンプトテンプレート）作成:
- app/masks/に追加
- システムプロンプト、モデル設定を定義

パフォーマンス・スケーラビリティ

パフォーマンス特性

ベンチマーク結果:
- 初回ロード: 約100KB（高速）
- クライアントサイズ: 約5MB（軽量）
- ストリーミングレスポンス対応
最適化手法:
- Next.jsの自動最適化（コード分割、画像最適化）
- SWCによる高速トランスパイル
- チャンク分割のオプション（古いブラウザ対応）
- PWAでオフラインキャッシュ

スケーラビリティ

クライアントサイド処理のためサーバー負荷が低い
Vercel Edge Functionsでグローバルスケール
Dockerでの水平スケーリングが容易
ステートレスなため複数インスタンスで負荷分散可能

制限事項

技術的な制限:
- ブラウザのIndexedDB容量制限（通常数GB）
- ストリーミングSSEは一部プロキシ/CDNで問題あり
- Tauriデスクトップ版はプラットフォーム依存
運用上の制限:
- 各AIプロバイダーのAPIキーが必要
- プロキシ経由のため、直接APIコールより遅延が発生
- セルフホスト時はCORS設定に注意が必要

評価・所感

技術的評価

強み

非常に幅広いAIプロバイダーサポート（25以上）
プライバシー重視の設計（ローカルデータ保存）
優れたUX/UIとパフォーマンス
活発な開発コミュニティ（84Kスター、頻繁な更新）
マルチプラットフォーム対応（Web、デスクトップ、iOS）
プラグインシステムによる拡張性
豊富なデプロイオプション

改善の余地

サーバーサイドデータ永続化オプションが限定的
チームコラボレーション機能が不足
エンタープライズ用の管理機能が弱い
テストカバレッジが低い可能性

向いている用途

個人用AIチャットクライアント
小規模チームでのAIアシスタント共有
AI APIの統一インターフェースが必要な場合
プライバシーを重視する用途
カスタムAIワークフローの構築

向いていない用途

大規模エンタープライズ環境（管理機能不足）
データの中央管理が必要な組織
コンプライアンス要件が厳しい環境
リアルタイムコラボレーションが重要な場合

総評

NextChatは、オープンソースAIチャットクライアントの中でも特に成熟度が高く、機能が豊富なプロジェクトです。多様なAIプロバイダーへの対応、プライバシー重視の設計、ワンクリックデプロイなど、ユーザーフレンドリーな特徴が多く、個人や小規模チームでの利用に最適です。また、活発な開発コミュニティにより継続的に機能が追加されており、今後も発展が期待できるプロジェクトです。