mcpField
A
ai-chat

ai-chat

github.com/andrelandgraf開発23156 回インストール22 週間前に更新
リポジトリ

ai-chat について

会話の永続化、一覧管理、自動タイトル生成を備えた AI チャットアプリを構築するためのレシピスキルです。必要なセットアップから実装まで、順序に沿って開発者を案内します。

主な機能

  1. 01Neon Postgres へのチャット保存
  2. 02チャットの検索、名前変更、削除
  3. 03バックグラウンドでのタイトル生成
  4. 04メッセージパーツ、ツール、推論への対応

活用シーン

  1. 01会話を保存する AI チャットアプリの構築
  2. 02検索・管理できるチャット履歴の追加
  3. 03最初のメッセージからのタイトル生成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/andrelandgraf/fullstackrecipes --skill ai-chat

インストール後、Claude Code で/ai-chatを入力して読み込まれたか確認します。

詳細

AI チャット

データベースへの永続化、チャットリストの管理、自動タイトル生成を備えた完全な AI チャットアプリケーションを構築します。

前提条件

次のレシピを順番に完了してください。

better-env による型安全な環境設定

better-env の設定モジュールを使用して、型安全なサーバー／パブリック環境変数へのアクセス、機能フラグ、いずれか一方の認証情報を必須にする制約を設定します。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/config-schema-setup
Neon + Drizzle のセットアップ

Drizzle ORM を使用して Next.js アプリを Neon Postgres に接続し、Vercel のサーバーレス関数向けに最適化されたコネクションプーリングを設定します。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/neon-drizzle-setup
Vercel 上の Next.js

Bun で動作する Next.js アプリを作成し、開発環境を設定して、プッシュ時に自動デプロイされるよう Vercel にデプロイします。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/nextjs-on-vercel
Shadcn UI とテーマ設定

next-themes を使用して、ダークモードに対応した Shadcn UI コンポーネントを追加します。テーマプロバイダーと CSS 変数の設定も含まれます。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/shadcn-ui-setup
認証

Better Auth、メール認証、パスワードのリセット、保護されたルート、アカウント管理を備えた完全な認証システムです。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/authentication
nuqs による URL の状態管理

React の状態を URL クエリパラメーターと同期し、フィルター、検索クエリ、モーダルダイアログへのディープリンクを共有できるようにします。ブラウザーの戻る／進む操作でも UI の状態が保持されます。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/nuqs-setup
Pino ロギングのセットアップ

Pino を使用して構造化ロギングを設定します。開発環境では色付きで読みやすいログを出力し、本番環境ではログ集約サービス向けに構造化された JSON を出力します。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/pino-logging-setup
Workflow Development Kit のセットアップ

ステップ単位の永続化、ストリームの再開、エージェントのオーケストレーションに対応した、再開可能で耐久性のある AI エージェントのワークフローを実現する Workflow Development Kit をインストールして設定します。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/workflow-setup

クックブック — 次のレシピを順番に完了してください

Neon による AI チャットの永続化

AI SDK のメッセージパーツ（ツール、推論、ストリーミングを含む）を完全にサポートし、AI チャットの会話を Neon Postgres に永続化します。時系列順に並べ替え可能な ID として UUID v7 を使用します。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/ai-chat-persistence
チャットリストと管理

検索、名前変更、削除機能を備えたチャットリストページを構築します。URL と同期するフィルターやディープリンク可能なモーダルダイアログには nuqs を使用します。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/chat-list
チャット名の自動生成

最初のメッセージをもとに、高速な LLM で説明的なチャットタイトルを生成します。ユーザー体験を遅らせないよう、メインの応答の後にバックグラウンドのワークフローステップとして実行します。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/chat-naming

コメント

Markdown 対応