メインコンテンツまでスキップ

image_generation_plan.ai_ts

IDFile NameProposed Image FilenameRelative Link PathPromptInsertion Point
2docs/firebase_ai_ts_index.mdfirebase_ai_ts_index_three_pillars.png./picture/firebase_ai_ts_index_three_pillars.pngTheme: The three pillars of Firebase AI development.

Labels to Render:
- App AI: "アプリ内AI"
- Server AI: "サーバー側AI"
- Dev AI: "開発支援AI"

Visual Details:
1. Core Concept: Three foundational pillars supporting the 20-chapter structure.
2. Metaphor: Three sleek, modern pillars or columns (App, Server, Dev) holding up a structure labeled "20 Chapters".
3. Action: Stable, supportive structure.
4. Layout: Symmetrical, pillars arranged horizontally.		## 20章アウトライン（各章＝読む→手を動かす→ミニ課題→チェック）📚✨
3docs/firebase_ai_ts_index.mdfirebase_ai_ts_index_ai_logic_concept.png./picture/firebase_ai_ts_index_ai_logic_concept.pngTheme: Direct App-to-AI communication secured by AI Logic.

Labels to Render:
- App: "アプリ"
- Proxy: "AI Logic Proxy"
- Model: "Gemini / Imagen"
- Guard: "App Check / Rate Limit"

Visual Details:
1. Core Concept: Secure direct call from App to AI Model via a proxy layer.
2. Metaphor: A clean pipeline from App to AI, with a shield (Guard) protecting the middle (Proxy).
3. Action: Data flowing through the pipe, bounced back if unauthorized (shield blocks it).
4. Layout: Left-to-right flow (App -> Proxy -> Model).		## A. アプリ内AI（Firebase AI Logic）💬⚡（第2章〜第8章）
4docs/firebase_ai_ts_index.mdfirebase_ai_ts_index_genkit_flow.png./picture/firebase_ai_ts_index_genkit_flow.pngTheme: Server-side AI workflow with branching and evaluation.

Labels to Render:
- Input: "入力"
- Flow: "フロー処理"
- Branch: "分岐 / 判定"
- Output: "出力"

Visual Details:
1. Core Concept: Complex logic handling on the server side.
2. Metaphor: A flowchart or circuit board showing a path splitting (decision) and converging.
3. Action: Data moving through the flow, taking a specific path based on a condition.
4. Layout: Flowchart style, top-down or left-to-right.		## B. サーバー側AI（Genkit）🧰🔥（第9章〜第15章）
5docs/firebase_ai_ts_index.mdfirebase_ai_ts_index_dev_ai_tools.png./picture/firebase_ai_ts_index_dev_ai_tools.pngTheme: Accelerating development with AI tools.

Labels to Render:
- Mission: "Antigravity"
- Terminal: "Gemini CLI"
- Workspace: "Firebase Studio"
- Console: "Console AI"

Visual Details:
1. Core Concept: A suite of tools speeding up the dev process.
2. Metaphor: A futuristic dashboard or workbench with these four tools integrated.
3. Action: Tools actively working (terminal typing, mission control monitoring).
4. Layout: Grid or circular arrangement of tools around a central "Dev Speed" concept.		## C. 開発をAIで速くする（Antigravity / Gemini CLI / Firebase Studio / Console）🚀（第16章〜第20章）
6docs/firebase_ai_ts_index.mdfirebase_ai_ts_index_safety_guards.png./picture/firebase_ai_ts_index_safety_guards.pngTheme: Safety mechanisms protecting the AI implementation.

Labels to Render:
- Secret: "秘密管理"
- Limit: "レート制限"
- Switch: "停止スイッチ"
- Logs: "ログ監視"

Visual Details:
1. Core Concept: Multiple layers of defense for safe operation.
2. Metaphor: A vault or a control panel with safety toggles and shields.
3. Action: A lock being secured, a switch ready to be flipped off.
4. Layout: Focused on the control panel or shield layers.		## 補足：このカテゴリで“自然に身につく”超重要ポイント🌟
7docs/firebase_ai_ts_study_001.mdfirebase_ai_ts_study_001_three_placements.png./picture/firebase_ai_ts_study_001_three_placements.pngTheme: The three locations for AI implementation.

Labels to Render:
- App: "アプリ内 (AI Logic)"
- Server: "サーバー側 (Genkit)"
- Dev: "開発環境 (Dev AI)"

Visual Details:
1. Core Concept: Three distinct environments where AI lives.
2. Metaphor: A map with three territories or islands.
3. Action: Clear boundaries and labels.
4. Layout: Horizontal or triangular arrangement.		## 1) まずは“置き場所”を3つに分けよう🧩
8docs/firebase_ai_ts_study_001.mdfirebase_ai_ts_study_001_app_ai_logic.png./picture/firebase_ai_ts_study_001_app_ai_logic.pngTheme: App-side AI characteristics (Fast but needs defense).

Labels to Render:
- Speed: "即応性 (Fast)"
- Guard: "App Check / Limit"
- Action: "Direct Call"

Visual Details:
1. Core Concept: Direct connection for speed, protected by a shield.
2. Metaphor: A race car (speed) with a safety cage (defense).
3. Action: Fast movement, protected.
4. Layout: Focused on the App -> AI path.		## A. アプリ内AI（クライアント直呼び）📱💬
9docs/firebase_ai_ts_study_001.mdfirebase_ai_ts_study_001_server_genkit.png./picture/firebase_ai_ts_study_001_server_genkit.pngTheme: Server-side AI characteristics (Complex logic).

Labels to Render:
- Logic: "分岐 (Branch)"
- Retry: "再試行 (Retry)"
- Log: "ログ (Log)"

Visual Details:
1. Core Concept: Handling complexity and reliability.
2. Metaphor: A sophisticated processing plant or a conductor managing an orchestra.
3. Action: Routing, checking, looping.
4. Layout: Complex structure, organized.		## B. サーバー側AI（ワークフロー/分岐/再試行/評価）🖥️🧰
10docs/firebase_ai_ts_study_001.mdfirebase_ai_ts_study_001_decision_flowchart.png./picture/firebase_ai_ts_study_001_decision_flowchart.pngTheme: 5 Questions to decide AI placement.

Labels to Render:
- Secret?: "秘密？"
- Abuse?: "乱用？"
- Log?: "ログ？"
- Result: "Server / App"

Visual Details:
1. Core Concept: Decision making process.
2. Metaphor: A path splitting based on questions.
3. Action: Choosing a path.
4. Layout: Vertical flowchart.		## 2) 迷ったらコレ：AI配置を決める「5つの質問」🧠❓
11docs/firebase_ai_ts_study_001.mdfirebase_ai_ts_study_001_example_allocation.png./picture/firebase_ai_ts_study_001_example_allocation.pngTheme: Sorting tasks into the right bucket.

Labels to Render:
- Report: "日報整形"
- NG Check: "NGチェック"
- App Bucket: "AI Logic"
- Server Bucket: "Genkit"

Visual Details:
1. Core Concept: Assigning tasks based on characteristics.
2. Metaphor: Sorting mail or packages into bins.
3. Action: Items falling into correct bins.
4. Layout: Split view.		## 3) 今回の題材に当てはめてみよう🧩✨
12docs/firebase_ai_ts_study_002.mdfirebase_ai_ts_study_002_architecture.png./picture/firebase_ai_ts_study_002_architecture.pngTheme: AI Logic Proxy Architecture.

Labels to Render
- App: "React App"
- SDK: "AI Logic SDK"
- Proxy: "Firebase Proxy"
- Model: "Gemini / Vertex"

Visual Details:
1. Core Concept: Indirect secure access.
2. Metaphor: A messenger (SDK) taking a request to a secure counter (Proxy) before it goes to the vault (Model).
3. Action: Request passing through the stages.
4. Layout: Left to right flow.		## 読む：AI Logic の中身は「アプリの代理人」🕴️📨
13docs/firebase_ai_ts_study_002.mdfirebase_ai_ts_study_002_api_key_warning.png./picture/firebase_ai_ts_study_002_api_key_warning.pngTheme: Security warning about Client-side API Keys.

Labels to Render
- Client Code: "アプリコード"
- API Key: "API Key"
- Forbidden: "禁止 (NO!)"
- Server/Proxy: "OK Location"

Visual Details:
1. Core Concept: Never expose secrets in client code.
2. Metaphor: A leaky bucket (Client) vs a safe (Server).
3. Action: A red "X" over the key in the client area.
4. Layout: Contrast between insecure and secure.		## 読む：いちばん大事な注意「APIキーをアプリに入れない」🚫🔑
14docs/firebase_ai_ts_study_002.mdfirebase_ai_ts_study_002_app_check_vs_auth.png./picture/firebase_ai_ts_study_002_app_check_vs_auth.pngTheme: Distinguishing User Identity vs App Integrity.

Labels to Render
- Auth: "Auth (誰？)"
- App Check: "App Check (どのアプリ？)"
- User: "User"
- Device: "Device"

Visual Details:
1. Core Concept: Two different types of verification.
2. Metaphor: An ID card (Auth) and a vehicle registration or badge (App Check).
3. Action: Two checkpoints verification.
4. Layout: Side by side comparison.		## 読む：App Check は「本物のアプリから来た？」を確かめる🧿
15docs/firebase_ai_ts_study_002.mdfirebase_ai_ts_study_002_rate_limit.png./picture/firebase_ai_ts_study_002_rate_limit.pngTheme: User-based Rate Limiting.

Labels to Render
- User A: "User A"
- User B: "User B"
- Limit: "100 RPM"
- Gate: "Rate Limit"

Visual Details:
1. Core Concept: Controlling traffic per user to prevent abuse.
2. Metaphor: Turnstiles or traffic lights for each lane (user).
3. Action: Regulating flow, blocking excess.
4. Layout: Parallel lanes with gates.		## 読む：ユーザー単位のレート制限が最初からある🚦
16docs/firebase_ai_ts_study_002.mdfirebase_ai_ts_study_002_backend_comparison.png./picture/firebase_ai_ts_study_002_backend_comparison.pngTheme: Gemini Developer API vs Vertex AI.

Labels to Render
- Dev API: "Developer API (Free/Fast)"
- Vertex AI: "Vertex AI (Enterprise)"
- Switch: "Code Switch"

Visual Details:
1. Core Concept: Two options for the backend.
2. Metaphor: A switch track or a fork in the road.
3. Action: Choosing one path.
4. Layout: Split path or comparison card.		## 読む：Gemini Developer API と Vertex AI Gemini API の違いざっくり⚖️
17docs/firebase_ai_ts_study_003.mdfirebase_ai_ts_study_003_workflow.png./picture/firebase_ai_ts_study_003_workflow.pngTheme: Basic AI Interaction Flow.

Labels to Render
- Input: "Input Text"
- Action: "Click Button"
- Process: "AI Generating..."
- Output: "Result Display"

Visual Details:
1. Core Concept: The step-by-step user experience.
2. Metaphor: A comic strip or storyboard style (4 panels).
3. Action: Typing -> Clicking -> Thinking -> Reading.
4. Layout: Horizontal sequence.		## この章のゴール🎯
18docs/firebase_ai_ts_study_003.mdfirebase_ai_ts_study_003_code_structure.png./picture/firebase_ai_ts_study_003_code_structure.pngTheme: Separation of Concerns (Logic vs UI).

