EN English | 🇯🇵 日本語
For decades, "Hello World" has been a developer's first interaction with a machine. In the AI era, we redefine it as the machine facilitating a human's first interaction with another human.
Networking events and hackathons are full of brilliant people who hesitate to say "hello" because of social friction. Nexus Connect is a Brand New "Hello World" for human connection—an immersive, real-time platform that uses AI to eliminate awkwardness, instantly visualize relationships, and hand you the perfect conversation starter. It transforms a room of strangers into a living, interconnected network.
Why this matters now: Post-pandemic, we crave real-world connections but often lack the conversational bridge to initiate them. We built Nexus Connect to solve the "standing awkwardly near the snacks" problem. By offloading the cognitive load of finding common ground to Vertex AI, participants can bypass small talk and jump straight into meaningful, high-value conversations. It's a social catalyst designed for scale.
- Dual-View Architecture: Separates the Event Hall View (a high-performance D3.js spatial network visualized on a large monitor) from the Participant View (a lightweight, Framer Motion-driven mobile UI).
- Context-Aware Ice Breaking: Not just matching tags. Gemini AI dynamically interrogates users based on their mood and generates exactly 3 bespoke conversation topics for every matched pair.
- Real-Time Visual Feedback: The moment a user completes onboarding, their node physically "drops" into the global D3.js network graph on the main screen, instantly tethering to their best matches.
Nexus Connect is a real-time event visualization and AI matchmaking platform.
- Live Network Graph: D3.js powered visualization handling real-time node forces.
- Dynamic AI Onboarding: Vertex AI poses personalized questions to users upon joining.
- Smart Matchmaking: Connects attendees based on multidimensional analysis.
- AI Name Cards: Generates "Nano-Banana" customized animal avatars for a playful, memorable digital identity.
- Host Setup (Input): The presenter opens the Event Hall screen (Desktop). A glowing dark-mode D3.js canvas appears with a QR code for the session.
- Participant Onboarding (Input): A user scans the QR code on their phone, opens the Web App (Mobile), inputs
#username, and selects aMood. - AI Interrogation (System): The backend (Cloud Run) triggers Vertex AI, instantly generating rapid-fire setup questions based on the user's initial input. The user submits answers.
- The Magic Moment (Output):
- On the Big Screen: A new node bursts into the D3.js graph, snapping connecting lines to 2-3 other highly compatible attendees in the room via Firestore real-time listeners.
- On the Phone: A beautifully animated Digital Name Card drops down, revealing the matched partner's location, a bespoke Nano-Banana animal avatar, and 3 Gemini-generated conversation topics.
[ Mobile UI (Next.js/React) ] --- (Firestore Real-time Sync) --- [ Event Hall UI (D3.js/React) ]
\ /
(State: "waiting_for_ai") (State: "ready")
\ /
\------ [ Cloud Run (Worker) ] ------------/
|
(Vertex AI)
- Frontend: Next.js (App Router), React, TailwindCSS, Framer Motion. D3.js isolates heavy DOM manipulations to prevent React conflicts.
- Backend / DB: Firebase Firestore handles state machine transitions. Cloud Run processes AI payloads asynchronously.
IceBreaker/
├── docs/ # Architecture plans, specs, and walkthroughs
├── src/
│ ├── app/ # Next.js App Router endpoints
│ ├── components/
│ │ ├── hall/ # D3.js Event Hall visualization (Desktop)
│ │ ├── mobile/ # Framer Motion-driven participant UI (Mobile)
│ │ ├── motion/ # Shared Framer Motion wrappers
│ │ └── ui/ # Reusable design primitives (Tailwind)
│ ├── context/ # React Context for global state management
│ ├── hooks/ # Custom hooks (Firestore listeners, Vertex AI)
│ └── lib/ # Matching logic, D3 plugins, and i18n
└── package.json # Project metadata & dependencies
We integrated Google tech because of strictly enforced architectural constraints, not just for API calls.
- Vertex AI (3.0-flash-preview): Essential for extracting structural data from unstructured user answers. We don't just ask for text; we demand strict JSON schema compliance to parse and route the 3 specific conversation topics back to the frontend without breaking the app.
- Firebase Firestore: We rely heavily on sub-collections and real-time listeners. Our 5-stage state machine (
generating_questions→answering→waiting_for_ai→ready) is entirely Firestore-driven, allowing the React UI to be completely stateless and purely reactive. - Google Cloud Run: Using serverless containers ensures that computationally heavy AI generations do not block the real-time Event Hall view. This enables horizontal scaling if 500 people scan the QR code at the exact same moment.
- Load Handling: By decoupling UI state from backend processing using Firestore as an event bus, the system smoothly handles simultaneous spikes (e.g., keynote finishes, everyone joins at once).
- Error Boundaries: If Gemini times out or Nano-Banana fails, the state machine reverts to an
errorstatus, safely triggering a Framer Motion fallback UI without crashing the global D3 graph.
- Clone the repository:
git clone https://github.com/kannch8765/IceBreaker.git - Install dependencies:
npm install - Set up
.env.localwith Firebase config and Google Cloud credentials. - Run locally:
npm run dev - Visit
http://localhost:3000/hallfor the host view, and scan the QR with your phone.
The hardest challenge was React vs. D3.js DOM governance. D3 expects to mutate the DOM, while React expects pure state mapping. We built a custom bridging hook that allows Firestore streams to update specific D3 simulation nodes (alpha forces) seamlessly without triggering full React re-renders. Visually, nodes smoothly glide into place instead of snapping abruptly when a new user finishes their AI generation.
Instead of uploading a selfie or picking a generic avatar, we use the obscure Nano-Banana API triggered by the user's Vertex AI output. This assigns every user a highly stylized, quirky, and personalized "Animal Persona" (e.g., "A cybernetic neon sloth wearing sunglasses"). It completely bypasses privacy concerns while guaranteeing that the result is an instant conversation piece.
Impact: Eliminates social friction at professional events. Future: Integrating LinkedIn API to allow the D3 graph to pull in professional histories, mapping not just "who is here," but "who you need to meet to raise your Series A." Nexus Connect can easily be licensed as a B2B SaaS for event organizers globally.
- Lead Engineer & Creative Technologist: [Your Name/Handle]
- Thanks to the open-source communities behind D3.js and Framer Motion.
- Powered by Google Cloud & Vertex AI.
EN English | 🇯🇵 日本語
何十年もの間、「Hello World」は開発者が機械と交わす最初の言葉でした。AI時代において、私たちはこれを**「機械の力で促進される、人間同士の最初の挨拶」**として再定義します。
ハッカソンやカンファレンスには優秀な人々が集まりますが、心理的ハードルにより「Hello」と言えないことが多々あります。Nexusは、人間関係構築のための全く新しい「Hello World」です。AIを用いて気まずさを排除し、リアルタイムで繋がりを可視化し、完璧な会話のきっかけを提供する没入型プラットフォームです。見知らぬ人々の集まりを、生き生きとしたネットワークへと変貌させます。
なぜ今、これが必要なのか： 私たちはリアルな繋がりを求めつつも、会話のきっかけを掴めずにいます。Nexusは、「会場の隅で気まずく立ち尽くす」という課題を解決するために生まれました。共通点を探すという認知的負荷をVertex AIに任せることで、参加者は表面的な会話を飛ばし、すぐに価値のある深い対話に入ることができます。スケールを前提に設計された、ソーシャルカタリスト（繋がりを加速する触媒）です。
- デュアルビュー・アーキテクチャ：大型モニターに映し出される高性能なD3.js空間ネットワーク（Event Hall View）と、Framer Motion駆動の軽量なモバイルUI（Participant View）を分離。
- コンテキスト連動型アイスブレイク：単なるタグ付けマッチングではありません。Gemini AIがユーザーの気分に基づいて動的に質問を生成し、マッチしたペアごとに専用の話題を正確に3つ提供します。
- リアルタイムな視覚的フィードバック：参加が完了した瞬間、メイン画面のD3.jsネットワークグラフに自分のノードが「落下」し、最適な相手と瞬時に線で結ばれる圧倒的な体験。
Nexusは、イベントのリアルタイム可視化とAIマッチングを行うプラットフォームです。
- ライブネットワークグラフ：D3.jsによるリアルタイムな物理演算を用いたノード可視化。
- 動的AIオンボーディング：Vertex AIが参加時にパーソナライズされた質問を投げかけます。
- スマートマッチング：多次元的な分析により、最適な参加者同士を繋ぎます。
- AIネームカード：「Nano-Banana」を用いてパーソナライズされた動物アバターを生成し、遊び心のある印象的なデジタルアイデンティティを提供します。
- ホストのセットアップ（入力）：プレゼンターがEvent Hall画面（PC）を開きます。ダークモードで光るD3.jsキャンバスと参加用QRコードが表示されます。
- 参加者オンボーディング（入力）：ユーザーがスマホでQRコードを読み取り、Webアプリを開いて「名前」と「今の気分」を入力します。
- AIインタビュアー（システム）：バックエンド（Cloud Run）がVertex AIを呼び出し、初期入力に基づく質問を即座に生成。ユーザーがそれに回答します。
- マジック・モーメント（出力）：
- 巨大スクリーン上：D3.jsグラフに新しいノードが弾け飛び、Firestoreのリアルタイム同期により、会場にいる相性の良い2～3人の参加者と瞬時に線で結ばれます。
- スマホ上：美しいアニメーションと共にデジタルネームカードが表示され、マッチした相手、Nano-Banana生成の動物アバター、そしてGeminiが生成した3つの会話のきっかけが提示されます。
[ スマホUI (Next.js/React) ] --- (Firestore リアルタイム同期) --- [ 会場UI (D3.js/React) ]
\ /
(状態: "waiting_for_ai") (状態: "ready")
\ /
\------ [ Cloud Run (ワーカー) ]------------/
|
(Vertex AI)
- フロントエンド: Next.js (App Router), React, TailwindCSS, Framer Motion。D3.jsはReactとの競合を避けるため、DOM操作を分離してパフォーマンスを確保しています。
- バックエンド / DB: Firebase Firestoreが状態遷移（ステートマシン）を管理し、Cloud Runが重いAI処理を非同期で実行します。
IceBreaker/
├── docs/ # アーキテクチャ設計、仕様書、作業ログ
├── src/
│ ├── app/ # Next.js App Router エンドポイント
│ ├── components/
│ │ ├── hall/ # D3.js Event Hall ネットワーク可視化（PC用）
│ │ ├── mobile/ # Framer Motion駆動の参加者UI（スマホ用）
│ │ ├── motion/ # 共通アニメーションラッパー
│ │ └── ui/ # 汎用デザインコンポーネント（Tailwind）
│ ├── context/ # 状態管理（React Context）
│ ├── hooks/ # カスタムフック（Firestore同期、Vertex AI連携）
│ └── lib/ # マッチングロジック、D3プラグイン、多言語対応
└── package.json # 依存関係とプロジェクト設定
単なるAPI呼び出しではなく、アーキテクチャ上の必然性からGoogleの技術を深く統合しています。
- Vertex AI (3.0-flash-preview)：ユーザーの非定型な回答から構造化データを抽出するために不可欠です。単なるテキストではなく、厳密なJSONスキーマでの出力を要求し、アプリをクラッシュさせることなく3つの固有の話題をフロントエンドに確実に戻します。
- Firebase Firestore：サブコレクションとリアルタイムリスナーを極限まで活用。5段階のステートマシン（
generating_questions→answering→waiting_for_ai→ready）は完全にFirestore駆動であり、React UIを完全にステートレスかつリアクティブに保ちます。 - Google Cloud Run：サーバーレスコンテナを使用することで、重いAI生成処理がリアルタイムなEvent Hallビューをブロックしないようにしています。500人が同時にQRコードをスキャンしても、水平スケールで完璧に処理します。
- 負荷耐久性：Firestoreをイベントバスとして使用し、UIの状態管理とバックエンド処理を分離。基調講演の終了直後など、全員が同時にアクセスするスパイクにもスムーズに対応します。
- エラーハンドリング：GeminiのタイムアウトやAPI障害が発生した場合、ステートマシンは
error状態に移行。メインのD3グラフをクラッシュさせることなく、安全にFramer MotionのフォールバックUIを表示します。
- リポジトリのクローン:
git clone https://github.com/kannch8765/IceBreaker.git - 依存関係のインストール:
npm install .env.localに Firebase の設定と Google Cloud の認証情報を設定。- ローカルで実行:
npm run dev http://localhost:3000/hallにアクセスしてホスト画面を開き、スマホでQRコードを読み取ります。
最大の技術的課題は、ReactとD3.jsにおけるDOM管理の衝突でした。D3は直接DOMを操作しますが、Reactは状態の純粋なマッピングを求めます。私たちは専用のブリッジフックを構築し、Reactの全体再レンダリングを引き起こすことなく、Firestoreのストリームが特定のD3シミュレーションノードに動的かつ滑らかに力を加えることを可能にしました。これにより、AI処理が完了したノードが突然出現するのではなく、美しく滑り込むような視覚体験が実現しています。
自撮り写真をアップロードしたり、一般的なアバターを選ぶのではなく、Vertex AIの出力からマニアックなNano-Banana APIを呼び出しています。これにより、全員に超個性的で奇抜な「動物ペルソナ」（例：「サングラスをかけたサイバーパンクなネオン・ナマケモノ」など）が割り当てられます。プライバシーの懸念を完全に排除しつつ、それがそのまま「最初の会話のネタ」になるという強烈な異端性を持ち合わせています。
インパクト：ビジネスイベントにおける心理的摩擦を完全に排除します。 将来性：LinkedIn APIを統合し、「誰がいるか」だけでなく「資金調達のために誰に会うべきか」までD3グラフで可視化可能。Nexusは、世界中のイベント主催者向けのB2B SaaSとして容易にライセンス展開できるポテンシャルを秘めています。
- リードエンジニア ＆ クリエイティブテクノロジスト: [お名前/ハンドルネーム]
- D3.js および Framer Motion のオープンソースコミュニティに感謝します。
- Powered by Google Cloud & Vertex AI.