THE VOI-CHA

https://github.com/pummu-hub/58hack-Tentoumushi.git

―

Next.js

GitHub

TypeScript

PostgreSQL

TailwindCSS

気まずいチャットをAIが全力で救う

Rikuto Makihara

Doromaito

MagicLor2205

e7g0b5rant

推しアイデア

「AI全力弁明」というシステムが私たちの推しです！ 「言い方間違えた...」と思ったらすぐにAIが謝罪の文章を送ってくれます！ すぐ誤解解ける！！

作った背景

僕たちは日常的に、LINEやDiscordなどのテキストチャットアプリを使っています。 しかし、テキストだけのやり取りでは感情や本来の意図が伝わりにくく、ちょっとした言葉の受け取り方の違いから、友人との仲が悪くなってしまうことがあります。 そこで僕たちは、チャット上で生まれる

推し技術

Claudeのストリーミング全力弁明 冷たい一言をAIが熱烈な謝罪文へ、SSEで生成しながら逐次表示→VOICEVOXが感情音声 で読み上げ。APIキー無しでも事故らないフォールバック設計込み！

プロジェクト詳細

image

背景

私たちは日常的に、LINEなどのチャットアプリを使ってコミュニケーションを取っています。 チャットアプリは気軽にメッセージを送ることができる一方で、文字だけでやり取りをする場面が多くあります。

問題点

チャットでは、テキストだけでは感情や本来の意図を伝えきれないことがあります。 そのため、送信者は悪い意味で送ったつもりがなくても、受信者には冷たく感じられたり、ネガティブな意味で受け取られたりする可能性があります。 例えば、送信者は「来てほしい」という気持ちで「今日来るの？」と送ったとしても、受信者は「来てほしくないのかな」と受け取ってしまうことがあります。 対面であれば、相手の反応を見てすぐに謝ったり、表情や声のトーンで誤解を解いたりできます。 しかし、チャットアプリでは文章を打つ時間や相手が読むまでの時間があるため、誤解を解くまでにタイムラグが発生してしまいます。

目的

このプロダクトの目的は、チャット上で起きる感情や意図のすれ違いを減らし、チャットをしている人同士の関係を良い状態に保つことです。 主な対象者は、学生同士でチャットをする人たちです。 チャットアプリ上の誤解が原因で仲が悪くなることを防ぎ、気軽に楽しくコミュニケーションできるようにすることを目指しています。

全力で弁明！！

「送る言葉間違えた...」と思ったらすぐに「AI全力弁明」ポチッ！ するとAIが全力で弁明を行ってくれます。メッセージを受け取った人は「めちゃ謝ってくれるやん。ゆるすやで」と仲が悪くなることはないでしょう！！ 対面ではすぐに「今のはちゃうくて...」と弁明できるが、テキストチャット上ではテキストを入力するのに時間がかかってしまう。そこでAIに書かせることですぐに弁明文を相手に送ることができます！

そして和解へ

image

コードを自動でレビュー

プルリク上で「@codex review」とコメントをすると自動でcodexがコードレビューを行ってくれます！ 今回はOpenAI APIキーやGitHub Actions上のCodex実行は使用していないため、APIトークンによる従量課金は発生しません。契約中のCodex利用枠の範囲で利用し、Auto top-upもOFFにしているため、利用上限を超えた自動追加課金もないです！ （※最終的なマージ判断はメンバーで行いました）

image

技術スタック

アーキテクチャ全体像

[ブラウザ/Next.js] ──REST──> [NestJS API] ──> PostgreSQL │ │ │ ├─SSEストリーミング─> Claude API │ └──HTTP──> VOICEVOX Engine └─BroadcastChannel─(タブ間リアルタイム同期)

フロントエンド

  • Next.js 15(App Router)/ React 19 / TypeScript 5.7 — モダンな構成。クライアントコンポーネント主体のSPA的UI
  • Tailwind CSS v4 — 設定ファイルレスの新しいCSSファースト構成(@import "tailwindcss" + @theme で独自トークン定義)
  • canvas-confetti — 和解成立時のド派手エフェクト
  • Web標準API活用 — BroadcastChannel(タブ間同期)、Notification(デスクトップ通知)、fetch の ReadableStream(SSE逐次受信)

バックエンド

  • NestJS 10 / TypeScript — モジュール構成(messages / voicevox / defense)で責務分離
  • Prisma 5 + PostgreSQL — チャット履歴の永続化。型安全なORM
  • class-validator / class-transformer — DTOベースの入力バリデーション

AI(全力弁明)

  • Anthropic Claude(@anthropic-ai/sdk)/ モデル: Claude Opus 4.8
  • エンドツーエンドのストリーミング:Claude messages.stream → NestJS が SSE で配信 → フロントが逐次描画
  • 堅牢なフォールバック設計:APIキー無し/失敗時はテンプレートに退避。生成途中で失敗しても表示済みテキストを壊さない

音声(VOICEVOX)

  • VOICEVOX Engine(外部、localhost:50021)に audio_query → synthesis で合成
  • 感情パラメータ制御 — 5感情ごとに話速/音高/抑揚/音量を調整
  • 「声は聞く人の設定」アーキテクチャ — メッセージに音声を焼き付けず、受信側で聞き手自身の声で都度合成

同期・リアルタイム

  • BroadcastChannel によるタブ間のメッセージ/弁明/リアクション同期(送信は受信側だけが読み上げるガード付き)

開発・運用

  • GitHub Actions(CI) + Codex による自動PRレビュー(日本語レビュー設定)
  • モノレポ構成(frontend/ + backend/)

Rikuto Makihara

@d2f9804860b7d6bc