Labels to Render
- Logic: "src/lib/ai.ts (Setup)"
- UI: "src/components/DailyPolish.tsx (View)"
- App: "src/App.tsx (Root)"

Visual Details:
1. Core Concept: Clean architecture.
2. Metaphor: Two distinct boxes (Engine and Dashboard) connected by a wire.
3. Action: UI calling Logic.
4. Layout: Diagrammatic separation.		## 1) まずは“最短で動く形”の設計にする🧩
19docs/firebase_ai_ts_study_003.mdfirebase_ai_ts_study_003_model_const.png./picture/firebase_ai_ts_study_003_model_const.pngTheme: Single Source of Truth for Model Name.

Labels to Render
- Constant: "const MODEL_NAME"
- Value: "gemini-2.5-flash-lite"
- Switch: "Easy Switch"

Visual Details:
1. Core Concept: Easy configuration management.
2. Metaphor: A label or tag on a machine that can be easily swapped.
3. Action: Swapping the tag.
4. Layout: Focus on the variable assignment.		## 2) モデル名は“あとで差し替えやすく”しておく🎛️
20docs/firebase_ai_ts_study_003.mdfirebase_ai_ts_study_003_ui_mockup.png./picture/firebase_ai_ts_study_003_ui_mockup.pngTheme: Daily Report Polisher UI Layout.

Labels to Render
- Title: "日報を整える"
- Area: "Text Input"
- Button: "整形する"
- Result: "Output Area"

Visual Details:
1. Core Concept: Simple, functional UI.
2. Metaphor: A clean wireframe sketch.
3. Action: Static layout view.
4. Layout: Top-down vertical layout.		## 4) 実装：UIコンポーネントを作る🖥️🔘
21docs/firebase_ai_ts_study_003.mdfirebase_ai_ts_study_003_prompt_stack.png./picture/firebase_ai_ts_study_003_prompt_stack.pngTheme: Building a Structured Prompt.

Labels to Render
- Role: "Role (You are...)"
- Task: "Task (Polish this...)"
- Rules: "Rules (Bullet points...)"
- Input: "User Input"

Visual Details:
1. Core Concept: Composing a prompt from parts.
2. Metaphor: Stacking building blocks or layers of a sandwich.
3. Action: Assembling the prompt.
4. Layout: Vertical stack.		## 8) “プロンプトを育てる”最短ルート🧪✨
22docs/firebase_ai_ts_study_004.mdfirebase_ai_ts_study_004_three_layers.png./picture/firebase_ai_ts_study_004_three_layers.pngTheme: The 3-Layer Prompt Structure.

Labels to Render
- System: "System Instruction (Rule)"
- Task: "Task Template (Format)"
- User: "User Input (Data)"

Visual Details:
1. Core Concept: Structured input for the AI.
2. Metaphor: A 3-tier cake or a building foundation/frame/interior.
3. Action: Stacking the layers.
4. Layout: Vertical stack.		## 1) まず結論：プロンプトは3層に分けるのが強い🧠🧱
23docs/firebase_ai_ts_study_004.mdfirebase_ai_ts_study_004_prompt_blueprint.png./picture/firebase_ai_ts_study_004_prompt_blueprint.pngTheme: Prompt Design Strategy.

Labels to Render
- Goal: "Goal (What?)"
- Constraints: "Constraints (Rules)"
- Format: "Output Format (Shape)"

Visual Details:
1. Core Concept: Essential components of a good prompt.
2. Metaphor: A blueprint document or a recipe card.
3. Action: Checking off items.
4. Layout: List or triangular relation.		## 2) “日報整形テンプレ”の設計図を作ろう📐📝
24docs/firebase_ai_ts_study_004.mdfirebase_ai_ts_study_004_system_instruction_code.png./picture/firebase_ai_ts_study_004_system_instruction_code.pngTheme: Configuring System Instructions in Code.

Labels to Render
- Function: "getGenerativeModel"
- Config: "systemInstruction"
- Content: "Rules..."

Visual Details:
1. Core Concept: Implementing the fixed rules.
2. Metaphor: A code block or a settings panel being adjusted.
3. Action: Setting the "System" variable.
4. Layout: Code block representation.		## 3-1. AIモデル（型）を1つ作る：System Instruction＋GenerationConfig🧩⚙️
25docs/firebase_ai_ts_study_004.mdfirebase_ai_ts_study_004_ui_modes.png./picture/firebase_ai_ts_study_004_ui_modes.pngTheme: UI for switching prompt modes.

Labels to Render
- Summary: "要約 (Summary)"
- Format: "整形 (Format)"
- Rewrite: "言い換え (Rewrite)"
- Result: "Different Outputs"

Visual Details:
1. Core Concept: One input, multiple processing modes.
2. Metaphor: A mixer or processor with different mode buttons.
3. Action: Pressing a button changes the result shape.
4. Layout: Control panel view.		## 3-3. Reactから呼ぶ（ボタンで実行）🚀🖱️
26docs/firebase_ai_ts_study_004.mdfirebase_ai_ts_study_004_stabilization.png./picture/firebase_ai_ts_study_004_stabilization.pngTheme: Techniques to stabilize AI output.

Labels to Render
- Format: "Format Lock"
- Input: "Input Shield"
- Temp: "Temp Control"
- Result: "Stable Output"

Visual Details:
1. Core Concept: Preventing hallucinations and format breakage.
2. Metaphor: Clamps, anchors, or a mold shaping the liquid (AI output) into a solid block.
3. Action: Pouring liquid into a mold.
4. Layout: Process flow.		## 4) ブレを減らす“安定化テク”まとめ🧯🎛️
27docs/firebase_ai_ts_study_005.mdfirebase_ai_ts_study_005_chaos_vs_order.png./picture/firebase_ai_ts_study_005_chaos_vs_order.pngTheme: The benefit of Structured Output.

Labels to Render
- Text: "Unstructured Text (Chaos)"
- JSON: "Structured JSON (Order)"
- Arrow: "Transformation"

Visual Details:
1. Core Concept: Converting messy natural language into usable data.
2. Metaphor: A tangle of yarn vs a knitted sweater, or scattered blocks vs a built wall.
3. Action: Organizing.
4. Layout: Contrast side-by-side.		## 読む 📚✨：なぜJSONが強いの？（“文章”→“構造”）🧠
28docs/firebase_ai_ts_study_005.mdfirebase_ai_ts_study_005_schema_blueprint.png./picture/firebase_ai_ts_study_005_schema_blueprint.pngTheme: Designing the JSON Schema.

Labels to Render
- Category: "Enum (A|B|C)"
- Importance: "Number (1-5)"
- Todos: "Array [ ]"

Visual Details:
1. Core Concept: Defining the data structure.
2. Metaphor: A cookie cutter or a mold shape.
3. Action: Defining the shape.
4. Layout: Tree structure or blueprint.		## ① まずJSONの形を決める🧩
29docs/firebase_ai_ts_study_005.mdfirebase_ai_ts_study_005_extraction_flow.png./picture/firebase_ai_ts_study_005_extraction_flow.pngTheme: The Extraction Pipeline.

Labels to Render
- Input: "Daily Report"
- AI: "Gemini + Schema"
- Output: "Clean JSON"

Visual Details:
1. Core Concept: AI processing text into data.
2. Metaphor: A mining operation (extracting gold from rock) or a filter.
3. Action: Processing input to output.
4. Layout: Linear flow.		## ② responseMimeType と responseSchema をセットする🔧
30docs/firebase_ai_ts_study_005.mdfirebase_ai_ts_study_005_ui_mapping.png./picture/firebase_ai_ts_study_005_ui_mapping.pngTheme: Mapping JSON to UI Components.

Labels to Render
- JSON: "{ category: 'issue' }"
- UI: "Issue Badge (Red)"
- List: "Todo List"

Visual Details:
1. Core Concept: Data driving the view.
2. Metaphor: Wires connecting data fields to UI elements.
3. Action: Data populating the view.
4. Layout: Connection diagram.		## ③ React側：抽出してカード表示する📇✨
31docs/firebase_ai_ts_study_005.mdfirebase_ai_ts_study_005_recovery_levels.png./picture/firebase_ai_ts_study_005_recovery_levels.pngTheme: 3-Level Recovery Strategy for Broken JSON.

Labels to Render
- Lv1: "Trim/Parse"
- Lv2: "AI Repair"
- Lv3: "Human Edit"

Visual Details:
1. Core Concept: Safety nets for data integrity.
2. Metaphor: Three nets stacked below a trapeze artist.
3. Action: Catching the fall.
4. Layout: Vertical layers.		## ④ JSONが壊れた時のリカバリ案（3段構え）🧯🧯🧯
32docs/firebase_ai_ts_study_006.mdfirebase_ai_ts_study_006_ui_states.png./picture/firebase_ai_ts_study_006_ui_states.pngTheme: UI states for AI image generation (Loading, Success, Failure).

Labels to Render:
- Loading: "生成中… (10s)"
- Success: "Preview (4 images)"
- Failure: "Error (Try again)"

Visual Details:
1. Core Concept: Managing user expectations during AI generation.
2. Metaphor: Three UI cards or screens side-by-side.
3. Action: Spinner spinning, images appearing, warning icon.
4. Layout: Horizontal sequence or comparison.		## 1) 画像生成UIは「失敗前提」で作るのが勝ち🏆🧯
33docs/firebase_ai_ts_study_006.mdfirebase_ai_ts_study_006_base64_flow.png./picture/firebase_ai_ts_study_006_base64_flow.pngTheme: Data flow from Imagen to React via Base64.

Labels to Render:
- API: "Imagen API"
- Data: "Base64 String"
- React: " tag"
- View: "Browser"

Visual Details:
1. Core Concept: Rendering raw image data directly.
2. Metaphor: A data pipe converting a long text string (Base64) into a picture frame.
3. Action: Text flowing into an image placeholder.
4. Layout: Left-to-right flow.		## 2) まずは生成してプレビューまで通す React 実装🧩⚡
34docs/firebase_ai_ts_study_006.mdfirebase_ai_ts_study_006_storage_save.png./picture/firebase_ai_ts_study_006_storage_save.pngTheme: Saving generated image to Cloud Storage.

Labels to Render:
- Client: "Data URL"
- Convert: "Blob"
- Cloud: "Storage Bucket"
- Path: "users/{uid}/thumbs/"

Visual Details:
1. Core Concept: Persisting the temporary image.
2. Metaphor: Packaging a picture into a box (Blob) and uploading it to a cloud shelf.
3. Action: Upload arrow.
4. Layout: Upward flow or left-to-right.		## 3) 生成した画像を Cloud Storage に保存する📦🧷
35docs/firebase_ai_ts_study_006.mdfirebase_ai_ts_study_006_cost_brake.png./picture/firebase_ai_ts_study_006_cost_brake.pngTheme: Managing AI cost and usage limits.

Labels to Render:
- Limit: "3回/日 (Daily)"
- Brake: "Cooldown (3s)"
- Cost: "Budget"

Visual Details:
1. Core Concept: Preventing overuse.
2. Metaphor: A speedometer with a red zone or a traffic light (Brake).
3. Action: Stopping or slowing down the flow.
4. Layout: Gauge or traffic signal style.		## 4) コストと上限 画像生成は先にブレーキを付ける🚦💸
36docs/firebase_ai_ts_study_006.mdfirebase_ai_ts_study_006_prompt_refining.png./picture/firebase_ai_ts_study_006_prompt_refining.pngTheme: Using Gemini CLI to generate prompt ideas.

