開発事例 / Webアプリ

VOICE-Chat

音声×AI×3Dを統合したマルチモーダル会話プラットフォーム

公開中

音声入力・AI応答・3D表現を統合したマルチモーダル会話システム。複数のAIモデル（Claude/Gemini/OpenAI/Ollama）を切り替え可能で、用途に応じた最適なAIを選択できる。Three.jsによる3Dビジュアライゼーション、スプレッドシートエンジン、画像生成機能を搭載し、単なるチャットを超えた創造的なAI体験を提供。

この作品の要点

困っていたこと	既存のAIチャットは単一モデル・テキストのみで表現力に限界がある。
やったこと	複数AIモデルをワンクリックで切り替え可能な統合インターフェース。
起きたこと	AIとの対話を音声・視覚・データ処理まで拡張。

どこでつまずいたか
できあがったもの
どう作ったか
数字で見る
相談する

どこでつまずいたか

01既存のAIチャットは単一モデル・テキストのみで表現力に限界がある

02用途によって最適なAIモデルが異なるが切り替えが面倒

どう解いたか

01複数AIモデルをワンクリックで切り替え可能な統合インターフェース

02音声・テキスト・3D・画像のマルチモーダル入出力に対応

03用途に応じたモード切り替えで最適な体験を提供

マンガでわかる

できあがったもの

できあがった画面

結果

01	AIとの対話を音声・視覚・データ処理まで拡張
02	複数AIモデルの特性を活かした柔軟な活用が可能に
03	創造的なAI活用の新しい可能性を開拓

この作品でできること

4種類のAIモデル（Claude/Gemini/OpenAI/Ollama）を自在に切り替え
音声入力→AI処理→音声出力のシームレスな会話体験
Three.jsによる3Dオブジェクト生成・操作機能
スプレッドシートエンジンでデータ処理も可能
ComfyUI連携による画像生成機能
クラシック/モダンの2種類のUIモード

どう作ったか

担当と道具

担当	企画・フロントエンド開発・AI連携・3D実装
使った技術	Vue 3・TypeScript・Express・Three.js・Claude API・Gemini API・OpenAI API・Ollama・WebSocket