ChatMate - Your AI-Powered Chatbot

ChatMate - AI 搭載チャットボット

概要

ChatMate は、ローカルでの会話保存、バックエンドへのクエリ送信用 API 連携、サイドバーでの会話履歴表示、ユーザー認証機能を備えたチャットボットインターフェースを提供する Next.js アプリケーションです。Genkit を活用し、会話の要約やテキスト読み上げなどの AI 搭載機能を実現します。

機能

• ユーザー認証： 安全なユーザー認証と認可。
• 会話履歴： 折りたたみ可能なサイドバーから、過去の会話に簡単にアクセスできます。
• ローカルストレージ： 会話はユーザーのデバイスにローカル保存されます。
• API 連携： クエリは処理のためにバックエンド API に送信されます。
• AI 搭載の要約： AI 搭載ツールを使用して、現在の会話の直近 10 件のメッセージを要約し、チャットウィンドウの上部に表示します。
• テキスト読み上げ（TTS）： アクセシビリティのため、AI の応答を音声に変換します。
• 音声入力： 音声をテキストに文字起こしして入力できます。
• テーマ切り替え： ライトモードとダークモードを切り替えられます。
• マイクとスピーカーの音声テスト：マイクとスピーカーを設定できます。

使用技術

• Next.js - 高性能なウェブアプリケーションを構築するための React フレームワーク
• TypeScript - 型を備えた JavaScript のスーパーセット
• Tailwind CSS - ユーティリティファーストの CSS フレームワーク
• ShadCN UI - Radix UI と Tailwind CSS で構築された再利用可能な UI コンポーネント
• Lucide React - アイコン
• Genkit - 信頼性とスケーラビリティに優れ、監視可能な AI 搭載機能を構築するためのプラットフォーム
• Zod - 静的な型推論に対応した、TypeScript ファーストのスキーマ検証ライブラリ
• Firebase - 認証とデータストレージのためのバックエンドサービス
• NextAuth.js - Next.js 用の認証ライブラリ

システム図

この図は、page.tsx 内のやり取りと AI フローに焦点を当て、ChatMate アプリケーションの全体的なアーキテクチャとデータフローを示しています。

