チャットスターター
作業中のAIチャットアプリは、クリックで無料で展開できます。アプリのサイドバー、モデルチップとストップコントロールのカプセルコンポーザー、思考インジケーター、コピーと既読のアクション、訪問者のブラウザに住んでいるチャット履歴レールで応答を合理化しました。それの背後にある1つのルートは、プロバイダのキーサーバーサイドを読み込み、Vercel AI SDKで回答をストリームします。すべてがソースとしてインストールされているので、変更するあなたのものです。
助けてもらえますか?
このチャットは、独自の API キーに対して実行されます。このブラウザーで履歴が保持されます。
Vercel へのデプロイ
Vercel が要求したときに、デプロイ、API キーを 1 つクリックし、最初のデプロイは既に答えています。Vercel はスターターを独自の GitHub アカウントにコピーし、そこにビルドします。キーはプロジェクトの環境に直進し、BoardUI に触れることはありません。
誰がキーを所有しているかに請求書を要求し、URLを持つ誰もがそれらを送信することができます。 支出制限でキーを作成し、料金の制限を前に置く /api/chat 公共を指す前に。
インストール
すでにNext.jsプロジェクトがありますか? 同じ画面はCLIでインストールされ、ランタイムも含まれています。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
npx boardui@latest add agent-chat共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
自分の鍵を握る
1つの変数、 AI_API_KEY. プロバイダーはキー自体から読み込まれているので、設定する他にはありません。
sk-ant-...アスレチックsk-or-...オープンロイターsk-...オープンAIAIza...Googleのジェミニvck_...Vercel AIゲートウェイgsk_...グロークxai-...xAI
プロバイダーが1つを提供する支出制限でキーを作成します。 OpenRouterはクレジットをキーに消費することができます。また、OpenAIはプロジェクトごとにの使用制限があります。キーはブラウザに到達しませんが、チャットはURLを持っている誰にも開かれますので、キャップはコストをバインドしています。
セットセット CHAT_MODEL 別のモデルを選ぶため。ミストラルまたはDeepSeekでは、キーが再現可能な形状を持たないため、追加 AI_PROVIDER=mistral または AI_PROVIDER=deepseek. あなたのラップトップのOllamaからのLiteLLMの生産のあらゆるOpenAI互換サーバー、仕事との AI_BASE_URL そして、 CHAT_MODEL. すべてのプロバイダの通常の変数()OPENAI_API_KEY, ANTHROPIC_API_KEYなど) 作品も。
ローカルで実行する
デプロイされたリポジトリ、またはスターター自身をクローンし、それをキーにします。
npm installcp .env.example .env.local # put your key in AI_API_KEYnpm run dev含まれるもの
無料のコンポーネントのみ、ソースとしてインストール:チームとユーザーメニュー、コンポーザーとその読み込み処理、思考インジケータ、リネーム、未読、エクスポート、メッセージアクション、およびそれらが依存するすべてのベースコンポーネントを持つチャット履歴レール。 デプロイされたアプリは、同じ無料のコンポーネントから構築された2つの無料チャートとサインインおよびサインアップ画面を備えたダッシュボードを運び、サイドバーは存在するページへのリンクのみです。 プラス app/api/chat/route.ts、ランタイム、およびBoardUI のコーディングエージェントの設計規則 AGENTS.mdなので、次の画面ではエージェントが同じ言語を話せるようにします。 必要に応じて、プロテンプレートは同じプロジェクトにインストールします。