https://neobrutalism.com/ja/blocks/ai/ai-chat-assistant-interface
AIチャットアシスタントUI
人工知能 · Pro ソース
1ファイルで完結するチャット画面です。クイックコントロール付きのタイトルヘッダーバー、自身のスクロール位置を保持するユーザーとアシスタントのスレッド、返信待ちの間表示される3ドットのタイピングインジケーター、Enterで送信しShift+Enterで改行するコンポーザーを備えています。返信はタイムアウトによるスタブなので、バックエンドなしで動作しつつ、実際の連携に必要な状態をすべて示します。
人工知能
AIチャットアシスタントUIライブプレビューを開く
- Hero・料金・認証
- すべてのブレークポイントをプレビューする
- ソースをコピーする
- MCP インストール準備完了
- Radix · Base UI · React Aria
- 158 既製のブロック
- 出荷されるページセクション
- ダッシュボードとマーケティング
- Pro コードのロックを解除する
- ドロップインレイアウト
大好き。 開発者にもデザイナーにも、
クリエイターにも。
たまたま UI キットを見つけて即ゲット。新しくて活発にメンテされ、どんどん改善されてるのが最高。すごい仕事だ！🤘
Ziv Reich, ソフトウェア開発者 neobrutalism.com、ほんとよくできてるって言いたかっただけ。すごく気に入ってる。デザインが苦手だから、これは本当に助かった。自分の個人サイトで使わせてもらったよ。
Paul Bratslavsky, Coding With Paul 運営 ようやく Neobrutalism.com で個人サイトを作り直した。楽しいライブラリで、始めやすい！
Cameron Blackwood, コンテンツクリエイター Neobrutalism.com はお気に入りのレトロ系 UI コンポーネントライブラリのひとつ。ちゃんと ship できるコンポーネント。
Zhengyang Hou, インディーハッカー Web で一番好きな UI ライブラリのひとつ。いい仕事してる。これからもっともっと伸びていくといいな。
Taseen Tanvir, 創業者 & デザイナー Neobrutalism.com Pro を試したけど、他とかぶらない UI キットで新鮮。ネオブルータリズムのブロック 🔥 で変なレイアウトの試作がずっと速くなった。
Nitesh Padghan, ゴーストライター バランスと流れが完璧な、美しいランディングページデザイン。カラーパレットとアニメーションが組み合わさり、卓越したUXを生み出しています。
Alan Obeng-Peprah, Senior Designer @ NativeXAI 納品されたデザインに本当に感心しました。最終成果物は想像していたものとぴったり一致していました。
Desmond, 共同創業者 @ VectorlabsVentures 代理店オーナーとして、クライアントのランディングレイアウトを磨き込むのに通常は数週間かかります。Neobrutalism.comならテンプレートを差し込み、コピーを整えればすぐに出荷できます。
Duke Opoku Amankwah, 創業者 @ Midas テンプレートは見た目が優れているだけでなく、構造も非常によくできています。開発期間を何週間も短縮できました。
Abiola Braimah, 開発者 @ Studio IX 品質が突出していて細部へのこだわりもすごい。レスポンシブデザインはすべてのデバイスで完璧に動作します。
Acromond X., 共同創業者 @ VectorlabsVentures これらのテンプレートをワークフローに組み込んだことで、開発サイクルが大幅に短縮されました。素晴らしい仕事です。
Raquib S., バックエンド開発者 これらのテンプレートは私たちの定番リソースになりました。コードはクリーンでドキュメントも充実しており、カスタマイズも容易です。
Hallic M., 開発者 @ AtlasLabs Neobrutalism.comのテンプレートは美観と機能性の完璧なバランスを取っています。私たちのプロジェクトにとって本当のゲームチェンジャーです。
Ibrahim S., Frontend Lead @ ScaleUp サポートが優れ、テンプレートの品質もプレミアム。これらのテンプレートのROIは驚異的です。
Kevin K., CEO @ WebCraft Neobrutalism.comのテンプレートは、新規クライアント案件への取り組み方を完全に変えました。コード品質は傑出しており、デザインもまさにワールドクラスです。
Danny G., DevStack創業者 多くのテンプレートライブラリを使ってきましたが、Neobrutalism.comはパフォーマンス最適化とクリーンなコードアーキテクチャへのこだわりで際立っています。
Ian D., WavelengthのCTO これらのテンプレートのアニメーションとマイクロインタラクションは本当に素晴らしい。デザインチームにとって最高の投資です。
Ben S., PixelPerfectのリードデザイナー 技術職ではない創業者として、Neobrutalism.comのテンプレートのおかげでデザイン品質を犠牲にせずMVPを記録的な速さでローンチできました。投資家も驚いていました。
Matthew I., スタートアップ創業者 これらのコンポーネントがどれだけモジュール化され、ドキュメント化されているかを高く評価しています。異なるテンプレートの部品をスムーズに組み合わせられました。
Garrett P., TechFusionのフロントエンドリード Neobrutalism.comテンプレートのROIは信じられないほどです。開発時間を大幅に削減しつつ、より高品質なサイトをクライアントに届けています。
Xavier C., 代理店オーナー
よくある
質問
AIチャットアシスタントUI ブロックの構成方法、変更できる内容、他のレイアウトの代わりに使用する場合について。
呼び出しません。handleSendが訪問者のメッセージを追加し、isReplyingをセットし、1.5秒後にsetTimeoutが定型文を1つ返します。ここが差し替えるべき接続点です。タイムアウトを自分のfetchやストリーミング呼び出しに置き換え、isReplyingフラグはそのまま残してください。タイピングインジケーター、無効化される送信ボタン、スクロール挙動はすべてこのフラグを基準にしています。
各メッセージはid、userまたはassistantのsender、content、そして表示用の時刻とtime要素向けの機械可読なdateTimeを持ちます。時刻はレンダー時ではなくメッセージ作成時にフォーマットされます。Dateをレンダー中にフォーマットすると、サーバーとブラウザでタイムゾーンの解釈が食い違い、読み込み時にReactがハイドレーションの不一致を報告してしまうためです。
パネルはスマートフォンでh-[36rem]、sm以上でh-[44rem]です。ヘッダーとコンポーザーの間のスレッド部分だけがスクロールします。ヘッダーとコンポーザーはどちらも固定高さのflex子要素なので、パネルの高さを変えても表示されるスレッドの量が変わるだけです。ページ全体を埋めたい場合は、セクションに収めるのではなくh-[80vh]のようなビューポート単位を使ってください。
できます。composerActions配列内の3項目で、それぞれラベルとアイコンを持つため、項目を削除すればボタンも消えます。44px角の正方形なのは、それが快適に押せる最小のタッチターゲットだからです。アイコン単体にはアクセシブルネームがないため、各ボタンはaria-labelを持ち、アイコンはaria-hiddenでマークされています。あえてoutlineボタンにしているのは、送信ボタンだけがprimaryとして読めるようにするためです。
以前のバージョンはbg-chart-1、bg-chart-5、bg-chart-2で色付けし、その上にアイコンを乗せていました。チャートトークンはライトとダークで値が異なるため、それらのアイコンは片方のテーマでは読めても、もう片方ではほぼ見えなくなっていました。現在はすべての色付き面がbg-primaryとtext-primary-foreground、bg-cardとtext-card-foregroundのようにトークンのペアを使っているため、パレットが変わってもコントラストは一定に保たれます。
スレッドはaria-live polite付きのrole logなので、スクリーンリーダーは会話を中断せずに新着を告知します。タイピングインジケーターもアニメーションする3つのドットに頼らず、視覚的に隠されたAssistant is typingという文言を持ちます。スクロールはscrollIntoViewではなく、スレッド自体のscrollTopを設定する方式で、しかも最初の送信後にのみ行われます。scrollIntoViewだと読み込み時にページ全体がこのブロックまで引きずられてしまうためです。