ChatGPTNextWeb/NextChat

⭐ 84,913 🍴 61,108 TypeScript📄 MIT License GitHubで見る →

主な特徴

**ワンクリックデプロイ**: Vercelで1分以内に無料デプロイ可能
**マルチプラットフォーム**: Web、iOS、Windows、MacOS、Linux対応
**多様なAIモデルサポート**: OpenAI、Claude、DeepSeek、Gemini、Baidu、アリババ等
**プライバシー優先**: 全データはローカルブラウザに保存
**軽量クライアント**: デスクトップ版は約5MB
**PWAサポート**: レスポンシブデザイン、ダークモード対応
**Markdownサポート**: LaTeX、Mermaid、コードハイライト
**プロンプトテンプレート**: マスク機能でカスタムプロンプトを作成・共有
**リアルタイムチャット**: v2.15.8で追加
**Artifacts機能**: 生成コンテンツのプレビュー・共有
**プラグインシステム**: ネットワーク検索、計算機など
**MCPサポート**: Model Context Protocol統合
**多言語対応**: 13言語（日本語含む）

リポジトリ解析: ChatGPTNextWeb/NextChat

基本情報

リポジトリ名: ChatGPTNextWeb/NextChat
主要言語: TypeScript
スター数: 84,913
フォーク数: 61,108
最終更新: 2025年（活発に開発中）
ライセンス: MIT License
トピックス: chatgpt, ai-assistant, claude, deepseek, gpt4, gemini, nextjs, pwa, desktop-app, realtime-chat

概要

一言で言うと

Claude、DeepSeek、GPT4、Gemini Proなどをサポートする軽量高速AIアシスタントで、1分以内にVercelで無料デプロイ可能なワンクリックチャットアプリ。

詳細説明

NextChat（旧ChatGPT-Next-Web）は、最も人気のあるオープンソースAIチャットアプリケーションの1つで、ユーザーが簡単に自分のAIチャットインターフェースをデプロイできるようにします。大手プロバイダー（OpenAI、Anthropic、Google、Baidu、ByteDance、Alibabaなど）の複数のAIモデルをサポートし、ワンクリックデプロイ、プライバシー優先設計、マルチプラットフォーム対応などの特徴があります。

このプロジェクトは、AIチャットアプリケーションへのアクセスを民主化し、ユーザーがデータとプライバシーを完全にコントロールできるようにすることを目的としています。プライバシーファーストの設計により、すべてのデータはローカルブラウザに保存され、セルフホストソリューションとして優れています。

主な特徴

ワンクリックデプロイ: Vercelで1分以内に無料デプロイ可能
マルチプラットフォーム: Web、iOS、Windows、MacOS、Linux対応
多様なAIモデルサポート: OpenAI、Claude、DeepSeek、Gemini、Baidu、アリババ等
プライバシー優先: 全データはローカルブラウザに保存
軽量クライアント: デスクトップ版は約5MB
PWAサポート: レスポンシブデザイン、ダークモード対応
Markdownサポート: LaTeX、Mermaid、コードハイライト
プロンプトテンプレート: マスク機能でカスタムプロンプトを作成・共有
リアルタイムチャット: v2.15.8で追加
Artifacts機能: 生成コンテンツのプレビュー・共有
プラグインシステム: ネットワーク検索、計算機など
MCPサポート: Model Context Protocol統合
多言語対応: 13言語（日本語含む）

使用方法

インストール

前提条件

Node.js: >= 16
Yarn/npm: パッケージ管理ツール
APIキー: 使用するAIプロバイダーのAPIキーが必要

インストール手順

# 方法1: Vercelデプロイ（推奨）
# 1. GitHubアカウントでプロジェクトをフォーク
# 2. Vercelで「Deploy」ボタンをクリック
# 3. 環境変数を設定：
#    - OPENAI_API_KEY: OpenAI APIキー
#    - CODE: アクセスパスワード（オプション）

# 方法2: ローカル開発
git clone https://github.com/ChatGPTNextWeb/NextChat.git
cd NextChat
yarn install
yarn dev  # http://localhost:3000 で起動

# 方法3: 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

# 方法4: デスクトップアプリとして使用
# https://github.com/ChatGPTNextWeb/NextChat/releases から
# OSに応じたバイナリをダウンロード

基本的な使い方

初回設定

アプリケーションにアクセス
設定ページでAPIキーを入力（または環境変数で設定）
使用したいAIモデルを選択
チャット開始

カスタマイズ例

