アーキテクチャ(Vibeコーダーガイド)

仕組みを理解したい開発者のための、RAGパイプラインの詳細解説です。

RAGパイプラインの概要

LaunchChatは検索拡張生成(RAG)を使用して、お客様のドキュメントに基づいて質問に回答します。

1. 取り込み

パース → チャンク → 埋め込み → 保存

2. 検索

クエリ → ベクトル検索 → ランキング

3. 生成

コンテキスト → LLM → 回答 + 引用

取り込みパイプライン

1. パース

コンテンツはさまざまなソースからプレーンテキストにパースされます:

  • Notion: Notion:階層構造を保持したブロック単位のパース
  • DOCX: DOCX:mammoth.jsで抽出
  • Markdown: Markdown:remark/unifiedでパース
  • Website: Webサイト:クロールしてナビゲーション/フッターを除去

2. チャンキング

テキストは最適な検索のためにオーバーラップするチャンクに分割されます:

{
  targetSize: 400,    // tokens per chunk
  overlap: 50,        // token overlap between chunks
  preserveHeadings: true,  // keep heading context
  minChunkSize: 100   // minimum viable chunk
}

各チャンクはコンテキストのために親見出しの階層を保持します。

3. 埋め込み

チャンクは1536次元のベクトルに変換されます:

Model: text-embedding-3-small
Dimensions: 1536
Provider: OpenAI (via OpenRouter)

4. 保存

ベクトルはpgvector拡張機能を使用してPostgreSQLに保存されます:

-- content_chunks table
id: uuid
knowledge_base_id: uuid
page_id: string
page_title: string
content: text
embedding: vector(1536)
parent_heading: string

検索戦略

ハイブリッド検索

2段階の検索プロセスを使用しています:

  1. Vector Search: ベクトル検索:pgvectorの<=>演算子を使用したコサイン類似度
  2. Keyword Fallback: キーワードフォールバック:ベクトル検索結果の類似度が低い場合、キーワードマッチしたチャンクを追加

類似度スコアリング

-- Vector similarity query
SELECT *, 1 - (embedding <=> query_embedding) as similarity
FROM content_chunks
WHERE knowledge_base_id = $1
ORDER BY embedding <=> query_embedding
LIMIT 5

回答生成

信頼度スコアリング

生成前に信頼度スコアを計算します:

confidence = bestSimilarity + (hasMultipleChunks ? 0.1 : 0) + 0.2
// Capped at 1.0

if (confidence < threshold) {
  return refusalMessage;  // Don't hallucinate
}

引用の抽出

LLMは[Source N]形式を使用するよう指示されます。これをパースして元のページにリンクします:

// Extract citations from answer
const citationPattern = /\[Source (\d+)\]/g;
const matches = answer.matchAll(citationPattern);

// Map to original pages
citations = matches.map(m => chunks[m[1] - 1])

ドキュメントのベストプラクティス

AIの検索に最適なドキュメント構造にしましょう:

推奨

  • 明確で説明的な見出しを使用する
  • セクションを1つのトピックに集中させる
  • 例やコードスニペットを含める
  • 用語や略語を定義する
  • 機能変更時にドキュメントを更新する

避けるべきこと

  • 構造のない非常に長いページ
  • ページ間での重複コンテンツ
  • 古い情報や矛盾する情報
  • altテキストのない画像の多用
  • ナビゲーションのみのページ

AIプロンプトテンプレート

このプロンプトをCursor、Windsurf、またはClaude Codeにコピーして、LaunchChatの統合に役立ててください:

I'm integrating LaunchChat, an AI-powered support widget.

Widget Setup:
1. Add to HTML: <script>window.LaunchChatConfig = {widgetId: "ID"}</script>
   <script src="https://domain.com/widget.js" async></script>

2. For React/Next.js, create a client component that:
   - Sets window.LaunchChatConfig
   - Dynamically loads widget.js
   - Cleans up on unmount

API Reference:
- window.LaunchChatWidget.open() - Open chat
- window.LaunchChatWidget.close() - Close chat
- window.LaunchChatWidget.on(event, callback) - Listen to events
- Events: 'open', 'close', 'message', 'escalate', 'feedback'

Help me integrate this into my [FRAMEWORK] app.