エヴァの「MAGIシステム」を模した、よさこいAI合議システム「MAGI-PITWU」を開発の流れ

「（前略）そうだ、MAGIを作ろう！」

🌐 MAGI-PITWU: https://magi.pitwu.com/

「もしもMAGIの3つの人格が、すべて高知の尖った関係者だったら？」というエイプリルフール企画でした！お遊びかつ裏側はゴリゴリの最新モダンフロントエンド環境で構築しています。今回はこの無駄に（？）ガチな技術スタックと実装の裏側を解説します！

🛠️ コア技術スタック

• Framework: Next.js (App Router) + TypeScript
• AI Engine: Google Gemini API (@google/generative-ai)
• Styling: 100% Vanilla CSS（Tailwind不使用）
• Infra: Vercel (Serverless Functions)

図にするとこんな感じです。

1️⃣ AIの完全非同期・独立並行処理（Promise.all）

本家MAGIの「3つのスーパーコンピュータによる多数決制」を完全再現するために、Gemini APIに対して3つの異なるプロンプト（システム指示）を同時に並列リクエストしています。

• MELCHIOR-1：踊り子・情熱の人格
• BALTHASAR-2：酒豪・宴の人格
• CASPER-3：カツオ・土佐の誇りの人格

APIのレスポンス完了時間はバラバラなため、UI側でステータス管理を行い、すべての回答が出揃った瞬間にUI上で「可決（APPROVE）」か「否決（DENY）」の最終ジャッジを下す仕組みです。

2️⃣ Vanilla CSSと「cqi」による完全レスポンシブの鳴子型UI

画面中央の特徴的なMAGIパネルは、画像ではなく clip-path: polygon(...) で描画した幾何学図形です。今回は通常の六角形ではなく、上下の長さを調整して「鳴子」の形を模しています。

スマホの縦長画面でもこの幾何学レイアウトを1ミリも崩さないため、コンテナクエリ（cqi 単位）をフル活用しました。デバイス幅に関わらず、文字サイズからパネルの余白まで比率を保ったままシームレスに縮小される変態的（？）なレスポンシブ設計を実現しています。

3️⃣ 温度（Temperature）操作と隠し「完全暴走モード」

設定（SYS_CONFIG）から、AIの生成温度（Temperature）を調整可能にしました。生成AIにおける「Temperature」は回答のランダム性を指しますが、今回はこれを「AIの感情の昂り・暴走レベル」として再定義しています。

スライダーを極限（2.0）に設定すると、UIが赤い警戒色（CODE 777）に染まり、MAGI達の制限リミッターが強制解除。理性を失い、全編「超・熱い土佐弁」で激情的な回答を叩きつけてくる裏ギミックを仕込んでいます笑

4️⃣ ターミナル風演出とXシェア連携

ただテキストを表示するだけでなく、画面全体のブラウン管（CRT）スキャンライン効果や、処理中のターミナル風プログレスバー PROCESSING: [██████░░░] をCSS AnimationsとReactのuseEffectタイマーで実装し、サイバーパンクな没入感を高めました。

結果が出た後は、専用のOGPルーティングを通じて、自分だけの裁定結果と文字数制限ギリギリのサマリーを瞬時にXの意図（intent）URLへ投げるシェア機能も完備しています。

最新のNext.jsとGemini APIを組み合わせると、こうしたリアルタイムな対話型エージェントシステムが爆速でデプロイできて最高で。「よさこいにまつわる疑問」や「今日のお昼ご飯の裁定」まで、MAGI-PITWUに何でも相談してみてください！

ただし、今日の12時を過ぎると・・・？

👉 MAGI-PITWU を試してみる

元のX投稿（暴走モードのデモ動画あり）