// カスタムプロンプトテンプレート（マスク）の作成
const customMask = {
  avatar: "1f916",  // ロボットの絵文字
  name: "コードレビューアシスタント",
  context: [
    {
      role: "system",
      content: "あなたは経験豊富なコードレビューアです..."
    }
  ]
};

高度な使い方

複数モデルの同時使用

# 環境変数で複数のAPIキーを設定
OPENAI_API_KEY=sk-xxx,sk-yyy,sk-zzz  # カンマ区切り
ANTHROPIC_API_KEY=sk-ant-xxx
GOOGLE_API_KEY=xxx
DEEPSEEK_API_KEY=xxx

プラグインの使用

// プラグインの有効化と設定
{
  "plugin": {
    "enable": true,
    "list": [
      {
        "name": "web-search",
        "enabled": true,
        "config": {
          "searchEngine": "google"
        }
      }
    ]
  }
}

MCP (Model Context Protocol) の使用

# ビルド時にMCPを有効化
ENABLE_MCP=true yarn build

ドキュメント・リソース

公式ドキュメント

README.md: プロジェクト概要、クイックスタート、機能一覧
docs/faq-*.md: 多言語対応のFAQドキュメント
docs/vercel-*.md: Vercelデプロイガイド
docs/cloudflare-pages-*.md: Cloudflare Pagesデプロイガイド
公式サイト: https://nextchat.club
Webデモ: https://app.nextchat.club

サンプル・デモ

プロンプトテンプレート: app/masks/に事前定義されたプロンプト
iOSアプリ: App Storeで公開中
デスクトップアプリ: GitHub Releasesで配布

チュートリアル・ガイド

Vercelデプロイガイド（日本語含む多言語対応）
チャット履歴同期ガイド
環境変数設定ガイド
翻訳貢献ガイド

技術的詳細

アーキテクチャ

全体構造

NextChatはNext.js 14をベースとしたモダンなReactアプリケーションで、App Routerを使用しています。状態管理にZustand、スタイリングにCSS Modulesを採用し、TypeScriptで完全に型付けされています。

ディレクトリ構成

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

主要コンポーネント

Chatコンポーネント: メインチャットUI
- 場所: app/components/chat.tsx
- 依存: chatStore、configStore、accessStore
- インターフェース: メッセージ送受信、ストリーミング対応
ClientApi: AIプロバイダー抽象化層
- 場所: app/client/api.ts
- 依存: 各プラットフォーム実装
- インターフェース: chat(), usage(), models()
Storeシステム: Zustandベースの状態管理
- 場所: app/store/
- 主要ストア: chat, config, access, mask, prompt
- インターフェース: persist対応、IndexedDB保存

技術スタック

コア技術

言語: TypeScript（完全型付け）
フレームワーク: Next.js 14（App Router使用）
UIライブラリ: React 18
主要ライブラリ:
- zustand: 軽量な状態管理
- react-markdown (^8.0.7): Markdownレンダリング
- rehype-katex (^6.0.3): LaTeX数式サポート
- mermaid (^10.6.1): ダイアグラム描画
- @hello-pangea/dnd (^16.5.0): ドラッグ&ドロップ
- idb-keyval (^6.2.1): IndexedDBラッパー
- @modelcontextprotocol/sdk: MCPサポート
- @vercel/analytics: 分析ツール

開発・運用ツール

ビルドツール:
- Next.js統合ビルドシステム
- SWCトランスパイラー
- webpack 5（SVGローダー付き）
- Tauri（デスクトップアプリ用）
テスト: Jest、React Testing Library
CI/CD: GitHub Actions
デプロイ:
- Vercel（推奨）
- Docker
- Cloudflare Pages
- Zeabur

設計パターン・手法

コンポーネントベース設計: Reactの再利用可能コンポーネント
状態管理パターン: Zustandによるグローバルストア
プロキシパターン: APIルートで各AIプロバイダーへのリクエストを中継
ファクトリーパターン: getClientApi()でプロバイダーを動的選択
プラグインアーキテクチャ: プラグインシステムで機能拡張
PWAパターン: Service Workerでオフライン対応

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

ユーザー入力: チャットUIからメッセージ入力
前処理:
- プロンプトテンプレート適用
- システムプロンプト挿入
- トークン数計算
APIリクエスト:
- ClientApi経由で選択されたプロバイダーにAPIコール
- APIルートでプロキシ処理
- ストリーミングレスポンス対応
レスポンス処理:
- EventSourceでストリーミング受信
- Markdownパース&レンダリング
- コードハイライト、LaTeX、Mermaid処理
データ保存:
- Zustandストア更新
- IndexedDBへの永続化
- ローカルストレージ同期

