チャットボットウェブサイト：AIチャットプラットフォーム

AI開発の第一歩として、VercelのAIチャットボットテンプレートを探索およびデプロイしました。

デモリンク

概要

• 役割: 開発者 / インテグレーター
• スタック: Next.js 14, TypeScript, Tailwind CSS, Vercel AI SDK, NextAuth.js
• 主要な成果: 複雑なマルチプロバイダーAIテンプレートの構成とデプロイに成功しました。
• 要約: これは私の初めての実践的なAIプロジェクトでした。車輪の再発明をする代わりに、VercelのオープンソースAIチャットボットテンプレートを利用しました。そのアーキテクチャを探索し、いくつかの個人的な調整を行い、最新のAIアプリケーションがどのように動作するかを学ぶために、その設定とデプロイを成功させることに重点を置きました。

課題

• 挑戦: 大規模な既存のコードベース（Vercelのテンプレート）を理解し、その環境変数、データベース接続、およびライブデプロイメント用のAIプロバイダーを構成する方法を解明すること。
• 対象者: 私自身（学習用）と、ライブのAIチャットをテストしたいポートフォリオの訪問者。
• 制約: Vercel AI SDKの学習曲線を乗り越え、初めてサーバーレス永続性を設定すること。

アプローチと決定

• アーキテクチャ: テンプレートに用意されているModular Next.js 14 App RouterのセットアップとReact Server Componentsを活用しました。
• 重要な決定: 学習用サンドボックスとして、堅牢でMITライセンスのテンプレートを使用することにしました。これにより、基本的なストリーミングメカニズムをゼロから構築するのに苦労するのではなく、本番稼働に対応したコードを学習できました。
• トレードオフ: 学習とデプロイのための信頼性が高くフル機能の出発点を持つことを優先し、完全なカスタマイズ性を犠牲にしました。
• データフロー: テンプレートがユーザー入力をVercel AI SDKを介してさまざまなLLMプロバイダーにルーティングし、応答をUIにストリーミングする方法を学習しました。

主要な成果と影響

• 結果: AI機能を備えた最新のNext.js 14アプリケーションの構成、調整、デプロイに関する実践的な経験を得ました。
• 影響: LLMをWebアプリに統合するプロセスを明確にし、今後のよりカスタマイズされたAIプロジェクトの強固な基盤となりました。

技術的な詳細

(注：これらはこのプロジェクト中に私が探索して学んだ、Vercelテンプレートのネイティブ機能です。)

• 注目すべき詳細: コード、画像、メモを処理する、テンプレートに組み込まれたArtifactsシステムを探索しました。
• 検証: プロジェクトがPlaywrightを標準のエンドツーエンド（E2E）テストにどのように使用しているかを学びました。
• 最適化: 遅延読み込みとReact Server Componentsが、アクティブなストリーミング中にチャットインターフェイスのパフォーマンスをどのように維持するかを学習しました。
• コード品質: プロジェクトの厳密に型付けされた、コンポーネント駆動の構造をレビューし、そこから学びました。

振り返り

• 今後の展望: 今後、コアコンセプトを理解した上で、AI SDKの上に独自のカスタムUIをゼロから構築する予定です。
• 成功体験: 環境構成を適切に管理し、必要なデータベースを接続して、ライブデモをスムーズに実行できました。
• 教訓: 他の開発者が書いた本番稼働用のコードを読んで理解することは、Vercel AI SDKのような新しいテクノロジーを学ぶための最も早い方法の1つです。

私の貢献

• 構成とデプロイ: 環境変数を設定し、必要なデータベース（Neon Serverless Postgres / Vercel Blob）を接続し、テンプレートをライブ環境にデプロイしました。
• コードの探索: テンプレートによって提供されるAI SDKアーキテクチャとLLMの拡張性パターンを深く探索しました。
• 調整: 特定のデモのニーズに合わせて、UI/UXおよびプロバイダー接続に細かな個人的な調整を加えました。

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

このプロジェクトは、Vercelテンプレートによって提供されるアーキテクチャを利用しています。

• コンポーネント構成:
  • app/: コアチャットと認証フローを処理するNext.jsのルート。
  • components/: 構築済みの再利用可能なUIコンポーネント。
  • lib/ai/: LLMとプロンプトロジックの構成ファイル。
• 状態管理: 状態の遷移にReact ContextとServer Actionsを使用します。
• 統合: Vercel AI SDK、認証用のNextAuth、チャット履歴用のサーバーレスデータベースを活用しています。

デモプレビュー

調整されたライブデプロイメントは chatbot.franzdomingo.dev でご覧いただけます。すべての機能とUIを直接操作して探索できます。

• Webビュー: レスポンシブ、モバイルファーストのデザイン。
• リアルタイムチャット: 統合されたLLMのストリーミング機能をテストします。
• Artifacts: チャットボットがその場でコードやメモを生成する方法を体験してください。

ホスティングに関する注意:
デモは、独自のAPIセットアップを使用して chatbot.franzdomingo.dev でホストされています。ソースコードはVercelのテンプレートに基づいています。詳細については、franzdomingo.dev を通じて作成者にお問い合わせください。