Labels to Render:
- Input: "Thumbnail Idea"
- CLI: "Gemini CLI"
- Output: "10 Candidates"
- Selection: "Best Prompt"

Visual Details:
1. Core Concept: AI helping to write AI prompts.
2. Metaphor: A funnel or a brainstorming session with a robot assistant.
3. Action: Inputting a simple idea, getting many options, picking one.
4. Layout: Funnel or expansion-contraction flow.		## 6) Gemini CLI で「プロンプト作り」を秒速にする🧠⚡
37docs/firebase_ai_ts_study_006.mdfirebase_ai_ts_study_006_mini_task_flow.png./picture/firebase_ai_ts_study_006_mini_task_flow.pngTheme: The Mini Task Workflow (Generate -> Select -> Save).

Labels to Render:
- Step 1: "Generate (2 pics)"
- Step 2: "Select One"
- Step 3: "Save to Storage"
- Goal: "Completed!"

Visual Details:
1. Core Concept: The user journey for the task.
2. Metaphor: A game level map or a step-by-step guide.
3. Action: Moving through the steps.
4. Layout: Horizontal path.		## ミニ課題 いい感じのサムネ体験を完成させる🎒✨
38docs/firebase_ai_ts_study_007.mdfirebase_ai_ts_study_007_app_check_gate.png./picture/firebase_ai_ts_study_007_app_check_gate.pngTheme: App Check as a security gate for AI Logic.

Labels to Render:
- App: "App Request"
- Gate: "App Check"
- Service: "AI Logic (Proxy)"
- Model: "Gemini / Imagen"

Visual Details:
1. Core Concept: Filtering unauthorized access.
2. Metaphor: A security checkpoint before a bridge or tunnel.
3. Action: Valid request passing through, invalid one blocked.
4. Layout: Linear flow (Left to Right).		## 1) まず結論：AI Logic + App Check は相性が良い👍
39docs/firebase_ai_ts_study_007.mdfirebase_ai_ts_study_007_deployment_steps.png./picture/firebase_ai_ts_study_007_deployment_steps.pngTheme: The 3-step safe deployment for App Check.

Labels to Render:
- Step 1: "Debug (Local)"
- Step 2: "Metrics (Verify)"
- Step 3: "Enforce (Prod)"
- Goal: "Safe AI"

Visual Details:
1. Core Concept: Gradual rollout to prevent breakage.
2. Metaphor: A staircase or a roadmap with checkpoints.
3. Action: Climbing the steps safely.
4. Layout: Ascending steps or timeline.		## 2) やる順番（事故らないルート）🧭
40docs/firebase_ai_ts_study_007.mdfirebase_ai_ts_study_007_debug_vs_prod.png./picture/firebase_ai_ts_study_007_debug_vs_prod.pngTheme: Debug Token (Local) vs reCAPTCHA (Prod).

Labels to Render:
- Local: "Localhost"
- Token: "Debug Token (Secret)"
- Prod: "Production"
- Verify: "reCAPTCHA"

Visual Details:
1. Core Concept: Different verification methods for different environments.
2. Metaphor: A key card for the lab (Debug) vs a public ID scanner (reCAPTCHA).
3. Action: Two parallel validation paths.
4. Layout: Split screen comparison.		## 3-2. 開発（localhost）では debug provider を使う🧪（超重要！）
41docs/firebase_ai_ts_study_007.mdfirebase_ai_ts_study_007_metrics_graph.png./picture/firebase_ai_ts_study_007_metrics_graph.pngTheme: Monitoring App Check Metrics.

Labels to Render:
- Green: "Verified (Valid)"
- Gray: "Unverified (Invalid)"
- Action: "Check %"

Visual Details:
1. Core Concept: Confirming traffic health before enforcing.
2. Metaphor: A dashboard chart showing a rising green line (valid traffic).
3. Action: Analyzing the data.
4. Layout: Chart or graph visualization.		## 4-1. まずメトリクスを見る👀
42docs/firebase_ai_ts_study_007.mdfirebase_ai_ts_study_007_limited_use_token.png./picture/firebase_ai_ts_study_007_limited_use_token.pngTheme: Limited-use tokens for Replay Protection.

Labels to Render:
- Token: "Token"
- Use: "One-time Use"
- Result: "Burn / Expire"
- Attack: "Replay (Blocked)"

Visual Details:
1. Core Concept: A token that is valid only once.
2. Metaphor: A ticket that gets punched or a match that burns out.
3. Action: Using the token consumes it immediately.
4. Layout: Sequence of use and expiration.		## 5) “将来の強化”に備える：リプレイ対策（limited-use tokens）🧯🕒
43docs/firebase_ai_ts_study_007.mdfirebase_ai_ts_study_007_gemini_cli_mcp.png./picture/firebase_ai_ts_study_007_gemini_cli_mcp.pngTheme: Managing Firebase with Gemini CLI (MCP).

Labels to Render:
- User: "Question / Command"
- Tool: "Gemini CLI"
- Target: "Firebase Project"
- Action: "Config / Check"

Visual Details:
1. Core Concept: AI assistant controlling the cloud resources.
2. Metaphor: A command center where a robot (Gemini) operates the controls (Firebase) based on voice commands.
3. Action: Robot typing or flipping switches.
4. Layout: Interaction flow.		## 7) 開発AIでスムーズにする小ワザ（Antigravity / Gemini CLI）🛸💻
44docs/firebase_ai_ts_study_007.mdfirebase_ai_ts_study_007_friendly_error.png./picture/firebase_ai_ts_study_007_friendly_error.pngTheme: User-friendly App Check Error Message.

Labels to Render:
- Error: "App Check Failed"
- UI: "Friendly Message"
- Text: "Please refresh..."
- Icon: "Refresh Icon"

Visual Details:
1. Core Concept: Translating a technical error into a helpful UI state.
2. Metaphor: A rough rock (Error) being polished into a smooth gem (Friendly UI).
3. Action: Transformation of the message.
4. Layout: Before/After or Transformation flow.		## 8) ミニ課題🎯：「App Check失敗時の表示」をやさしくする🙂✨
45docs/firebase_ai_ts_study_008.mdfirebase_ai_ts_study_008_three_barriers.png./picture/firebase_ai_ts_study_008_three_barriers.pngTheme: The 3-Layer Defense against AI Overuse.

Labels to Render:
- Layer 1: "Hard Limit (Firebase)"
- Layer 2: "Soft Limit (Config)"
- Layer 3: "UI Brake (App)"
- Goal: "Safe Usage"

Visual Details:
1. Core Concept: Multiple defense lines.
2. Metaphor: Three walls or shields protecting the core resource.
3. Action: A request hitting the first, second, then third barrier.
4. Layout: Concentric circles or sequential walls.		## まず“3段バリア”で考える 🧱🧱🧱
46docs/firebase_ai_ts_study_008.mdfirebase_ai_ts_study_008_429_causes.png./picture/firebase_ai_ts_study_008_429_causes.pngTheme: Understanding 429 (Too Many Requests) Errors.

Labels to Render:
- Cause 1: "Project Quota (Your Limit)"
- Cause 2: "API Global Quota (Google Limit)"
- Result: "429 Error"

Visual Details:
1. Core Concept: Two different sources of the same error.
2. Metaphor: Two traffic lights turning red from different directions.
3. Action: Stopping the traffic.
4. Layout: Split source converging on one result.		## ✅ 429が出る理由は2つ
47docs/firebase_ai_ts_study_008.mdfirebase_ai_ts_study_008_remote_config_params.png./picture/firebase_ai_ts_study_008_remote_config_params.pngTheme: Configuring AI Parameters in Remote Config.

Labels to Render:
- Key: "ai_enabled: true"
- Limit: "ai_daily_limit: 5"
- Model: "model_name: gemini-flash"
- Cooldown: "cooldown: 60s"

Visual Details:
1. Core Concept: Setting up the control panel.
2. Metaphor: A settings dashboard with switches and input fields.
3. Action: Adjusting the values.
4. Layout: List or panel view.		## 1) Remote Config に“AI用パラメータ”を作る 🎛️🧾
48docs/firebase_ai_ts_study_008.mdfirebase_ai_ts_study_008_fetch_activate.png./picture/firebase_ai_ts_study_008_fetch_activate.pngTheme: The Remote Config Fetch & Activate Cycle.

Labels to Render:
- Start: "App Start"
- Step 1: "Fetch (Cloud)"
- Step 2: "Activate (Apply)"
- Result: "New Behavior"

Visual Details:
1. Core Concept: Getting the latest rules from the cloud.
2. Metaphor: Downloading a blueprint and applying it to the building.
3. Action: Data flowing from cloud to app and changing its state.
4. Layout: Circular cycle or linear process.		## 2) Remote Config をアプリ起動時に読み込む 🚀
49docs/firebase_ai_ts_study_008.mdfirebase_ai_ts_study_008_local_counting.png./picture/firebase_ai_ts_study_008_local_counting.pngTheme: Local Storage Usage Counting.

Labels to Render:
- Storage: "localStorage"
- Key: "ai_used_today"
- Value: "3 / 5"
- Action: "Increment (+1)"

Visual Details:
1. Core Concept: Tracking usage locally for immediate feedback.
2. Metaphor: A tally counter or a notebook keeping score.
3. Action: Adding a tick mark.
4. Layout: Close-up of the counter mechanism.		## 3) “今日あと何回？”をローカルで数える 🧁📅
50docs/firebase_ai_ts_study_008.mdfirebase_ai_ts_study_008_ui_states.png./picture/firebase_ai_ts_study_008_ui_states.pngTheme: Responsive UI States for AI Limits.

Labels to Render:
- Active: "Generate (Rem: 3)"
- Wait: "Cooldown (45s)"
- Stop: "Limit Reached"

Visual Details:
1. Core Concept: Button changing appearance based on state.
2. Metaphor: A traffic light changing colors (Green, Yellow, Red).
3. Action: User interaction possibilities changing.
4. Layout: Three distinct button states shown.		## 5) React側で「ON/OFF」「残り回数」「クールダウン」を表示 🎛️📣
51docs/firebase_ai_ts_study_008.mdfirebase_ai_ts_study_008_percentage_rollout.png./picture/firebase_ai_ts_study_008_percentage_rollout.pngTheme: Staged Rollout Strategy.

Labels to Render:
- Group A: "5% (Testers)"
- Group B: "20% (Early)"
- Group C: "100% (Public)"
- Feature: "New Prompt"

Visual Details:
1. Core Concept: Gradually releasing a feature to more users.
2. Metaphor: A dial turning up the volume or a dam opening sluice gates incrementally.
3. Action: Increasing the percentage.
4. Layout: Pie charts or progress bars.		## 段階解放（ロールアウト）🪜✨
52docs/firebase_ai_ts_study_009.mdfirebase_ai_ts_study_009_flow_concept.png./picture/firebase_ai_ts_study_009_flow_concept.pngTheme: Understanding Genkit Flow as a Script.

Labels to Render:
- Script: "Flow Definition"
- Actor: "AI Model"
- Action: "Steps (Run, Generate)"
- Director: "Developer"

Visual Details:
1. Core Concept: A structured sequence of actions.
2. Metaphor: A movie director's clapboard or a script document.
3. Action: Director shouting "Action!", actors following the script.
4. Layout: Central object focus.		## 1) Flowってなに？ 台本ってどういう意味？📜✨
53docs/firebase_ai_ts_study_009.mdfirebase_ai_ts_study_009_flow_benefits.png./picture/firebase_ai_ts_study_009_flow_benefits.pngTheme: Key Benefits of Using Flows.