API・インターフェース

公開API

APIプロキシエンドポイント

目的: 各AIプロバイダーのAPIを統一インターフェースで提供
使用例:

// /api/openaiへのPOSTリクエスト
const response = await fetch('/api/openai', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${apiKey}`
  },
  body: JSON.stringify({
    messages: [{role: 'user', content: 'Hello'}],
    model: 'gpt-3.5-turbo',
    stream: true
  })
});

設定・カスタマイズ

環境変数

# 必須設定
OPENAI_API_KEY=sk-xxx        # OpenAI APIキー

# オプション設定
CODE=your-password           # アクセスパスワード
BASE_URL=https://api.openai.com  # APIベースURL
HIDE_USER_API_KEY=1         # ユーザーAPIキー入力を無効化
DISABLE_GPT4=1              # GPT-4を無効化

# 複数モデル対応
ANTHROPIC_API_KEY=sk-ant-xxx
GOOGLE_API_KEY=xxx
DEEPSEEK_API_KEY=xxx

拡張・プラグイン開発

プラグインインターフェース:

interface Plugin {
  id: string;
  name: string;
  version: string;
  enable: boolean;
  builtin: boolean;
  config: Record<string, any>;
  schema?: {
    openapi: string;
    info: { title: string; version: string };
    servers: Array<{ url: string }>;
    paths: Record<string, any>;
  };
}

// プラグインの登録
const myPlugin: Plugin = {
  id: 'my-plugin',
  name: 'My Plugin',
  version: '1.0.0',
  enable: true,
  builtin: false,
  config: { apiUrl: 'https://api.example.com' }
};

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

パフォーマンス特性

ベンチマーク結果:
- 初回ロード: ~100KB（高速）
- ストリーミングレスポンス対応
- クライアントサイズ: ~5MB（デスクトップ版）
最適化手法:
- Next.jsの自動最適化
- コードスプリッティング（オプション）
- Service Workerによるキャッシュ
- IndexedDBでのローカルデータ保存

スケーラビリティ

水平スケーリング: Vercel、Cloudflare等のエッジネットワーク対応
マルチテナント: CODE環境変数で複数アクセスコード設定可能
APIキープール: 複数のAPIキーをロードバランシング
セルフホスト対応: Docker、企業版でのプライベートデプロイ

制限事項

ブラウザストレージ制限: 大量のチャット履歴でIndexedDB容量制限に到達可能
チャンクエラー: 古いブラウザでCSSチャンク読み込みエラー
ストリーミング制限: 一部のプロキシ（nginx等）で設定要
モデル制限: プロバイダーのAPI制限に依存

評価・所感

技術的評価

強み

圧倒的なユーザー数: 8.5万スターと6.1万フォークの大規模コミュニティ
簡単なデプロイ: ワンクリックで誰でも利用開始可能
プライバシー優先設計: データはすべてローカル保存
豊富な機能: マルチモデル、プラグイン、リアルタイムチャット
活発な開発: 頻繁なアップデートと新機能追加

改善の余地

ドキュメント不足: 機能の詳細な技術ドキュメントが不足
エラーハンドリング: APIエラー時のユーザーフィードバック改善余地
モバイルUI: スマートフォンでの使い勝手に改善余地

向いている用途

個人AIアシスタント: ChatGPTの代替としての利用
中小企業のAI導入: 低コストでのAIチャットボット導入
教育・研究: 学校や研究機関での教育用途
マルチAIモデルの比較: 複数のAIモデルを並列で試用
カスタムAIアプリ開発: ベースとしての二次開発

向いていない用途

大企業の本番運用: エンタープライズグレードのサポート体制が必要
高度なセキュリティ要件: 金融や医療などの厳格なセキュリティ要件
大量データ処理: ブラウザベースの制限
オフライン完全対応: API接続が必須

総評

NextChatは、AIチャットアプリケーションの民主化を実現した画期的なオープンソースプロジェクトです。特にワンクリックデプロイとプライバシー優先設計は、技術に詳しくないユーザーでも簡単にAIを活用できる環境を提供しています。複数のAIモデルへの対応と活発なコミュニティによる継続的な改善は、このプロジェクトの大きな強みです。個人や中小企業がAIを活用するための第一選択肢として、今後も発展が期待されるプロジェクトです。