graph TD
    subgraph "Browser (Client-Side)"
        U[User] --> UI[React UI (src/app/page.tsx)]
        UI -- Interacts with --> StateHooks[React State Hooks (useState, useEffect, etc.)]
        UI -- Renders --> Comp[Shadcn UI Components (@/components/ui/*)]

        subgraph "User Input/Output"
            InputArea[Text Input Area] --> |onKeyDown, onChange| StateHooks
            MicBtn[Mic Button] --> |onClick| Record[Recording Logic (start/stopRecording)]
            TTSBtn[TTS Button/Select] --> |onClick, onValueChange| Speak[Speak Logic (speakText)]
        end

        subgraph "Storage"
            StateHooks -- Persists/Loads --> LS[Browser localStorage (messages, history, names, summary)]
        end

        subgraph "Media Handling"
             Record --> |getUserMedia| BrowserAPI[Browser MediaRecorder API]
             BrowserAPI --> |Audio Blob| Record
             Record --> |createObjectURL| AudioDataURL[Client-Side Audio URL]
             Speak --> |new Audio(ServerURL/DataURL)| AudioPlayer[HTML Audio Element]
        end

        UI -- Triggers --> SendMsg[sendMessage Logic]
        UI -- Triggers --> NewChat[createNewConversation Logic]
        UI -- Triggers --> SelectChat[selectConversation Logic]
        UI -- Triggers --> RenameChat[handleRename Logic]
        UI -- Triggers --> DeleteChat[deleteConversation Logic]
        UI -- Triggers --> ReloadChat[handleReload Logic]

    end

    subgraph "Server-Side (Next.js API / Genkit Flows)"
        AIFlows[AI Flows (@/ai/flows/*)]
        Genkit[Genkit AI Instance (@/ai/ai-instance.ts)]

        subgraph "Specific Flows"
            AnswerFlow[answerMessage]
            SummarizeFlow[summarizeConversation]
            NameFlow[nameConversation]
            TTSFlow[textToSpeech]
            TranscribeFlow[transcribeAudio]
        end

        AIFlows -- Uses --> Genkit
        Genkit -- Interacts with --> ModelAPI[AI Model API (e.g., Gemini)]

    end

    subgraph "Data Flow"
        SendMsg --> |User Input, History, Summary| AnswerFlow
        AnswerFlow --> |AI Response| SendMsg
        SendMsg --> |Update State| StateHooks
        SendMsg --> |Potentially Trigger| NameFlow
        NameFlow --> |AI Name| SendMsg

        StateHooks -- Triggers Summary Update --> SumLogic[updateSummary Logic]
        SumLogic --> |Messages| SummarizeFlow
        SummarizeFlow --> |Summary| SumLogic
        SumLogic --> |Update State| StateHooks

        Speak --> |Text, Language| TTSFlow
        TTSFlow --> |Audio URL or Data URL| Speak
        Speak --> AudioPlayer

        Record --> |Audio Data URL| TranscribeFlow
        TranscribeFlow --> |Transcription Text| Record
        Record --> |Update Input State| StateHooks

        StateHooks --> LS

    end

    %% Styling
    classDef client fill:#f9f,stroke:#333,stroke-width:2px;
    classDef server fill:#ccf,stroke:#333,stroke-width:2px;
    classDef storage fill:#lightgrey,stroke:#333,stroke-width:1px;
    classDef state fill:#D6EAF8,stroke:#333,stroke-width:1px;
    classDef logic fill:#ABEBC6,stroke:#333,stroke-width:1px;
    classDef flows fill:#FDEDEC,stroke:#333,stroke-width:1px;


    class UI,StateHooks,Comp,InputArea,MicBtn,TTSBtn,Record,Speak,AudioPlayer,AudioDataURL,BrowserAPI client;
    class LS storage;
    class SendMsg,NewChat,SelectChat,RenameChat,DeleteChat,ReloadChat,SumLogic logic;
    class AIFlows,Genkit,AnswerFlow,SummarizeFlow,NameFlow,TTSFlow,TranscribeFlow,ModelAPI server;
    class AnswerFlow,SummarizeFlow,NameFlow,TTSFlow,TranscribeFlow flows;

クライアント側（ブラウザー）：

ユーザー操作：ユーザーは src/app/page.tsx によってレンダリングされる React UI を操作します。 UI コンポーネント：UI は Shadcn UI Components を使用して構築されています。 状態管理：ユーザーの操作（入力、ボタンのクリック）によって、React State Hooks（useState、useEffect など）で管理されるコンポーネントの状態が更新されます。 ロジックハンドラー：sendMessage、speakText、startRecording、createNewConversation などの関数は、UI の操作によって呼び出されます。 ストレージ：会話のメッセージ、履歴一覧、会話名、要約などの主要なアプリケーションデータは、セッションをまたいで状態を保持するために、ブラウザーの localStorage に保存されます。 メディア処理： 録音では、ブラウザーの MediaRecorder API を使用して音声をキャプチャし、クライアント側で Blob と Audio URL を作成します。 TTS の再生では、標準の HTML Audio Element を使用し、バックエンドから提供される URL（または Data URL）から音声を再生します。 サーバー側（Next.js API / Genkit フロー）：

Genkit AI インスタンス：基盤となる AI モデル（Gemini など）と連携するためのコアインターフェースとして機能します。 AI フロー：特定のタスクは、Genkit を使用して定義されたサーバー側の関数（answerMessage、summarizeConversation、nameConversation、textToSpeech、transcribeAudio）にカプセル化されています。これらのフローは Genkit AI インスタンスと連携します。 AI モデル API：Genkit は、テキスト生成、要約、命名、TTS、文字起こしなどのタスクを実行するために、設定された大規模言語モデル API と通信します。 データフロー：

チャット：ユーザー入力によって sendMessage が呼び出され、answerMessage フローが実行されます。応答によって状態が更新され、UI が再レンダリングされます。メッセージは localStorage に保存されます。会話の状態に応じて、要約（updateSummary -> summarizeConversation）と命名（sendMessage -> nameConversation）のフローが実行されます。 TTS：読み上げボタンをクリックすると speakText が呼び出され、textToSpeech フローが実行されます。返された音声 URL を使用して Audio オブジェクトを作成し、再生します。 文字起こし：マイクボタンをクリックすると startRecording が呼び出されます。録音を停止すると、音声データ（クライアント側の URL）が transcribeAudio フローに送信されます。返されたテキストによって入力状態が更新されます。 永続化：会話（メッセージ、名前、履歴、要約）に関する状態の変更によって、localStorage が更新されます。初回読み込み時と会話の切り替え時に、データが localStorage から読み込まれます。 このアーキテクチャでは、コアとなるチャットインターフェースと履歴にクライアント側の状態管理と localStorage を使用し、AI を活用したすべての処理にはサーバー側の Genkit フローを利用します。

セットアップ手順

ChatMate アプリケーションをセットアップするには、以下の手順に従ってください。

前提条件

• Node.js（バージョン 18 以降）
• npm または yarn
• Genkit CLI：npm install -g genkit-cli または yarn global add genkit-cli

インストール

1. リポジトリをクローンします：

   git clone [your_repository_url]
   cd ChatMate
   

2. 依存関係をインストールします：

   npm install
   # or
   yarn install
   

3. 環境変数： ルートディレクトリに .env ファイルを作成し、次の環境変数を追加します。

   GOOGLE_GENAI_API_KEY=YOUR_GEMINI_API_KEY
   GOOGLE_CLOUD_PROJECT=YOUR_GOOGLE_CLOUD_PROJECT
   GOOGLE_CLOUD_LOCATION=YOUR_GOOGLE_CLOUD_LOCATION
   

   • GOOGLE_GENAI_API_KEY：Google AI Studio から API キーを取得します。
   • GOOGLE_CLOUD_PROJECT：Google Cloud プロジェクト ID です。
   • GOOGLE_CLOUD_LOCATION：Google Cloud プロジェクトのロケーションです（例：us-central1）。

4. Firebase を設定します：

   • Firebase Console で Firebase プロジェクトをセットアップします。
   • Authentication（Google サインインなど）を有効にします。
   • Firebase の設定をプロジェクトに追加します。

5. アプリケーションを実行します：

   npm run dev
   # or
   yarn dev
   

   ブラウザーを開き、http://localhost:9002 にアクセスします。

Package.json スクリプト

package.json 内のスクリプトの概要は次のとおりです。

• "dev"：Turbopack を使用して、ポート 9002 で Next.js の開発サーバーを実行します。

  "dev": "next dev --turbopack -p 9002"
  

• "genkit:dev"：src/ai/dev.ts を実行して、Genkit の開発サーバーを起動します。

  "genkit:dev": "genkit start -- tsx src/ai/dev.ts"
  

• "genkit:watch"：src/ai/dev.ts の変更をライブリロードしながら、Genkit の開発サーバーを起動します。

  "genkit:watch": "genkit start -- tsx --watch src/ai/dev.ts"
  

• "build"：Next.js アプリケーションを本番環境向けにビルドします。

  "build": "next build"
  

• "start"：Next.js の本番サーバーを起動します。

  "start": "next start"
  

• "lint"：コード品質を確認するため、ESLint リンターを実行します。

  "lint": "next lint"
  

• "typecheck"：型チェックのため、TypeScript コンパイラーを実行します。

  "typecheck": "tsc --noEmit"
  

AI フロー

ChatMate の AI 搭載機能は、Genkit フローを使用して実装されています。これらのフローは src/ai/flows ディレクトリで定義され、src/ai/dev.ts に登録されています。

1. ユーザーメッセージへの回答（src/ai/flows/answer-message.ts）

• 目的： 会話履歴と要約に基づいて、ユーザーメッセージへの回答を生成します。
• 入力：
  • message：ユーザーのメッセージ（文字列）。
  • conversationHistory：会話の履歴（{ sender: string; text: string } の配列）。
  • summary：会話の要約（任意の文字列）。
• 出力：
  • response：AI の回答（文字列）。
• プロンプト： AI に Luminous Power Technologies のカスタマーケアエージェントとして動作するよう指示するプロンプトを使用します。会話履歴と要約を活用して、関連性の高い情報を提供します。
• 使用方法： answerMessage 関数にユーザーの入力、会話履歴、要約を渡して、回答を生成します。

2. 会話の命名（src/ai/flows/name-conversation.ts）

• 目的： 最初のメッセージに基づいて、会話の内容を表す名前を生成します。
• 入力：
  • firstMessage：会話の最初のメッセージ（文字列）。
• 出力：
  • conversationName：会話に付ける生成された名前（文字列）。
• プロンプト： 最初のメッセージに基づいて、簡潔で関連性の高い短い説明的な名前を作成するプロンプトを使用します。
• 使用方法： 新しい会話の最初のメッセージを nameConversation 関数に渡して、適切な名前を生成します。

3. 会話の要約（src/ai/flows/summarize-conversation.ts）

• 目的： AI を使用して、会話の直近 10 件のメッセージを要約します。
• 入力：
  • messages：会話の直近 10 件のメッセージ（{ sender: string; text: string } の配列）。
• 出力：
  • summary：会話の要約（文字列）。
• プロンプト： 指定された会話を数文で要約するプロンプトを使用します。
• 使用方法： 会話の直近 10 件のメッセージを summarizeConversation 関数に渡して、要約を生成します。

4. テキスト読み上げ（src/ai/flows/text-to-speech.ts）

• 目的： Genkit フローを使用して、テキストを音声に変換します。
• 入力：
  • text：音声に変換するテキスト（文字列）。
  • language：テキストの変換先の言語（任意の文字列。デフォルトは英語）。
• 出力：
  • audioUrl：生成された音声ファイルの URL（文字列）。
• プロンプト： 入力テキストと言語を含め、AI にテキストを音声に変換するよう指示するプロンプトを使用します。
• 使用方法： テキストと言語を textToSpeech 関数に渡して、音声の URL を生成します。

5. 音声の文字起こし（src/ai/flows/transcribe-audio.ts）

• 目的： Genkit フローを使用して、音声をテキストに変換します。
• 入力：
  • audioUrl：文字起こしする音声ファイルの URL（文字列）。
• 出力：
  • transcription：音声から文字起こしされたテキスト（文字列）。
• プロンプト： 指定された URL の音声を文字起こしするプロンプトを使用します。
• 使用方法： 音声の URL を transcribeAudio 関数に渡して、文字起こしを生成します。

Page.tsx の機能

src/app/page.tsx ファイルは、チャットボットのメインインターフェースを実装します。機能の概要は次のとおりです。

• 状態管理： useState を使用して、メッセージ、入力、要約、会話履歴、その他の UI 関連の状態を管理します。
• 会話の処理： 会話の新規作成、削除、選択、名前の変更を行うロジックを実装します。
• メッセージの送信： ユーザーのメッセージをバックエンド API に送信して処理し、AI の応答を受け取ります。
• ローカルストレージ： 会話データ（メッセージ、要約、会話名）をローカルストレージに保存し、セッションをまたいで会話を保持します。
• AI の統合： Genkit フローを統合して、会話の要約、会話名の生成、ユーザーメッセージへの回答を行います。
• テキスト読み上げ： textToSpeech フローを使用して、テキスト読み上げ機能を実装します。
• 音声入力： transcribeAudio フローを使用して、音声入力機能を実装します。
• UI の描画： メッセージ、入力エリア、会話履歴、その他の UI 要素を含むチャットボットのインターフェースを描画します。
• オーディオ設定： スピーカーとマイクのオーディオ設定を構成するオプションを提供します。

今後の開発

• ユーザー認証と認可を実装します。
• スタイル設定やカスタマイズのオプションを追加して、UI を改善します。
• 感情分析やトピック検出など、AI を活用した機能を追加します。
• 他のバックエンドサービスや API と統合します。
• エラー処理とユーザーへのフィードバックを改善します。
• テストと監視を実装します。

システム図

この図は、page.tsx 内部と AI フローの相互作用に焦点を当て、ChatMate アプリケーションの全体的なアーキテクチャとデータフローを示しています。

graph TD
    subgraph "Browser (Client-Side)"
        U[User] --> UI[React UI (src/app/page.tsx)]
        UI -- Interacts with --> StateHooks[React State Hooks (useState, useEffect, etc.)]
        UI -- Renders --> Comp[Shadcn UI Components (@/components/ui/*)]

        subgraph "User Input/Output"
            InputArea[Text Input Area] --> |onKeyDown, onChange| StateHooks
            MicBtn[Mic Button] --> |onClick| Record[Recording Logic (start/stopRecording)]
            TTSBtn[TTS Button/Select] --> |onClick, onValueChange| Speak[Speak Logic (speakText)]
        end

        subgraph "Storage"
            StateHooks -- Persists/Loads --> LS[Browser localStorage (messages, history, names, summary)]
        end

        subgraph "Media Handling"
             Record --> |getUserMedia| BrowserAPI[Browser MediaRecorder API]
             BrowserAPI --> |Audio Blob| Record
             Record --> |createObjectURL| AudioDataURL[Client-Side Audio URL]
             Speak --> |new Audio(ServerURL/DataURL)| AudioPlayer[HTML Audio Element]
        end

        UI -- Triggers --> SendMsg[sendMessage Logic]
        UI -- Triggers --> NewChat[createNewConversation Logic]
        UI -- Triggers --> SelectChat[selectConversation Logic]
        UI -- Triggers --> RenameChat[handleRename Logic]
        UI -- Triggers --> DeleteChat[deleteConversation Logic]
        UI -- Triggers --> ReloadChat[handleReload Logic]

    end

    subgraph "Server-Side (Next.js API / Genkit Flows)"
        AIFlows[AI Flows (@/ai/flows/*)]
        Genkit[Genkit AI Instance (@/ai/ai-instance.ts)]

        subgraph "Specific Flows"
            AnswerFlow[answerMessage]
            SummarizeFlow[summarizeConversation]
            NameFlow[nameConversation]
            TTSFlow[textToSpeech]
            TranscribeFlow[transcribeAudio]
        end

        AIFlows -- Uses --> Genkit
        Genkit -- Interacts with --> ModelAPI[AI Model API (e.g., Gemini)]

    end

    subgraph "Data Flow"
        SendMsg --> |User Input, History, Summary| AnswerFlow
        AnswerFlow --> |AI Response| SendMsg
        SendMsg --> |Update State| StateHooks
        SendMsg --> |Potentially Trigger| NameFlow
        NameFlow --> |AI Name| SendMsg

        StateHooks -- Triggers Summary Update --> SumLogic[updateSummary Logic]
        SumLogic --> |Messages| SummarizeFlow
        SummarizeFlow --> |Summary| SumLogic
        SumLogic --> |Update State| StateHooks

        Speak --> |Text, Language| TTSFlow
        TTSFlow --> |Audio URL or Data URL| Speak
        Speak --> AudioPlayer

        Record --> |Audio Data URL| TranscribeFlow
        TranscribeFlow --> |Transcription Text| Record
        Record --> |Update Input State| StateHooks

        StateHooks --> LS

    end

    %% Styling
    classDef client fill:#f9f,stroke:#333,stroke-width:2px;
    classDef server fill:#ccf,stroke:#333,stroke-width:2px;
    classDef storage fill:#lightgrey,stroke:#333,stroke-width:1px;
    classDef state fill:#D6EAF8,stroke:#333,stroke-width:1px;
    classDef logic fill:#ABEBC6,stroke:#333,stroke-width:1px;
    classDef flows fill:#FDEDEC,stroke:#333,stroke-width:1px;


    class UI,StateHooks,Comp,InputArea,MicBtn,TTSBtn,Record,Speak,AudioPlayer,AudioDataURL,BrowserAPI client;
    class LS storage;
    class SendMsg,NewChat,SelectChat,RenameChat,DeleteChat,ReloadChat,SumLogic logic;
    class AIFlows,Genkit,AnswerFlow,SummarizeFlow,NameFlow,TTSFlow,TranscribeFlow,ModelAPI server;
    class AnswerFlow,SummarizeFlow,NameFlow,TTSFlow,TranscribeFlow flows;

Page.tsx の機能

src/app/page.tsx ファイルは、チャットボットのメインインターフェースを実装します。機能の概要は次のとおりです。

• 状態管理： useState を使用して、メッセージ、入力、要約、会話履歴、その他の UI 関連の状態を管理します。
• 会話の処理： 会話の新規作成、削除、選択、名前の変更を行うロジックを実装します。
• メッセージの送信： ユーザーのメッセージを Genkit フローに送信して処理し、AI の応答を受け取ります。
• ローカルストレージ： 会話データ（メッセージ、要約、会話名）をローカルストレージに保存し、セッションをまたいで会話を保持します。
• AI の統合： Genkit フローを統合して、会話の要約、会話名の生成、ユーザーメッセージへの回答を行います。
• テキスト読み上げ： textToSpeech フローを使用して、テキスト読み上げ機能を実装します。
• 音声入力： transcribeAudio フローを使用して、音声入力機能を実装します。
• UI の描画： メッセージ、入力エリア、会話履歴、その他の UI 要素を含むチャットボットのインターフェースを描画します。
• オーディオ設定： スピーカーとマイクのオーディオ設定を構成するオプションを提供します。

今後の開発

• ユーザー認証と認可を実装します。
• スタイル設定やカスタマイズのオプションを追加して、UI を改善します。
• 感情分析やトピック検出など、AI を活用した機能を追加します。
• 他のバックエンドサービスや API と統合します。
• エラー処理とユーザーへのフィードバックを改善します。
• テストと監視を実装します。