Word Association Graph

ルートワードを起点に、AI が連想語を生成して単語ネットワークを広げていく知識グラフアプリ。連想の展開は AWS Bedrock 上の Claude 3 Haiku に任せ、結果は Cytoscape.js でインタラクティブに可視化する。登録なしで触れる匿名ログインで、他人が作った公開グラフをコピー・いいねして育てることもできる。

Overview

• 匿名ログイン — 登録不要。ブラウザを開けばすぐにグラフを作り始められる
• AI 連想語生成 — ノードをクリックすると Bedrock が周辺概念を返す
• グラフ可視化 — Cytoscape.js でパン・ズーム・ノード展開ができる探索 UI
• 公開/非公開 — グラフ単位で共有設定を切り替え
• いいね / コピー — 公開グラフを自分のコレクションに取り込んで枝を伸ばせる
• 検索・ソート — 公開グラフを新着順・人気順で探せる

Architecture

graph LR
  U["User (Browser)"] --> FE["Vue 3 + Vite<br/>Pinia / Cytoscape.js"]
  FE -->|"REST + JWT"| API["NestJS API<br/>(Swagger)"]
  API -->|"Prisma"| DB[("PostgreSQL 18")]
  API -->|"LangChain"| BR["AWS Bedrock<br/>Claude 3 Haiku"]
  subgraph Infra["Docker Compose / Ansible"]
    FE
    API
    DB
  end

• フロント: Vue 3 + TypeScript + Vite。状態は Pinia、グラフ描画は Cytoscape.js に委譲
• バックエンド: NestJS + Prisma、JWT 認証、Swagger で API ドキュメント同梱
• AI: AWS Bedrock の Claude 3 Haiku を LangChain から呼ぶ。クールダウンで呼び過ぎを防止
• インフラ: Docker Compose でローカル一発起動。Ansible でサーバーへの配布も IaC 化

AI Pipeline

ノード展開時の流れ。

sequenceDiagram
  participant U as User
  participant FE as Vue SPA
  participant API as NestJS
  participant DB as Postgres
  participant BR as Bedrock (Haiku)

  U->>FE: ノードをクリック
  FE->>API: POST /api/words/:id/associations
  API->>DB: 既存連想を確認
  alt キャッシュあり
    DB-->>API: associations
  else 新規
    API->>API: クールダウンチェック
    API->>BR: LangChain prompt
    BR-->>API: 連想語 (N 件)
    API->>DB: 連想語を保存
  end
  API-->>FE: associations
  FE->>FE: Cytoscape に node / edge を追加

• 同じ単語は DB から返すので API と Bedrock を叩きっぱなしにならない
• BACKEND_BEDROCK_COOLDOWN_MS で連続呼び出しを間引く (デフォルト 1000ms)
• LangChain 側で出力形式を揃えて、フロントはそのまま Cytoscape に流し込むだけにした

Tech Decisions

• Cytoscape.js — グラフ系ライブラリの中で一番素直に「ノード追加 → 再レイアウト」が書ける。D3 で自作より先に完成する
• NestJS + Prisma — 個人開発でもモジュール境界が勝手に綺麗になる。Prisma のスキーマを一次ソースにできるのも大きい
• AWS Bedrock (Claude 3 Haiku) — 連想タスクには十分速くて安い。AWS アカウント内で完結するのが運用上楽
• LangChain — プロンプトテンプレートと出力パーサを自前で書かない範囲で使用
• 匿名ログイン — 「登録してから触る」で離脱する前提で、JWT を発行する匿名ユーザーを最初から作る設計にした
• Ansible — Docker Compose を EC2 に流し込むだけなら shell でもいいが、再現性のため playbook に寄せた

Environment

動かすのに必要な主要な環境変数:

Links

• GitHub: neletolus/node-words-association