Labels to Render:
- Benefit 1: "Schema Lock"
- Benefit 2: "Traceable"
- Benefit 3: "Reusable"
- Goal: "Solid Code"

Visual Details:
1. Core Concept: Why use Flow over raw API calls.
2. Metaphor: Three pillars or badges (Lock, Magnifying Glass, Recycle Symbol).
3. Action: Stabilizing the development.
4. Layout: Horizontal list of icons.		## 2) なんでFlowにするの？（初心者ほど恩恵デカい）💡😆
54docs/firebase_ai_ts_study_009.mdfirebase_ai_ts_study_009_ng_check_structure.png./picture/firebase_ai_ts_study_009_ng_check_structure.pngTheme: NG Check Flow Input/Output Design.

Labels to Render:
- Input: "{ text, policy }"
- Process: "AI Check"
- Output: "{ verdict, reasons }"
- Verdicts: "OK / NG / REVIEW"

Visual Details:
1. Core Concept: Data transformation pipeline.
2. Metaphor: A machine taking raw materials (text) and sorting them into bins (OK/NG).
3. Action: Sorting/Filtering.
4. Layout: Left to Right flow.		## 3) 今日つくるFlow：投稿のNGチェック🛡️📝
55docs/firebase_ai_ts_study_009.mdfirebase_ai_ts_study_009_code_parts.png./picture/firebase_ai_ts_study_009_code_parts.pngTheme: Anatomy of a Genkit Flow Code.

Labels to Render:
- Part 1: "Setup (ai = genkit)"
- Part 2: "Schema (z.object)"
- Part 3: "Logic (defineFlow)"
- Result: "Executable Flow"

Visual Details:
1. Core Concept: The three essential code blocks.
2. Metaphor: A puzzle with three connecting pieces or a layered burger.
3. Action: Assembling the code.
4. Layout: Vertical stack or puzzle assembly.		## 5-2) src/index.ts にFlowを書く✍️
56docs/firebase_ai_ts_study_009.mdfirebase_ai_ts_study_009_developer_ui.png./picture/firebase_ai_ts_study_009_developer_ui.pngTheme: Genkit Developer UI Interface.

Labels to Render:
- Menu: "Flow List"
- Input: "JSON Editor"
- Button: "Run Flow"
- Output: "Result & Trace"

Visual Details:
1. Core Concept: A local tool for testing and debugging.
2. Metaphor: A cockpit dashboard or a laboratory control panel.
3. Action: Running a test and inspecting the result.
4. Layout: Interface mockup style.		## 5-3) 動かし方：Developer UIでFlowを実行する▶️👀
57docs/firebase_ai_ts_study_009.mdfirebase_ai_ts_study_009_advanced_flow.png./picture/firebase_ai_ts_study_009_advanced_flow.pngTheme: Adding Complexity: Keyword Scan & Review Logic.

Labels to Render:
- Step 1: "Normalize"
- Step 2: "Keyword Scan"
- Step 3: "AI Check"
- Branch: "If Review -> Ask More"

Visual Details:
1. Core Concept: A multi-step flow with logic.
2. Metaphor: A flowchart with decision diamonds and multiple boxes.
3. Action: Data flowing through steps and branching.
4. Layout: Flowchart diagram.		## 6) ミニ課題：台本を“実務っぽく”する🧩🔥
58docs/firebase_ai_ts_study_009.mdfirebase_ai_ts_study_009_ai_assistance.png./picture/firebase_ai_ts_study_009_ai_assistance.pngTheme: Accelerating Genkit Dev with AI Agents.

Labels to Render:
- Dev: "Create Flow..."
- Agent: "Gemini / MCP"
- Output: "Code + Schema"
- Result: "Fast Dev"

Visual Details:
1. Core Concept: AI writing the boilerplate code.
2. Metaphor: A developer shaking hands with a robot, code appearing magically.
3. Action: Collaboration.
4. Layout: Interaction scene.		## 8) 開発AIでこの章を“最短”にする🚀🤖
59docs/firebase_ai_ts_study_010.mdfirebase_ai_ts_study_010_run_interface.png./picture/firebase_ai_ts_study_010_run_interface.pngTheme: The "Run" feature in Genkit Developer UI.

Labels to Render:
- Input: "Input JSON"
- Button: "Run Flow"
- Output: "Output JSON"
- UI: "Developer UI"

Visual Details:
1. Core Concept: Testing the flow with custom input.
2. Metaphor: A laboratory console where you inject a sample and get a result.
3. Action: Pressing the play button.
4. Layout: Left-to-right or Top-to-bottom flow.		## 1) Run（実行）▶️
60docs/firebase_ai_ts_study_010.mdfirebase_ai_ts_study_010_inspect_trace.png./picture/firebase_ai_ts_study_010_inspect_trace.pngTheme: Inspecting Flow Execution (Trace).

Labels to Render:
- Trace: "Timeline View"
- Step 1: "Start Flow"
- Step 2: "Generate (Gemini)"
- Step 3: "Output"

Visual Details:
1. Core Concept: Seeing inside the black box.
2. Metaphor: An X-ray view or a timeline of events.
3. Action: Expanding a step to see details.
4. Layout: Timeline or tree structure.		## 2) Inspect（追跡）🔎
61docs/firebase_ai_ts_study_010.mdfirebase_ai_ts_study_010_evaluation_concept.png./picture/firebase_ai_ts_study_010_evaluation_concept.pngTheme: Evaluation using Datasets.

Labels to Render:
- Dataset: "10 Examples"
- Flow: "Your Flow"
- Result: "Score / Diff"
- Goal: "Improvement"

Visual Details:
1. Core Concept: Batch testing to measure quality.
2. Metaphor: A factory quality control line checking multiple items.
3. Action: Comparison between Expected and Actual (implied).
4. Layout: Pipeline style.		## 3) Evaluate（評価）📊
62docs/firebase_ai_ts_study_010.mdfirebase_ai_ts_study_010_genkit_start.png./picture/firebase_ai_ts_study_010_genkit_start.pngTheme: Launching Genkit Developer UI.

Labels to Render:
- Command: "genkit start"
- Terminal: "Terminal"
- Browser: "localhost:4000"
- Status: "Connected"

Visual Details:
1. Core Concept: Starting the local development environment.
2. Metaphor: Turning the key to start an engine.
3. Action: Terminal command launching a browser window.
4. Layout: Connection between terminal and browser.		## 3) Developer UIを起動する🚀
63docs/firebase_ai_ts_study_010.mdfirebase_ai_ts_study_010_trace_details.png./picture/firebase_ai_ts_study_010_trace_details.pngTheme: Deep Dive into Trace Details.

Labels to Render:
- Detail: "Prompt View"
- Config: "Model / Temp"
- Token: "Token Usage"
- Error: "Exceptions"

Visual Details:
1. Core Concept: Analyzing specific parameters and data.
2. Metaphor: Using a magnifying glass on a specific document.
3. Action: Reading the fine print (prompt text).
4. Layout: Zoomed-in panel view.		## 5) Inspect：トレースで「どこが原因か」を見る🔎🧠
64docs/firebase_ai_ts_study_010.mdfirebase_ai_ts_study_010_create_dataset.png./picture/firebase_ai_ts_study_010_create_dataset.pngTheme: Creating a Test Dataset.

Labels to Render:
- Name: "Dataset Name"
- Type: "Flow Input"
- Data: "JSON Examples"
- Action: "Save"

Visual Details:
1. Core Concept: Preparing test cases.
2. Metaphor: Filling a binder or a test tube rack with samples.
3. Action: Adding items to a list.
4. Layout: List or form view.		## 1) Datasetを作る🗂️
65docs/firebase_ai_ts_study_010.mdfirebase_ai_ts_study_010_improvement_loop.png./picture/firebase_ai_ts_study_010_improvement_loop.pngTheme: The Prompt Improvement Cycle.

Labels to Render:
- Step 1: "Evaluate (Find Issue)"
- Step 2: "Fix Prompt"
- Step 3: "Evaluate (Verify)"
- Goal: "Better Output"

Visual Details:
1. Core Concept: Iterative refinement.
2. Metaphor: A circular feedback loop (Plan-Do-Check-Act).
3. Action: Spinning the wheel of improvement.
4. Layout: Circular cycle.		## ミニ課題🎯📝：プロンプトを1回だけ改善して、差を説明しよう✨
66docs/firebase_ai_ts_study_011.mdfirebase_ai_ts_study_011_ai_assistant_role.png./picture/firebase_ai_ts_study_011_ai_assistant_role.pngTheme: AI as a Proposer, Human as the Decider.

Labels to Render:
- AI: "Proposal (OK/NG?)"
- Human: "Decision (Stamp)"
- Document: "Content"
- Result: "Published"

Visual Details:
1. Core Concept: AI suggests, Human approves.
2. Metaphor: An office scene where a robot assistant hands a file to a human manager.
3. Action: Human stamping "Approved" or "Rejected".
4. Layout: Side-by-side interaction.		## 1) まず結論：AIは「提案役」まで📝🙂
67docs/firebase_ai_ts_study_011.mdfirebase_ai_ts_study_011_boundary_criteria.png./picture/firebase_ai_ts_study_011_boundary_criteria.pngTheme: The 5 Criteria for Human Review.

Labels to Render:
- 1: "Undoable?"
- 2: "High Impact?"
- 3: "Privacy?"
- 4: "Explainable?"
- 5: "Abuse Potential?"

Visual Details:
1. Core Concept: A checklist or compass for decision making.
2. Metaphor: A pentagon radar chart or a list of 5 warning signs.
3. Action: Checking the criteria.
4. Layout: Radial or list.		## 2) 境界線を引く“5つの物差し”🧠🧭
68docs/firebase_ai_ts_study_011.mdfirebase_ai_ts_study_011_three_state_model.png./picture/firebase_ai_ts_study_011_three_state_model.pngTheme: The OK / NG / REVIEW Model.

Labels to Render:
- OK: "Green (Auto Pass)"
- NG: "Red (Auto Block)"
- REVIEW: "Yellow (Human Check)"

Visual Details:
1. Core Concept: Traffic light logic for content moderation.
2. Metaphor: A traffic signal with three lights.
3. Action: Cars (content) stopping, going, or waiting.
4. Layout: Vertical or horizontal signal.		## 3) 3状態モデル（OK / NG / REVIEW）を固定する🧩
69docs/firebase_ai_ts_study_011.mdfirebase_ai_ts_study_011_moderation_data_flow.png./picture/firebase_ai_ts_study_011_moderation_data_flow.pngTheme: Data Flow for Moderation Queue.

Labels to Render:
- Input: "Post"
- AI: "Analysis"
- Branch: "If Review -> Queue"
- Admin: "Dashboard"

Visual Details:
1. Core Concept: How data moves from user to admin.
2. Metaphor: A conveyor belt sorting items into a "Review Bin".
3. Action: Sorting process.
4. Layout: Left-to-right flow.		## 5) Firestoreのデータ設計：レビューキューを作る📦👀
70docs/firebase_ai_ts_study_011.mdfirebase_ai_ts_study_011_output_schema.png./picture/firebase_ai_ts_study_011_output_schema.pngTheme: Structured JSON Output Schema.

