チャットボット・ウェブサイト：カスタマイズ可能なAI対話プラットフォーム

カスタマイズ可能なAIチャットボット / Webアプリ / Next.js 14 プロジェクト

一言要約： Next.js 14 App Router、TypeScript、Tailwind CSS、Shadcn UIで構築された、現代的なウェブサイト向けのインタラクティブで拡張可能なチャットボット・インターフェース。複数のLLMプロバイダーを統合し、モジュール式で実用的なアーキテクチャを備えています。

開発期間：継続中 (2025)

備考：

• ホスティング/コードの利用に関する免責事項： デモは独自のAPIを使用して chatbot.franzdomingo.tech で公開されています。ソースコードは非公開です。詳細は作成者にお問い合わせください。
• 詳細情報やデモに関するお問い合わせ： franzdomingo.tech を通じて Franz Phillip G. Domingo までご連絡ください。
• ナビゲーションに関する注意： チャットボットWebアプリは上記のライブデモリンクからアクセスできます。

---

主な機能

• カスタムLLM統合（OpenAI, Gemini, Ollama, xAI, およびカスタムAPI）
• レスポンシブなUIによるリアルタイムチャット
• モジュール式でコンポーネント駆動のアーキテクチャ
• 実用レベルのスタイリング（Tailwind CSS, Shadcn UI, Radix UI）
• アーティファクトシステム：リアルタイム更新機能付きのコード、画像、スプレッドシート、メモ
• 認証 (Auth.js)
• データの永続化 (Neon Serverless Postgres, Vercel Blob)
• パフォーマンス最適化：ストリーミング、遅延読み込み、画像圧縮
• 拡張可能なプロバイダー設定
• エンドツーエンドテスト (Playwright)

---

私の貢献（役割と責任）

統合＆デプロイ：

• ライブデモンストレーションのため、専用の環境にVercelのオープンソースAIチャットボットをデプロイおよび設定しました。

バックエンド接続：

• マルチモデル対応をシミュレートするため、独自のバックエンドAPIに接続しました。

アーキテクチャの探求：

• AI SDKアーキテクチャとLLMの拡張性パターンを調査しました。

UI/UX ＆ 拡張性：

• UI/UXの拡張性を調査し、将来の機能強化のためのコンポーネントオーバーライドを計画しました。

計画されている機能強化：

• Gemini, Ollama、およびカスタムエンドポイントへの対応拡大
• ユーザー定義ワークフローのためのUI/UX再設計
• ユーザー固有のプロンプトエンジニアリングのためのミドルウェア層

---

直面した課題

• プロバイダーの拡張性： LLMプロバイダーとカスタムエンドポイントを柔軟に切り替えられるアーキテクチャの設計。

• パフォーマンス： リアルタイムチャットのためのサーバーストリ―ミング、遅延読み込み、アーティファクト処理の最適化。

• 認証と永続化： 安全でスケーラブルなデータ管理のためのAuth.jsとサーバーレスストレージの統合。

• UI/UX： アクセシビリティとデバイス間でのレスポンシブデザインの確保。

---

プロジェクトアーキテクチャ

• アーキテクチャスタイル： React Server Componentsを備えたモジュール式のNext.js 14 App Router。

• コンポーネント構成：

  • app/: Next.jsルート（チャット、認証、レイアウト）
  • components/: 再利用可能なUIおよびロジック駆動コンポーネント
  • lib/ai/: LLM設定、プロンプト論理、プロバイダー登録
  • artifacts/: アーティファクト処理ロジック（テキスト、画像、コードなど）
  • hooks/: チャット、状態、UI用のカスタムReactフック
  • tests/: E2Eテストおよびテストヘルパー

• 状態管理： React Context, Server Actions

• 統合テクノロジー： Vercel AI SDK, Auth.js, Neon Serverless Postgres, Vercel Blob

---

デモプレビュー

• スクリーンショット/ビデオ： ライブデモは chatbot.franzdomingo.tech でご覧いただけます。すべての機能とUIを直接体験可能です。

• プラットフォーム表示： Web (レスポンシブ、モバイルファースト)

• 実演された機能：

  • リアルタイムチャット
  • LLMプロバイダーの切り替え
  • アーティファクトシステム（コード、画像、メモ）
  • 認証とデータの永続化
  • モジュール式で実用的なUI

• デモ手順： chatbot.franzdomingo.tech にアクセスして、チャットボットWebアプリを操作してください。

---

開発リソース

• ガイド/ドキュメント：
  • Next.js, Vercel AI SDK, Tailwind CSS, Shadcn UI, Radix UI ドキュメント

---

開発者： Franz Phillip G. Domingo
最終更新： 2025-07-11

---

Vercelのオープンソースチャットボット（MITライセンス）をベースに構築。個人利用および統合のためにカスタマイズされています。