feat: add docs page (#127)

* feat: add docs page

* feat: add docs page

Author: eliasecchig

.github/workflows/docs.yml

@@ -0,0 +1,61 @@
+name: Deploy Docs to GitHub Pages
+
+on:
+  push:
+    branches: [ main ]
+    paths:
+      - 'docs/**'
+      - '.github/workflows/docs.yml'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: 'npm'
+          cache-dependency-path: docs/package-lock.json
+
+      - name: Install dependencies
+        working-directory: docs
+        run: npm ci
+      
+      - name: Build VitePress site
+        working-directory: docs
+        run: |
+          npm run docs:build
+      
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v5
+      
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/.vitepress/dist
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -196,3 +196,4 @@ delete_genai_repos.sh
 cleanup_e2e_projects.sh
 .cloudbuild/terraform/backend.tf
 .cloudbuild/terraform/vars/env.tfvars
+docs/.vitepress/cache

Makefile

@@ -23,3 +23,6 @@ clean:
 
 install:
 	uv sync --dev --extra lint --frozen
+
+docs-dev:
+	cd docs && npm install && NODE_OPTIONS="--no-warnings" npm run docs:dev

agents/live_api/README.md

@@ -1,15 +1,15 @@
 # Multimodal Live Agent
 
-This pattern showcases a real-time conversational RAG agent powered by Google Gemini. The agent handles audio, video, and text interactions while leveraging tool calling with a vector DB for grounded responses.
+This pattern showcases a real-time conversational agent powered by Google Gemini. The agent handles audio, video, and text interactions while leveraging tool calling capabilities for enhanced responses.
 
 ![live_api_diagram](https://storage.googleapis.com/github-repo/generative-ai/sample-apps/e2e-gen-ai-app-starter-pack/live_api_diagram.png)
 
 **Key components:**
 
-- **Python Backend** (in `app/` folder): A production-ready server built with [FastAPI](https://fastapi.tiangolo.com/) and [google-genai](https://googleapis.github.io/python-genai/) that features:
+- **Python Backend** (in `app/` folder): A production-ready server built with [FastAPI](https://fastapi.tiangolo.com/) and [google-genai](https://googleapis.github.io/python-python-genai/) that features:
 
   - **Real-time bidirectional communication** via WebSockets between the frontend and Gemini model
-  - **Integrated tool calling** with vector database support for contextual document retrieval
+  - **Integrated tool calling** with a weather information tool for demonstrating external data retrieval
   - **Production-grade reliability** with retry logic and automatic reconnection capabilities
   - **Deployment flexibility** supporting both AI Studio and Vertex AI endpoints
   - **Feedback logging endpoint** for collecting user interactions
@@ -18,7 +18,7 @@ This pattern showcases a real-time conversational RAG agent powered by Google Ge
 
 ![live api demo](https://storage.googleapis.com/github-repo/generative-ai/sample-apps/e2e-gen-ai-app-starter-pack/live_api_pattern_demo.gif)
 
-Once both the backend and frontend are running, click the play button in the frontend UI to establish a connection with the backend. You can now interact with the Multimodal Live Agent! You can try asking questions such as "Using the tool you have, define Governance in the context MLOPs" to allow the agent to use the [documentation](https://cloud.google.com/architecture/deploy-operate-generative-ai-applications) it was provided to.
+Once both the backend and frontend are running, click the play button in the frontend UI to establish a connection with the backend. You can now interact with the Multimodal Live Agent! You can try asking questions such as "What's the weather like in San Francisco?" to see the agent use its weather information tool.
 
 ## Additional Resources for Multimodal Live API
 

agents/live_api/app/agent.py

@@ -56,7 +56,7 @@ def get_weather(query: str) -> dict:
 
 live_connect_config = types.LiveConnectConfig(
     response_modalities=[types.Modality.AUDIO],
-    tools=[get_weather],
+    tools=list(tool_functions.values()),
     # Change to desired language code (e.g., "es-ES" for Spanish, "fr-FR" for French)
     speech_config=types.SpeechConfig(language_code="en-US"),
     system_instruction=types.Content(

docs/.vitepress/config.js

@@ -0,0 +1,70 @@
+import { defineConfig } from 'vitepress'
+
+export default defineConfig({
+  title: 'Agent Starter Pack',
+  description: 'Build Production Agents faster',
+  base: '/agent-starter-pack/',
+  head: [
+    ['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com' }],
+    ['link', { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' }],
+    ['link', { href: 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap', rel: 'stylesheet' }],
+    ['style', {}, `
+      :root {
+        --vp-font-family-base: 'Roboto', sans-serif;
+        --vp-font-family-mono: 'Roboto Mono', monospace;
+        --vp-c-text-1: 0.9rem;
+        --vp-font-size-base: 0.9rem;
+      }
+    `]
+  ],
+
+  themeConfig: {
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Guide', link: '/guide/getting-started' },
+      { text: 'Agents', link: '/agents/overview' },
+      { text: 'CLI', link: '/cli/index.md' }
+    ],
+    sidebar: [
+      {
+        text: 'Guide',
+        items: [
+          { text: 'Getting Started', link: '/guide/getting-started' },
+          { text: 'Why Starter Pack?', link: '/guide/why_starter_pack' },
+          { text: 'Installation', link: '/guide/installation' },
+          { text: 'Deployment', link: '/guide/deployment' },
+          { text: 'Data Ingestion', link: '/guide/data-ingestion' },
+          { text: 'Observability', link: '/guide/observability' },
+          { text: 'Troubleshooting', link: '/guide/troubleshooting' }
+        ]
+      },
+      {
+        text: 'Agents',
+        items: [
+          { text: 'Overview', link: '/agents/overview' },
+
+        ]
+      },
+      {
+        text: 'CLI Reference',
+        items: [
+          { text: 'create', link: '/cli/create' },
+          { text: 'setup-cicd', link: '/cli/setup_cicd' }
+        ]
+      }
+    ],
+    socialLinks: [
+      { 
+        icon: 'github',
+        link: 'https://github.com/GoogleCloudPlatform/agent-starter-pack' 
+      },
+    ],
+    search: {
+      provider: 'local'
+    },
+
+    footer: {
+      message: 'Released under the Apache 2.0 License.'
+    }
+  }
+})

docs/README.md

@@ -0,0 +1,84 @@
+# Agent Templates
+
+The Agent Starter Pack follows a "bring your own agent" approach. It provides several production-ready agent templates designed to accelerate your development while offering the flexibility to use your preferred agent framework or pattern.
+
+## Available Templates
+
+
+| Agent Name | Description | Use Case |
+|------------|-------------|----------|
+| `adk_base` | A base ReAct agent implemented using Google's [Agent Development Kit](https://github.com/google/adk-python) | General purpose conversational agent |
+| `agentic_rag` | A RAG agent for document retrieval and Q&A | Document search and question answering |
+| `langgraph_base_react` | A base ReAct agent using LangGraph | Graph based conversational agent |
+| `crewai_coding_crew` | A multi-agent system implemented with CrewAI | Collaborative coding assistance |
+| `live_api` | A real-time multimodal RAG agent | Audio/video/text chat with knowledge base |
+
+## Choosing the Right Template
+
+When selecting a template, consider these factors:
+
+1.  **Primary Goal**: Are you building a conversational bot, a Q&A system over documents, a task-automation crew, or something else?
+2.  **Core Pattern/Framework**: Do you have a preference for Google's ADK, LangChain/LangGraph, CrewAI, or implementing a pattern like RAG directly? The Starter Pack supports various approaches.
+3.  **Reasoning Complexity**: Does your agent need complex planning and tool use (like ReAct), or is it more focused on retrieval and synthesis (like basic RAG)?
+4.  **Collaboration Needs**: Do you need multiple specialized agents working together?
+5.  **Modality**: Does your agent need to process or respond with audio, video, or just text?
+
+## Template Details
+
+### ADK Base (`adk_base`)
+
+This template provides a minimal example of a ReAct agent built using Google's [Agent Development Kit (ADK)](https://github.com/google/adk-python). It demonstrates core ADK concepts like agent creation and tool integration, enabling reasoning and tool selection. Ideal for:
+
+*   Getting started with agent development on Google Cloud.
+*   Building general-purpose conversational agents.
+*   Learning the ADK framework and ReAct pattern.
+
+### Agentic RAG (`agentic_rag`)
+
+Built on the ADK, this template implements [Retrieval-Augmented Generation (RAG)](https://cloud.google.com/use-cases/retrieval-augmented-generation?hl=en) with a production-ready data ingestion pipeline for document-based question answering. It allows you to ingest, process, and embed custom data to enhance response relevance. Features include:
+
+*   Automated data ingestion pipeline for custom data.
+*   Flexible datastore options: [Vertex AI Search](https://cloud.google.com/vertex-ai-search-and-conversation) and [Vertex AI Vector Search](https://cloud.google.com/vertex-ai/docs/vector-search/overview).
+*   Generation of custom embeddings for enhanced semantic search.
+*   Answer synthesis from retrieved context.
+*   Infrastructure deployment via Terraform and Cloud Build.
+
+### LangGraph Base ReAct (`langgraph_base_react`)
+
+This template provides a minimal example of a ReAct agent built using [LangGraph](https://langchain-ai.github.io/langgraph/). It serves as an excellent starting point for developing agents with graph-based structures, offering:
+
+*   Explicit state management for complex, multi-step reasoning flows.
+*   Fine-grained control over reasoning cycles.
+*   Robust tool integration and error handling capabilities.
+*   Streaming response support using Vertex AI.
+*   Includes a basic search tool to demonstrate tool usage.
+
+### CrewAI Coding Crew (`crewai_coding_crew`)
+
+This template combines [CrewAI](https://www.crewai.com/)'s multi-agent collaboration with LangGraph's conversational control to create an interactive coding assistant. It orchestrates specialized agents (e.g., Senior Engineer, QA Engineer) to understand requirements and generate code. Key features include:
+
+*   Interactive requirements gathering through natural dialogue (LangGraph).
+*   Collaborative code development by a crew of specialized AI agents (CrewAI).
+*   Sequential processing for tasks from requirements to implementation and QA.
+*   Ideal for complex tasks requiring delegation and simulating team collaboration.
+
+### Live API (`live_api`)
+
+Powered by Google Gemini, this template showcases a real-time, multimodal conversational RAG agent using the [Vertex AI Live API](https://cloud.google.com/vertex-ai/generative-ai/docs/live-api). Features include:
+
+*   Handles audio, video, and text interactions.
+*   Leverages tool calling.
+*   Real-time bidirectional communication via WebSockets for low-latency chat.
+*   Production-ready Python backend (FastAPI) and React frontend.
+*   Includes feedback collection capabilities.
+
+## Customizing Templates
+
+All templates are provided as starting points and are designed for customization:
+
+1.  Choose a template that most closely matches your needs.
+2.  Create a new agent instance based on the selected template.
+3.  Familiarize yourself with the code structure, focusing on the agent logic, tool definitions, and any UI components.
+4.  Modify and extend the code: adjust prompts, add or remove tools, integrate different data sources, change the reasoning logic, or update the framework versions as needed.
+
+Have fun building your agent!

docs/agents/overview.md

@@ -12,20 +12,21 @@ agent-starter-pack create PROJECT_NAME [OPTIONS]
 
 ### Arguments
 
-- `PROJECT_NAME`: Name of the project to create (must be 26 characters or less, will be converted to lowercase).
+- `PROJECT_NAME`: Name for your new agent project directory and base for resource naming.
+  *Note: This name will be converted to lowercase and must be 26 characters or less.*
 
 ### Options
 
 The following options will be prompted interactively if not provided via the command line:
 - `--agent`, `-a`: Agent name or number to use. Lists available agents if omitted.
 - `--deployment-target`, `-d`: Deployment target (`agent_engine` or `cloud_run`). Prompts if omitted.
-- `--datastore`, `-ds`: Type of datastore to use (`vertex_ai_search`, `vertex_ai_vector_search`). Prompted if `--include-data-ingestion` is specified or if the selected agent requires data ingestion, and this option is omitted.
-- `--region`: GCP region for deployment. Defaults to `us-central1`. Prompts for confirmation if not specified and `--auto-approve` is not used.
+- `--datastore`, `-ds`: Datastore for RAG agents (`vertex_ai_search` or `vertex_ai_vector_search`). Prompted if `--include-data-ingestion` is specified, or if the selected agent (e.g., `agentic_rag`) requires data ingestion, and this option is omitted.
+- `--region`: GCP region for deployment (default: `us-central1`). Prompts for confirmation if not specified and `--auto-approve` is not used.
 
-GCP account and project ID are detected automatically. You will be prompted to confirm or change them unless `--auto-approve` is used.
+GCP account and project ID are detected automatically (using your active `gcloud config` settings). You will be prompted to confirm or change them unless `--auto-approve` is used.
 
 Additional options:
-- `--include-data-ingestion`, `-i`: Include data ingestion pipeline components in the project. If specified without `--datastore`, you will be prompted to select a datastore. Some agents require data ingestion and will enable this automatically.
+- `--include-data-ingestion`, `-i`: Include data ingestion pipeline components (required by some agents like `agentic_rag`, which enable this automatically). If specified manually without `--datastore`, you will be prompted to select one.
 - `--debug`: Enable debug logging.
 - `--output-dir`, `-o`: Output directory for the project (default: current directory).
 - `--auto-approve`: Skip interactive confirmation prompts for GCP credentials and region.
@@ -42,4 +43,7 @@ agent-starter-pack create my-agent-project -a agentic_rag -d cloud_run --region
 
 # Create without interactive prompts (uses detected GCP credentials)
 agent-starter-pack create my-other-agent -a chat_agent -d agent_engine --auto-approve
+
+# Create in a specific output directory
+agent-starter-pack create my-specific-loc-agent -o ./my-agents/
 ```

docs/cli/create.md

@@ -1,6 +1,6 @@
 # CLI Reference
 
-This document provides an overview of the available CLI commands for managing your generative AI applications.
+The Agent Starter Pack provides a command-line interface (CLI) to create and setup Generative AI Agent templates in Google Cloud. 
 
 ## Available Commands