Labels to Render:
- Field 1: "decision (Enum)"
- Field 2: "confidence (0-1)"
- Field 3: "reasons (Array)"
- Field 4: "flags (Tags)"

Visual Details:
1. Core Concept: The blueprint of the AI's answer.
2. Metaphor: A form or a stamped card with specific fields filled in.
3. Action: Structured data representation.
4. Layout: Document or tree view.		## 6) Genkit Flow：出力は「構造化JSON」に固定🧾🔧
71docs/firebase_ai_ts_study_011.mdfirebase_ai_ts_study_011_safety_controls.png./picture/firebase_ai_ts_study_011_safety_controls.pngTheme: Safety Settings and Kill Switch.

Labels to Render:
- Switch: "Emergency Stop"
- Slider: "Safety Threshold"
- Config: "Remote Config"
- Status: "Active / Stopped"

Visual Details:
1. Core Concept: Administrative control over AI safety.
2. Metaphor: A control panel with a big red button and sliders.
3. Action: Adjusting safety levels.
4. Layout: Panel interface.		## 7) Safety settings と “停止スイッチ”🎛️🧯
72docs/firebase_ai_ts_study_011.mdfirebase_ai_ts_study_011_tool_security.png./picture/firebase_ai_ts_study_011_tool_security.pngTheme: Securing Tool Calls (Function Calling).

Labels to Render:
- AI: "AI Agent"
- Tool: "Delete Data"
- Lock: "Human Permission"
- User: "Owner Check"

Visual Details:
1. Core Concept: Preventing AI from executing dangerous actions without approval.
2. Metaphor: A robot trying to press a button but a padlock prevents it.
3. Action: Access denied or requiring a key.
4. Layout: Security diagram.		## 8) ツール呼び出し（Function Calling）を混ぜるなら、境界線はもっと固く🔒😇
73docs/firebase_ai_ts_study_012.mdfirebase_ai_ts_study_012_placement_options.png./picture/firebase_ai_ts_study_012_placement_options.pngTheme: Three Deployment Options for Genkit.\n\nLabels to Render:\n- Option 1: "Functions (2nd gen)"\n- Option 2: "Cloud Run (Server)"\n- Option 3: "GCP Functions"\n\nVisual Details:\n1. Core Concept: Comparing three hosting choices.\n2. Metaphor: Three distinct pedestals or platforms.\n3. Action: Option 1 is highlighted as the "Default Choice" for Firebase apps.\n4. Layout: Horizontal comparison.## 読む：まず結論（迷ったらこの3択）🧭✨
74docs/firebase_ai_ts_study_012.mdfirebase_ai_ts_study_012_2nd_gen_features.png./picture/firebase_ai_ts_study_012_2nd_gen_features.pngTheme: Advantages of Cloud Functions 2nd Gen.\n\nLabels to Render:\n- Feature 1: "Concurrency (1-1000)"\n- Feature 2: "Memory (32GB)"\n- Feature 3: "Timeout (60min)"\n\nVisual Details:\n1. Core Concept: Why 2nd gen powers AI better.\n2. Metaphor: A turbocharged engine or a server rack with three gauges showing high capacity.\n3. Action: Gauges showing high performance.\n4. Layout: Three icons or gauges side-by-side.## 読む：2nd genが「AI向き」な理由🔥（ここ超重要）
75docs/firebase_ai_ts_study_012.mdfirebase_ai_ts_study_012_runtime_roadmap.png./picture/firebase_ai_ts_study_012_runtime_roadmap.pngTheme: Node.js Runtime Version Roadmap.\n\nLabels to Render:\n- Node 18: "Deprecated (Stop)"\n- Node 20: "Stable (OK)"\n- Node 22: "Recommended (Best)"\n\nVisual Details:\n1. Core Concept: Choosing the right version.\n2. Metaphor: A traffic light system.\n3. Action: Node 18 is Red, 20 is Yellow/Green, 22 is Green with a star.\n4. Layout: Vertical or horizontal timeline.## 読む：ランタイム（言語とバージョン）最新メモ🧾✨
76docs/firebase_ai_ts_study_012.mdfirebase_ai_ts_study_012_decision_questions.png./picture/firebase_ai_ts_study_012_decision_questions.pngTheme: Three Questions to Decide Placement.\n\nLabels to Render:\n- Q1: "React Direct?"\n- Q2: "Auth Needed?"\n- Q3: "Server Freedom?"\n- Result: "Functions / Cloud Run"\n\nVisual Details:\n1. Core Concept: Decision tree.\n2. Metaphor: A flowchart where answering Yes to Q1/Q2 leads to Functions, Yes to Q3 leads to Cloud Run.\n3. Action: Path selection.\n4. Layout: Flowchart.## Step 1：3問だけ答えて決める🧠📝
77docs/firebase_ai_ts_study_012.mdfirebase_ai_ts_study_012_oncall_wrapper.png./picture/firebase_ai_ts_study_012_oncall_wrapper.pngTheme: Wrapping Genkit Flow with onCallGenkit.\n\nLabels to Render:\n- Inner: "Genkit Flow"\n- Wrapper: "onCallGenkit"\n- Feature: "Auth + JSON"\n- Client: "Callable SDK"\n\nVisual Details:\n1. Core Concept: The wrapper pattern.\n2. Metaphor: A core box (Flow) being placed inside a protective shipping box (onCall) that has a lock (Auth).\n3. Action: Encapsulation.\n4. Layout: Concentric boxes.## (2) Flowを onCallGenkit で包む🧩
78docs/firebase_ai_ts_study_012.mdfirebase_ai_ts_study_012_safety_settings.png./picture/firebase_ai_ts_study_012_safety_settings.pngTheme: Three Safety Settings for AI Functions.\n\nLabels to Render:\n- Time: "Timeout (Sec)"\n- Brain: "Memory (GB)"\n- Parallel: "Concurrency"\n- Goal: "Safe Operation"\n\nVisual Details:\n1. Core Concept: Configuring limits to prevent accidents.\n2. Metaphor: A control panel with three distinct knobs or sliders.\n3. Action: Setting the limits.\n4. Layout: Control panel view.## AI向けの「事故らない設定」3点セット🧯💸🛡️
79docs/firebase_ai_ts_study_012.mdfirebase_ai_ts_study_012_minitask_memo.png./picture/firebase_ai_ts_study_012_minitask_memo.pngTheme: The Placement Decision Memo.\n\nLabels to Render:\n- Name: "Flow Name"\n- Place: "Functions / Run"\n- Limit: "Timeout / Memory"\n- Action: "Fill This!"\n\nVisual Details:\n1. Core Concept: The mini-task output.\n2. Metaphor: A sticky note or a clipboard with the template fields.\n3. Action: Filling in the memo.\n4. Layout: Document view.## ミニ課題：あなたのアプリに最適な「置き場所メモ」を作る📝✨
80docs/firebase_ai_ts_study_013.mdfirebase_ai_ts_study_013_oncall_concept.png./picture/firebase_ai_ts_study_013_oncall_concept.pngTheme: onCallGenkit Wrapper Concept.\n\nLabels to Render:\n- Core: "Genkit Flow"\n- Wrapper: "onCallGenkit"\n- Auto: "Auth / App Check"\n- Client: "SDK Call"\n\nVisual Details:\n1. Core Concept: Encapsulating logic for safe external access.\n2. Metaphor: A valuable item (Flow) inside a secure shipping container (onCallGenkit) with automatic custom checks.\n3. Action: Wrapping/Protecting.\n4. Layout: Concentric layers.## 1) まず全体像：なぜ onCallGenkit なの？🤔
81docs/firebase_ai_ts_study_013.mdfirebase_ai_ts_study_013_ng_check_logic.png./picture/firebase_ai_ts_study_013_ng_check_logic.pngTheme: Three Outcomes of NG Check.\n\nLabels to Render:\n- Input: "User Text"\n- 1: "OK (Green)"\n- 2: "NG (Red)"\n- 3: "Review (Yellow)"\n\nVisual Details:\n1. Core Concept: Logic branching.\n2. Metaphor: A traffic signal or a path splitting into three.\n3. Action: Sorting the input.\n4. Layout: Branching flow.## 2) 今日作る呼び出し：NGチェック（OK/NG/要レビュー）🛡️✅
82docs/firebase_ai_ts_study_013.mdfirebase_ai_ts_study_013_simple_implementation.png./picture/firebase_ai_ts_study_013_simple_implementation.pngTheme: Basic onCallGenkit Implementation.\n\nLabels to Render:\n- Import: "onCallGenkit"\n- Config: "Region / Secrets"\n- Body: "Flow Logic"\n- Export: "Function"\n\nVisual Details:\n1. Core Concept: Code structure overview.\n2. Metaphor: A blueprint or a recipe card with ingredients and steps.\n3. Action: Assembling the function.\n4. Layout: Block diagram.## 3-1. いちばんシンプルな公開（まず動かす）🚀
83docs/firebase_ai_ts_study_013.mdfirebase_ai_ts_study_013_security_options.png./picture/firebase_ai_ts_study_013_security_options.pngTheme: Three Security Layers for Callable.\n\nLabels to Render:\n- 1: "App Check (True App?)"\n- 2: "Replay (One-time?)"\n- 3: "Auth (Logged In?)"\n\nVisual Details:\n1. Core Concept: Defense in depth.\n2. Metaphor: Three distinct gates or shields protecting the core function.\n3. Action: Filtering requests.\n4. Layout: Sequential barriers.## 3-2. セキュリティを“最初から”入れる（重要）🔐🧿
84docs/firebase_ai_ts_study_013.mdfirebase_ai_ts_study_013_uid_workaround.png./picture/firebase_ai_ts_study_013_uid_workaround.pngTheme: Manual UID Injection Workaround.\n\nLabels to Render:\n- Request: "onCall Request"\n- Extract: "Get UID"\n- Inject: "Context { uid }"\n- Run: "Flow.run"\n\nVisual Details:\n1. Core Concept: Passing missing data manually.\n2. Metaphor: A bypass pipe or a manual injection syringe adding a vital ingredient (UID) into the mix.\n3. Action: Injecting the UID.\n4. Layout: Data flow diagram.## 3-3. 超重要な注意：Flowの中で UID が取れない場合がある⚠️
85docs/firebase_ai_ts_study_013.mdfirebase_ai_ts_study_013_react_call_flow.png./picture/firebase_ai_ts_study_013_react_call_flow.pngTheme: React to Callable Function Flow.\n\nLabels to Render:\n- UI: "Click Button"\n- SDK: "httpsCallable"\n- Server: "Function"\n- Result: "UI Update"\n\nVisual Details:\n1. Core Concept: The round-trip journey of a request.\n2. Metaphor: A boomerang or a ball being thrown and returned.\n3. Action: Request goes out, result comes back.\n4. Layout: Cycle or loop.## 4) アプリ側（React）：Flowを呼ぶ📣✨
86docs/firebase_ai_ts_study_013.mdfirebase_ai_ts_study_013_streaming_concept.png./picture/firebase_ai_ts_study_013_streaming_concept.pngTheme: Streaming vs Batch Response.\n\nLabels to Render:\n- Batch: "Wait... Wait... Done!"\n- Stream: "Chunk... Chunk... Done!"\n- Feeling: "Fast!"\n\nVisual Details:\n1. Core Concept: Improved user experience via streaming.\n2. Metaphor: Downloading a file (Batch: 0% -> 100%) vs Streaming video (Play immediately).\n3. Action: Text appearing progressively.\n4. Layout: Top-down comparison.## 5) ちょい上級：ストリーミングで“待ち時間を体験化”する⚡
87docs/firebase_ai_ts_study_014.mdfirebase_ai_ts_study_014_logging_boxes.png./picture/firebase_ai_ts_study_014_logging_boxes.pngTheme: Three Pillars of Logging Strategy.\n\nLabels to Render:\n- Box A: "Cloud Logging (Search)"\n- Box B: "Cloud Trace (Speed)"\n- Box C: "App DB (History)"\n\nVisual Details:\n1. Core Concept: Separation of concerns in data storage.\n2. Metaphor: Three distinct storage containers or silos.\n3. Action: Storing different types of data.\n4. Layout: Horizontal arrangement.## 1) まず結論：ログ設計は「3つの箱」で考える📦📦📦
88docs/firebase_ai_ts_study_014.mdfirebase_ai_ts_study_014_log_fields.png./picture/firebase_ai_ts_study_014_log_fields.pngTheme: Essential Log Fields vs Forbidden PII.\n\nLabels to Render:\n- Good: "requestId, latencyMs"\n- Safe: "inputPreview (Masked)"\n- Bad: "Passwords, PII"\n\nVisual Details:\n1. Core Concept: What to log and what to hide.\n2. Metaphor: A filter or a gatekeeper sorting items.\n3. Action: Good items pass, bad items are blocked or masked.\n4. Layout: Contrast (Do vs Don't).## 2) 「何を残す？」最小で強いログ項目セット💪🧾
89docs/firebase_ai_ts_study_014.mdfirebase_ai_ts_study_014_log_utility.png./picture/firebase_ai_ts_study_014_log_utility.pngTheme: Log Utility Functions.\n\nLabels to Render:\n- Input: "Raw User ID / Text"\n- Utils: "hashUid / safePreview"\n- Output: "Safe Structured Log"\n\nVisual Details:\n1. Core Concept: Data sanitization before logging.\n2. Metaphor: A processing machine or a washing station.\n3. Action: Dirty data goes in, clean/safe data comes out.\n4. Layout: Left-to-right flow.## 3-1. ログ用ユーティリティ（コピペOK）📎
90docs/firebase_ai_ts_study_014.mdfirebase_ai_ts_study_014_flow_logging_pattern.png./picture/firebase_ai_ts_study_014_flow_logging_pattern.pngTheme: Request ID Tracing Pattern.\n\nLabels to Render:\n- Start: "Log: Start (ID: A1)"\n- Process: "AI Working..."\n- End: "Log: End (ID: A1)"\n- Link: "Traceable"\n\nVisual Details:\n1. Core Concept: Correlating logs via ID.\n2. Metaphor: A thread connecting two ends of a process.\n3. Action: Following the thread.\n4. Layout: Timeline.## 3-2. Flow側で「start/end/error」を必ず出す📌
91docs/firebase_ai_ts_study_014.mdfirebase_ai_ts_study_014_telemetry_flow.png./picture/firebase_ai_ts_study_014_telemetry_flow.pngTheme: Genkit Telemetry to Google Cloud.\n\nLabels to Render:\n- Genkit: "Flow Execution"\n- SDK: "Telemetry SDK"\n- Cloud: "Google Cloud"\n- Dash: "Trace / Logs"\n\nVisual Details:\n1. Core Concept: Automated data export.\n2. Metaphor: A pipeline sending data from the app to the cloud dashboard.\n3. Action: Data flowing upwards.\n4. Layout: Vertical or diagonal flow.## 4) トレースも欲しい：GenkitのテレメトリをGoogle Cloudへ🧭
92docs/firebase_ai_ts_study_014.mdfirebase_ai_ts_study_014_log_viewing_routes.png./picture/firebase_ai_ts_study_014_log_viewing_routes.pngTheme: Two Ways to View Logs.\n\nLabels to Render:\n- UI: "Cloud Console (Search)"\n- CLI: "Firebase CLI (Tail)"\n- Dev: "Developer"\n\nVisual Details:\n1. Core Concept: Different tools for different needs.\n2. Metaphor: A dual-screen setup or two distinct lenses.\n3. Action: Developer choosing a tool.\n4. Layout: Split view.## 5) “見る”のも大事：ログの確認ルートを2本にする👀🧪
93docs/firebase_ai_ts_study_014.mdfirebase_ai_ts_study_014_ai_logic_monitoring.png./picture/firebase_ai_ts_study_014_ai_logic_monitoring.pngTheme: Monitoring AI Logic Metrics.\n\nLabels to Render:\n- Rate: "RPM Limit"\n- Status: "Allowed?"\n- Cost: "Cost Estimation"\n- Alert: "Quota Alert"\n\nVisual Details:\n1. Core Concept: Keeping an eye on usage and limits.\n2. Metaphor: A dashboard with specific gauges for AI metrics.\n3. Action: Monitoring.\n4. Layout: Dashboard panel.## 7) Firebase AI Logicも絡める：乱用・コスト監視のログ設計🎛️💸
94docs/firebase_ai_ts_study_015.mdfirebase_ai_ts_study_015_eval_axes.png./picture/firebase_ai_ts_study_015_eval_axes.pngTheme: False Positive vs False Negative.\n\nLabels to Render:\n- Err 1: "False Positive (Annoying)"\n- Err 2: "False Negative (Dangerous)"\n- Goal: "Balance"\n\nVisual Details:\n1. Core Concept: Understanding the two types of errors.\n2. Metaphor: A seesaw or balance scale weighing inconvenience against danger.\n3. Action: Balancing or measuring.\n4. Layout: Side-by-side comparison.## ステップ1：評価の“軸”を決める（迷わない設計）🧭
95docs/firebase_ai_ts_study_015.mdfirebase_ai_ts_study_015_dataset_structure.png./picture/firebase_ai_ts_study_015_dataset_structure.pngTheme: Evaluation Dataset JSON Structure.\n\nLabels to Render:\n- Input: "{ text: '...' }"\n- Ref: "{ expected: 'OK' }"\n- List: "Array [ ]"\n\nVisual Details:\n1. Core Concept: The data format required for evaluation.\n2. Metaphor: A clean file document or a card showing the JSON schema.\n3. Action: Structuring data.\n4. Layout: Code block representation.## ステップ3：評価用ファイルを作る（いちばん簡単な形）📄🧾
96docs/firebase_ai_ts_study_015.mdfirebase_ai_ts_study_015_dev_ui_evaluate.png./picture/firebase_ai_ts_study_015_dev_ui_evaluate.pngTheme: Genkit Developer UI Evaluate Tab.\n\nLabels to Render:\n- Tab: "Evaluate"\n- Metric: "Score: 80%"\n- List: "Test Cases"\n- Action: "View Trace"\n\nVisual Details:\n1. Core Concept: Visualizing evaluation results.\n2. Metaphor: A dashboard screen with scores and list items.\n3. Action: Reviewing results.\n4. Layout: UI mockup.## ステップ4：Developer UIで Evaluate を回す👀🧪
97docs/firebase_ai_ts_study_015.mdfirebase_ai_ts_study_015_cli_eval_workflow.png./picture/firebase_ai_ts_study_015_cli_eval_workflow.pngTheme: CLI Evaluation Command Flow.\n\nLabels to Render:\n- Cmd: "genkit eval:flow"\n- Input: "Dataset File"\n- Run: "Processing..."\n- Out: "Report"\n\nVisual Details:\n1. Core Concept: Automation via CLI.\n2. Metaphor: A terminal window executing a command and producing a report.\n3. Action: Running a script.\n4. Layout: Sequential flow.## ステップ5：CLIで“再現できる評価”にする💻🔁
98docs/firebase_ai_ts_study_015.mdfirebase_ai_ts_study_015_result_counting.png./picture/firebase_ai_ts_study_015_result_counting.pngTheme: Analyzing Evaluation Results.\n\nLabels to Render:\n- Row 1: "Exp: OK / Act: NG (False Pos)"\n- Row 2: "Exp: NG / Act: OK (False Neg)"\n- Action: "Count Errors"\n\nVisual Details:\n1. Core Concept: Identifying specific failure types.\n2. Metaphor: A scorecard or a teacher grading a test, marking red Xs on specific errors.\n3. Action: Grading/Counting.\n4. Layout: List view.## ステップ6：結果の読み方（“誤NG”“見逃し”を数える）🧮📌
99docs/firebase_ai_ts_study_015.mdfirebase_ai_ts_study_015_improve_loop.png./picture/firebase_ai_ts_study_015_improve_loop.pngTheme: The Improvement Feedback Loop.\n\nLabels to Render:\n- Step 1: "Eval (Find Bug)"\n- Step 2: "Fix Prompt"\n- Step 3: "Re-Eval (Verify)"\n- Result: "Better Score"\n\nVisual Details:\n1. Core Concept: Iterative development.\n2. Metaphor: A circular arrow cycle (PDCA style) showing continuous improvement.\n3. Action: Cycling through steps.\n4. Layout: Circular flow.## ステップ7：改善→再評価（ここが本番）🔁🔥
100docs/firebase_ai_ts_study_015.mdfirebase_ai_ts_study_015_trace_extraction.png./picture/firebase_ai_ts_study_015_trace_extraction.pngTheme: Extracting Datasets from Traces.\n\nLabels to Render:\n- Source: "Batch Run Logs"\n- Tool: "eval:extractData"\n- Output: "New Dataset"\n\nVisual Details:\n1. Core Concept: Reusing execution logs to create test data.\n2. Metaphor: A mining machine or a filter extracting gold (Dataset) from raw earth (Logs).\n3. Action: Extraction/Conversion.\n4. Layout: Left-to-right transformation.## ステップ8：ちょい上級：トレースを材料にして評価する🧪🧱
101docs/firebase_ai_ts_study_016.mdfirebase_ai_ts_study_016_antigravity_concepts.png./picture/firebase_ai_ts_study_016_antigravity_concepts.pngTheme: Antigravity Core Concepts.\n\nLabels to Render:\n- Ctrl: "Mission Control"\n- Edit: "Editor View"\n- Out: "Artifacts"\n- Mode: "Planning / Fast"\n\nVisual Details:\n1. Core Concept: The platform architecture.\n2. Metaphor: A command center with a main screen (Control), a workspace (Editor), and a filing cabinet (Artifacts).\n3. Action: Managing development.\n4. Layout: Dashboard view.## 1) まず覚える5語だけ🧠✨
102docs/firebase_ai_ts_study_016.mdfirebase_ai_ts_study_016_good_mission.png./picture/firebase_ai_ts_study_016_good_mission.pngTheme: Three Pillars of a Good Mission.\n\nLabels to Render:\n- 1: "Goal (What?)"\n- 2: "DoD (Done?)"\n- 3: "Constraints (Rules)"\n- Result: "Clear Task"\n\nVisual Details:\n1. Core Concept: Essential components for clarity.\n2. Metaphor: A tripod or a triangle supporting a "Mission" sphere.\n3. Action: Stabilizing the task.\n4. Layout: Triangular or list.## “良いミッション”の条件✅（超重要）
103docs/firebase_ai_ts_study_016.mdfirebase_ai_ts_study_016_terminal_safety.png./picture/firebase_ai_ts_study_016_terminal_safety.pngTheme: Terminal Auto-Execution Modes.\n\nLabels to Render:\n- Off: "Safe (Manual)"\n- Auto: "Balanced (Ask)"\n- Turbo: "Fast (Risky)"\n\nVisual Details:\n1. Core Concept: Balancing speed vs safety.\n2. Metaphor: A mode switch or a speedometer with Green (Off), Yellow (Auto), and Red (Turbo) zones.\n3. Action: Selecting the mode.\n4. Layout: Gauge or switch.## B) Terminalの自動実行は慎重に🖥️🛡️
104docs/firebase_ai_ts_study_016.mdfirebase_ai_ts_study_016_mission_template.png./picture/firebase_ai_ts_study_016_mission_template.pngTheme: Mission Description Template.\n\nLabels to Render:\n- Title: "## Mission Name"\n- Goal: "## Goal"\n- Context: "## Context"\n- Rules: "## Constraints / DoD"\n\nVisual Details:\n1. Core Concept: A standardized format.\n2. Metaphor: A fill-in-the-blanks form or a blueprint document.\n3. Action: Structuring the request.\n4. Layout: Document page.## ミッション指示テンプレ（これをコピペして使う）🧾✨
105docs/firebase_ai_ts_study_016.mdfirebase_ai_ts_study_016_three_missions.png./picture/firebase_ai_ts_study_016_three_missions.pngTheme: The Three-Step Mission Workflow.\n\nLabels to Render:\n- M1: "Spec (Plan)"\n- M2: "Impl (Code)"\n- M3: "Test (Verify)"\n- Goal: "Release"\n\nVisual Details:\n1. Core Concept: Breaking down a feature into logical steps.\n2. Metaphor: Three stepping stones across a river or steps on a staircase.\n3. Action: Progressing from plan to test.\n4. Layout: Step-by-step flow.## ハンズオン🧑‍💻：今回の題材を“3ミッション”にして回す🔁✨
106docs/firebase_ai_ts_study_016.mdfirebase_ai_ts_study_016_artifacts_benefit.png./picture/firebase_ai_ts_study_016_artifacts_benefit.pngTheme: Artifacts vs Raw Logs.\n\nLabels to Render:\n- Left: "Raw Logs (Hard)"\n- Right: "Artifacts (Easy)"\n- Benefit: "Quick Review"\n\nVisual Details:\n1. Core Concept: The value of structured output.\n2. Metaphor: Reading a messy scroll vs reading a neat summary card.\n3. Action: Comparing the two.\n4. Layout: Side-by-side comparison.## Mission 2（実装🛠️）：Flowと返却JSONを固める🧩
107docs/firebase_ai_ts_study_016.mdfirebase_ai_ts_study_016_minitask_list.png./picture/firebase_ai_ts_study_016_minitask_list.pngTheme: Mini Task Mission Board.\n\nLabels to Render:\n- Col 1: "M16-1 Spec"\n- Col 2: "M16-2 Impl"\n- Col 3: "M16-3 Test"\n- Status: "In Progress"\n\nVisual Details:\n1. Core Concept: Managing the mini task.\n2. Metaphor: A Kanban board with three sticky notes moving across.\n3. Action: Tracking progress.\n4. Layout: Kanban style.## ミニ課題🧩（30分×3で終わるやつ）⏱️✨
108docs/firebase_ai_ts_study_017.mdfirebase_ai_ts_study_017_react_loop.png./picture/firebase_ai_ts_study_017_react_loop.pngTheme: ReAct (Reason & Act) Loop.\n\nLabels to Render:\n- 1: "Reason (Think)"\n- 2: "Act (Use Tool)"\n- 3: "Observe (Result)"\n- Center: "Gemini CLI"\n\nVisual Details:\n1. Core Concept: The agentic workflow.\n2. Metaphor: A cognitive cycle where thought leads to action and observation.\n3. Action: Cycling through steps.\n4. Layout: Circular flow.## 1) 読む：Gemini CLIの「強み」と「やり方の型」📚✨
109docs/firebase_ai_ts_study_017.mdfirebase_ai_ts_study_017_cloud_shell_advantage.png./picture/firebase_ai_ts_study_017_cloud_shell_advantage.pngTheme: Cloud Shell Instant Access.\n\nLabels to Render:\n- Cloud Shell: "Browser (Ready!)"\n- Local: "Setup... (Wait)"\n- Benefit: "Zero Config"\n\nVisual Details:\n1. Core Concept: Ease of use in Cloud Shell.\n2. Metaphor: A racer starting instantly (Cloud Shell) vs one tying shoelaces (Local).\n3. Action: Instant start.\n4. Layout: Comparison.## 強み①：Cloud Shellで即スタートできる⚡
110docs/firebase_ai_ts_study_017.mdfirebase_ai_ts_study_017_gemini_md_role.png./picture/firebase_ai_ts_study_017_gemini_md_role.pngTheme: The Role of GEMINI.md.\n\nLabels to Render:\n- File: "GEMINI.md"\n- Content: "Project Rules"\n- Agent: "Gemini CLI"\n- Result: "Smart Context"\n\nVisual Details:\n1. Core Concept: Providing persistent context.\n2. Metaphor: A rulebook or a map being handed to the agent.\n3. Action: Agent reading the rules.\n4. Layout: Interaction.## 強み③：プロジェクト用の“ルールブック”を持てる（GEMINI.md）🗂️
111docs/firebase_ai_ts_study_017.mdfirebase_ai_ts_study_017_cli_modes.png./picture/firebase_ai_ts_study_017_cli_modes.pngTheme: Three Ways to Use Gemini CLI.\n\nLabels to Render:\n- 1: "Interactive (Chat)"\n- 2: "One-shot (Cmd)"\n- 3: "Context (@File)"\n\nVisual Details:\n1. Core Concept: Versatility of the tool.\n2. Metaphor: A multi-tool knife with three blades.\n3. Action: Showing different modes.\n4. Layout: Three distinct sections.## 3) 手を動かす：まず覚える「3つの使い方」🕹️✨
112docs/firebase_ai_ts_study_017.mdfirebase_ai_ts_study_017_safety_tools.png./picture/firebase_ai_ts_study_017_safety_tools.pngTheme: CLI Safety Features.\n\nLabels to Render:\n- 1: "Sandbox (Box)"\n- 2: "Approval (Y/N)"\n- 3: "Tool List (Map)"\n\nVisual Details:\n1. Core Concept: Safe execution environment.\n2. Metaphor: Protective gear (Helmet, Gloves, Goggles).\n3. Action: Protecting the user.\n4. Layout: Three icons.## 4) 読む：事故らないための「安全3点セット」🧷🛡️
113docs/firebase_ai_ts_study_017.mdfirebase_ai_ts_study_017_investigation_workflow.png./picture/firebase_ai_ts_study_017_investigation_workflow.pngTheme: The Bug Fixing Workflow.\n\nLabels to Render:\n- Start: "Reproduce (Error)"\n- Step 1: "Investigate"\n- Step 2: "Fix (Diff)"\n- End: "Verify (Test)"\n\nVisual Details:\n1. Core Concept: A structured approach to debugging.\n2. Metaphor: A detective's process or a repair assembly line.\n3. Action: Moving from broken to fixed.\n4. Layout: Linear flow.## 6) 手を動かす：本題！「エラー→原因→修正→検証」の回し方🌀🧪
114docs/firebase_ai_ts_study_017.mdfirebase_ai_ts_study_017_web_search_integration.png./picture/firebase_ai_ts_study_017_web_search_integration.pngTheme: Integrated Web Search.\n\nLabels to Render:\n- CLI: "Gemini CLI"\n- Web: "Firebase Docs"\n- Action: "Search & Fetch"\n- Result: "Solved!"\n\nVisual Details:\n1. Core Concept: Accessing external knowledge.\n2. Metaphor: A robot browsing a library book.\n3. Action: Fetching information.\n4. Layout: Connection between agent and web source.## 7) 章トピックに“Firebase要素”を絡めるコツ🔥🔗
115docs/firebase_ai_ts_study_019.mdfirebase_ai_ts_study_019_gemini_role.png./picture/firebase_ai_ts_study_019_gemini_role.pngTheme: Gemini in Firebase Console.

Labels to Render:
- UI: "Firebase Console"
- Chat: "Gemini Chat"
- Feature: "Answers + Citations"
- Goal: "Operational Aid"

Visual Details:
1. Core Concept: An AI assistant embedded in the console.
2. Metaphor: A friendly robot (Gemini) popping out of the Firebase Console interface to offer help.
3. Action: Robot holding a document with citations.
4. Layout: Console interface with AI overlay.		## 1) Gemini in Firebaseって、何ができるの？🤖📌
116docs/firebase_ai_ts_study_018.mdfirebase_ai_ts_study_018_dev_nix_concept.png./picture/firebase_ai_ts_study_018_dev_nix_concept.pngTheme: dev.nix as a Recipe for the Environment.

Labels to Render:
- File: "dev.nix (Recipe)"
- Workspace: "Firebase Studio"
- Result: "Identical Environment"

Visual Details:
1. Core Concept: Defining the environment as code.
2. Metaphor: A cookbook or recipe card labeled "dev.nix" being used to create a perfect workspace setup.
3. Action: Magic or data flowing from the file to the workspace.
4. Layout: Left-to-right flow from file to environment.		## 読む📖：Firebase Studioの“再現可能”ってこういうこと
117docs/firebase_ai_ts_study_018.mdfirebase_ai_ts_study_018_open_in_studio.png./picture/firebase_ai_ts_study_018_open_in_studio.pngTheme: Importing Repository to Studio.

Labels to Render:
- Button: "Open in Firebase Studio"
- Source: "GitHub Repo"
- Destination: "New Workspace"
- Action: "One-click Setup"

Visual Details:
1. Core Concept: Ease of access via a button.
2. Metaphor: A prominent button on a GitHub page leading directly to a new workspace.
3. Action: Clicking the button triggers the workspace creation.
4. Layout: Button leading to a workspace icon.		## 0) まずはリポジトリをStudioへ取り込む📥
118docs/firebase_ai_ts_study_018.mdfirebase_ai_ts_study_018_dev_nix_structure.png./picture/firebase_ai_ts_study_018_dev_nix_structure.pngTheme: Anatomy of dev.nix.

Labels to Render:
- Channel: "OS Version (stable-24.11)"
- Packages: "Tools (node, git)"
- Env: "Variables (APP_NAME)"

Visual Details:
1. Core Concept: The three key sections of the configuration file.
2. Metaphor: A blueprint or a layered document highlighting the three sections.
3. Action: Pointing out the components.
4. Layout: Vertical stack of sections.		## 1) 最小の .idx/dev.nix を作る🧾
119docs/firebase_ai_ts_study_018.mdfirebase_ai_ts_study_018_hooks_lifecycle.png./picture/firebase_ai_ts_study_018_hooks_lifecycle.pngTheme: Lifecycle Hooks (onCreate vs onStart).

Labels to Render:
- onCreate: "First Time Only (npm install)"
- onStart: "Every Time (npm run dev)"
- Timeline: "Start -> Stop -> Resume"

Visual Details:
1. Core Concept: When each hook fires.
2. Metaphor: A timeline showing onCreate happening once at the beginning, and onStart happening at every subsequent launch.
3. Action: Events occurring on the timeline.
4. Layout: Linear timeline.		## 2) “初回だけやりたいこと”を onCreate に入れる🪄
120docs/firebase_ai_ts_study_018.mdfirebase_ai_ts_study_018_preview_config.png./picture/firebase_ai_ts_study_018_preview_config.pngTheme: Studio Preview Configuration.

Labels to Render:
- Code: "dev.nix"
- Config: "idx.previews"
- UI: "Split Screen"
- View: "Live App ($PORT)"

Visual Details:
1. Core Concept: Code driving the live view.
2. Metaphor: A code file (dev.nix) projecting an image onto a screen (Preview) side-by-side with the editor.
3. Action: Configuring the view.
4. Layout: Split screen or projection.		## 3) プレビュー（Preview）を“標準装備”にする👀✨
121docs/firebase_ai_ts_study_018.mdfirebase_ai_ts_study_018_recovery_mode.png./picture/firebase_ai_ts_study_018_recovery_mode.pngTheme: Recovery Environment Mode.

Labels to Render:
- Broken: "Start Failed (Error)"
- Safe: "Recovery Mode (Safe)"
- Action: "Edit dev.nix"
- Result: "Rebuild OK"

Visual Details:
1. Core Concept: A fallback mode when the main environment fails.
2. Metaphor: A lifebuoy or an emergency exit sign leading to a safe room (Recovery Mode) where repairs can be made.
3. Action: Rescuing the environment.
4. Layout: Flow from failure to rescue to success.		## 5) 反映：Rebuild → もし壊れたらRecoveryで復旧🛟
122docs/firebase_ai_ts_study_018.mdfirebase_ai_ts_study_018_secret_management.png./picture/firebase_ai_ts_study_018_secret_management.pngTheme: Separating Secrets from Code.

Labels to Render:
- Git: "dev.nix (Public)"
- Local: "dev.local.nix (Private)"
- Cloud: "Secret Manager (Secure)"
- Rule: "No Keys in Repo!"

Visual Details:
1. Core Concept: Where to store sensitive data.
2. Metaphor: A safe box (Secret Manager) and a personal diary (dev.local.nix) vs a public notice board (dev.nix).
3. Action: Placing keys in the safe, not on the board.
4. Layout: Contrast between Insecure (Repo) and Secure (Secret Manager/Local).		## 重要🔐：秘密情報（APIキー等）を“レシピに混ぜない”
123docs/firebase_ai_ts_study_019.mdfirebase_ai_ts_study_019_enable_flow.png./picture/firebase_ai_ts_study_019_enable_flow.pngTheme: Steps to Enable Gemini in Firebase.

Labels to Render:
- Role: "Project Owner/Editor"
- License: "No-cost (Personal)" vs "Paid (Workspace)"
- Action: "Enable API"
- Result: "Chat Ready"

Visual Details:
1. Core Concept: Prerequisites for enabling the feature.
2. Metaphor: A flowchart or a checklist.
3. Action: Checking role, then license type, then flipping the switch.
4. Layout: Flowchart top-to-bottom.		## 2) まず使える状態にする（表示されない時のチェック）🧰✅
124docs/firebase_ai_ts_study_019.mdfirebase_ai_ts_study_019_prompt_template.png./picture/firebase_ai_ts_study_019_prompt_template.pngTheme: Structured Prompt for Troubleshooting.

Labels to Render:
- 1: "Symptom (What?)"
- 2: "Tried (Action)"
- 3: "Error (Logs)"
- 4: "Goal (Success)"
- Add: "Please cite sources!"

Visual Details:
1. Core Concept: A fill-in-the-blanks card for asking good questions.
2. Metaphor: A formatted index card or a form with 4 main sections and a request for citations at the bottom.
3. Action: Filling in the form.
4. Layout: Vertical form.		## 3-1) まず“相談の型”を作る（これが9割）📌💬
125docs/firebase_ai_ts_study_019.mdfirebase_ai_ts_study_019_source_citations.png./picture/firebase_ai_ts_study_019_source_citations.pngTheme: Verification Loop with Citations.

Labels to Render:
- Gemini: "Answer + [Source]"
- User: "Check Source"
- Docs: "Official Manual"
- Result: "Trusted Answer"

Visual Details:
1. Core Concept: Trust but verify using the provided links.
2. Metaphor: A magnifying glass checking the footnote/link provided by the robot.
3. Action: Following the link to the document.
4. Layout: Connection between Chat Bubble and Document.		## 0) この章のゴール🎯✨
126docs/firebase_ai_ts_study_019.mdfirebase_ai_ts_study_019_troubleshoot_flow.png./picture/firebase_ai_ts_study_019_troubleshoot_flow.pngTheme: Troubleshooting Flow with Gemini.

Labels to Render:
- Start: "Problem (403 Error)"
- Ask: "Ask Gemini (Log + Context)"
- Step: "Suggested Checks"
- Verify: "Console / Code"
- Goal: "Fixed!"

Visual Details:
1. Core Concept: The iterative process of solving a problem.
2. Metaphor: A flow diagram showing the path from Error -> Question -> Answer -> Verification -> Fix.
3. Action: Moving through the steps.
4. Layout: Linear or loop flow.		## 3-2) 練習用：この章の題材アプリで“ありがち相談”を投げる🧩🧯
127docs/firebase_ai_ts_study_019.mdfirebase_ai_ts_study_019_memo_template.png./picture/firebase_ai_ts_study_019_memo_template.pngTheme: Standardized Operational Memo.

Labels to Render:
- Title: "Incident Report"
- Section 1: "Issue / Impact"
- Section 2: "Cause (Root)"
- Section 3: "Solution Steps"
- Verify: "Check Points"

Visual Details:
1. Core Concept: Documenting knowledge for future use.
2. Metaphor: A clean clipboard or a file folder containing a structured report.
3. Action: Filling in the sections.
4. Layout: Document style.		## 4) ハンズオン②：回答を“運用メモ”に変換して保存する📝🧊
128docs/firebase_ai_ts_study_019.mdfirebase_ai_ts_study_019_privacy_rules.png./picture/firebase_ai_ts_study_019_privacy_rules.pngTheme: Data Privacy Rules (Learning vs Non-Learning).

Labels to Render:
- No-cost: "Learns from Input (Beware)"
- Paid (Workspace): "No Learning (Safe)"
- Rule: "No Secrets! (API Keys)"
- Action: "Masking Data"

Visual Details:
1. Core Concept: Understanding how data is used.
2. Metaphor: Two bins: One labeled "Training Data" (Free user input goes here) and one locked bin (Paid user input).
3. Action: A red "Stop" sign preventing keys from entering either.
4. Layout: Comparison side-by-side.		## 5) データ取り扱いの注意（ここは絶対）🧯🔐
129docs/firebase_ai_ts_study_020.mdfirebase_ai_ts_study_020_accident_patterns.png./picture/firebase_ai_ts_study_020_accident_patterns.pngTheme: 5 Common AI Operation Accidents.

Labels to Render:
- 1: "Key Leak 🗝️"
- 2: "Cost Explosion 💸"
- 3: "Unstoppable 🚨"
- 4: "Rampage 🧨"
- 5: "Mystery 🕵️"

Visual Details:
1. Core Concept: Visualizing potential failures.
2. Metaphor: A set of 5 warning signs or icons representing each disaster.
3. Action: Warning the user.
4. Layout: Grid or circular arrangement of icons.		## まず知っておく「AI運用の事故パターン」💥😵
130docs/firebase_ai_ts_study_020.mdfirebase_ai_ts_study_020_config_strategy.png./picture/firebase_ai_ts_study_020_config_strategy.pngTheme: 3 Places for Configuration.

Labels to Render:
- 1: "Secret Manager (Keys)"
- 2: "Parameterized Config (Static)"
- 3: "Remote Config (Dynamic)"
- Action: "Sorting"

Visual Details:
1. Core Concept: Separation of concerns for configuration.
2. Metaphor: Three distinct sorting bins or boxes.
3. Action: Placing items (keys, settings, flags) into the correct bins.
4. Layout: Horizontal arrangement of bins.		## 何をどこに置く？ざっくりルール 🧠📦
131docs/firebase_ai_ts_study_020.mdfirebase_ai_ts_study_020_json_secret.png./picture/firebase_ai_ts_study_020_json_secret.pngTheme: Bundling Secrets in JSON.

Labels to Render:
- Code: "someApiConfig.value()"
- Secret: "{ key1, key2 }"
- Benefit: "One Secret, Multiple Values"

Visual Details:
1. Core Concept: Grouping related secrets into one object.
2. Metaphor: A keychain holding multiple keys (API Key, Webhook Secret) but labeled as a single item "API_CONFIG".
3. Action: Retrieving one key from the bunch.
4. Layout: Object/Key representation.		## TypeScriptで “JSONひとまとめSecret” が超便利 🧾✨
132docs/firebase_ai_ts_study_020.mdfirebase_ai_ts_study_020_three_brakes.png./picture/firebase_ai_ts_study_020_three_brakes.pngTheme: 3 Layers of Defense (Brakes).

Labels to Render:
- 1: "App Check (Gate)"
- 2: "Rate Limit (Speed)"
- 3: "Budget Alert (Emergency)"
- Goal: "Safe Usage"

Visual Details:
1. Core Concept: Multiple systems preventing runaway costs/usage.
2. Metaphor: A car with three braking systems (Foot brake, Hand brake, Parachute) or three gates.
3. Action: Stopping the vehicle or flow.
4. Layout: Sequential barriers.		## 3) 使いすぎ防止は「3段ブレーキ」🚦🚦🚦
133docs/firebase_ai_ts_study_020.mdfirebase_ai_ts_study_020_stop_switches.png./picture/firebase_ai_ts_study_020_stop_switches.pngTheme: Soft Stop vs Hard Stop.

Labels to Render:
- Soft: "Remote Config (UI Hide)"
- Hard: "Server Logic (Block)"
- User: "Hacker"
- Result: "Blocked"

Visual Details:
1. Core Concept: Two layers of disabling functionality.
2. Metaphor: A velvet rope (Soft) vs a steel door (Hard).
3. Action: A polite user stops at the rope, a malicious user jumps the rope but hits the door.
4. Layout: Sequential barriers.		## 4) 停止スイッチは「ソフト停止」と「ハード停止」🎛️🧱
134docs/firebase_ai_ts_study_020.mdfirebase_ai_ts_study_020_fetch_interval.png./picture/firebase_ai_ts_study_020_fetch_interval.pngTheme: Remote Config Fetch Interval.

Labels to Render:
- Clock: "12 Hours (Default)"
- Action: "Fetch"
- Warning: "Too Fast = Throttled"
- Goal: "Cache Hit"

Visual Details:
1. Core Concept: Appropriate frequency of checking for updates.
2. Metaphor: A clock face showing a 12-hour cycle between fetches.
3. Action: Waiting for the cycle to complete.
4. Layout: Circular cycle or timeline.		## ソフト停止：Remote Config で UI と挙動を止める 🎛️✨
135docs/firebase_ai_ts_study_020.mdfirebase_ai_ts_study_020_runbook_template.png./picture/firebase_ai_ts_study_020_runbook_template.pngTheme: Emergency Runbook Template.

Labels to Render:
- Title: "AI Emergency Runbook"
- Step 1: "Stop UI (Remote Config)"
- Step 2: "Stop Server (Gate)"
- Step 3: "Check Cost (Budget)"
- Goal: "Recovery"

Visual Details:
1. Core Concept: A standardized checklist for emergencies.
2. Metaphor: A red clipboard or an emergency manual with clear steps.
3. Action: Following the checklist.
4. Layout: Checklist or step-by-step guide.		## 5) 「障害が起きたらこれ」Runbook 10行テンプレ 📋🧯