AI-Powered Product Search Engine

Build a semantic product search engine using Google Cloud Agent Search.

Introduction

30 Second Summary

Every time you search for a product online, you expect the results to understand what you mean. Typing "wireless headphones under $50" should return headphones, not random electronics.

In this project, you will build an AI-powered product search engine using Vertex AI Search on Google Cloud. You'll create a product catalog, upload it to the cloud, and use Agent Search to power a search app that handles natural language queries.

What You'll Build

You'll use Agent Search to ingest a structured product catalog stored in Cloud Storage and power semantic search that goes beyond simple keyword matching.

By the end of this project, you'll have:

  • A structured product catalog in NDJSON format uploaded to Cloud Storage.
  • An Agent Search data store with your product data indexed and searchable.
  • A working search app with Enterprise edition features that handles queries like "wireless headphones under $50".
  • Secret Mission: Add an orders dataset and enable AI-generated answer summaries for your search results.

Are there any prerequisites?

No prerequisites are needed. This guide walks you through everything from scratch, including setting up your Google Cloud account and Free Trial.

Set Up Google Cloud

Your search engine needs a cloud platform to handle semantic understanding, ranking, and serving search results. Google Cloud provides all of this through its Agent Search service.

Before you can use Agent Search, you need a Google Cloud account and a project with the right APIs enabled. In this step, you will set all of that up using the Free Trial.

In this step, get ready to:
  • Create a Google Cloud account with the Free Trial.
  • Enable the APIs your search engine needs.
  • Verify that everything is set up correctly.
Create your Google Cloud account

The Google Cloud Free Trial gives you $300 in credit for 90 days. This is more than enough to complete this project at no cost.

  • Open your browser and navigate to cloud.google.com/free.
  • Click Get started for free.
  • Sign in with your Google account (Gmail).
  • Select your country.
  • Accept the Terms of Service.
  • Enter a credit card or payment method for identity verification.

Why do I need a credit card?

Google uses the credit card for identity verification only. You will not be charged.

The Free Trial billing account auto-closes when your credits run out or 90 days pass. You will not be charged unless you manually upgrade to a paid account.

Once verified, the Google Cloud Console loads. You should see your $300 credit balance in the top banner.

Having trouble signing up?

Make sure you are signing up through cloud.google.com/free. The Free Trial is only available for new Google Cloud customers.

If you have used Google Cloud before, you may not be eligible for the $300 credit. You can still follow along using the always-free tier products.

Help me troubleshoot my Google Cloud Free Trial signup.

Create a project and enable APIs

When you sign up, Google Cloud automatically creates a default project (e.g., "My First Project"). This project is the container for all the resources you will build in this tutorial.

Your search engine needs three APIs enabled to work. Let's turn them on now.

  • In the Google Cloud Console, type AI Applications in the search bar at the top of the page.
  • Select AI Applications from the search results.
  • When prompted, click Continue and activate the API to enable the Agent Search (Discovery Engine) API.

What is Agent Search?

Agent Search (also known as Vertex AI Search) is Google Cloud's managed search service. It handles semantic understanding, ranking, spell correction, and auto-suggestions out of the box.

You do not need to write any machine learning code. Agent Search does the heavy lifting for you.

Now let's enable the remaining two APIs your project needs.

  • In the Google Cloud Console, search for APIs & Services in the top search bar and select it.
  • Click Enable APIs and Services at the top of the page.
  • Search for BigQuery API in the API library search field.
  • Click on the BigQuery API result.
  • Click Enable.
  • Click the back arrow in your browser to return to the API library.
  • Search for Cloud Storage in the API library search field.
  • Click on the Cloud Storage API result.
  • Click Enable.

Already see the API enabled?

For new projects, the BigQuery API is often enabled automatically. If you see a Manage button instead of Enable, the API is already active. Skip it and move on to the next one.

Can't find the API in the library?

Make sure you are searching in the API library page, not the main console search bar. The API library has its own search field for finding APIs.

If you see a permissions error, confirm that you are working in the project that was created during your Free Trial signup.

Help me enable the BigQuery and Cloud Storage APIs in Google Cloud Console.

Verify your setup

Let's confirm everything is ready before moving on.

  • Search for AI Applications in the top search bar and select it.
  • Confirm the AI Applications page loads without any errors. You should see options like Data Stores in the left navigation and Create App available on the page.
  • Check that your project shows the Free Trial credit by looking at the top banner of the console.

AI Applications page showing an error?

If you see an API-related error, go back to the APIs & Services page and search for Discovery Engine API. Make sure it shows as enabled.

Help me fix errors on the AI Applications page in Google Cloud Console.

Your Google Cloud environment is ready. Next up, you will create the product catalog dataset that your search engine will use to find and rank results.

Prepare Your Product Catalog Data

Your Google Cloud account and project are all set up. The next step is to give your search engine something to search through.

Every search engine needs a dataset to index. In this step, you'll create a product catalog file and upload it to the cloud so Agent Search can access and index it later.

In this step, get ready to:
  • Create a product catalog file in NDJSON format.
  • Upload the catalog to a Cloud Storage bucket.
Create the NDJSON product catalog file

Agent Search requires structured data in a specific format called NDJSON. Each line in an NDJSON file is a standalone JSON object representing one product.

What is NDJSON?

NDJSON stands for Newline Delimited JSON. Instead of wrapping all your data in a single JSON array, each line is its own complete JSON object.

This makes it easy to process large datasets line by line. Each file must be under 2 GB, and each line must be under 1 MB.

  • Switch to VS Code.
  • Create a new file by pressing Cmd+N (macOS) or Ctrl+N (Windows).
  • Save the file as products.ndjson by pressing Cmd+S (macOS) or Ctrl+S (Windows). Save it to a location you can easily find, like your Desktop.
  • Copy and paste the following product catalog data into products.ndjson:
{"id": "prod-001", "title": "Wireless Bluetooth Headphones", "description": "Over-ear wireless headphones with active noise cancellation and 30-hour battery life", "category": "Electronics", "price": 49.99, "brand": "SoundWave", "in_stock": true}
{"id": "prod-002", "title": "Portable Camping Tent", "description": "Lightweight 2-person tent with waterproof coating, perfect for hiking and outdoor adventures", "category": "Outdoor", "price": 89.99, "brand": "TrailMaster", "in_stock": true}
{"id": "prod-003", "title": "Stainless Steel Water Bottle", "description": "Insulated 32oz water bottle that keeps drinks cold for 24 hours or hot for 12 hours", "category": "Outdoor", "price": 24.99, "brand": "HydroFlow", "in_stock": true}
{"id": "prod-004", "title": "Bluetooth Portable Speaker", "description": "Waterproof portable speaker with 360-degree sound and 18-hour battery life", "category": "Electronics", "price": 39.99, "brand": "SoundWave", "in_stock": true}
{"id": "prod-005", "title": "Non-Stick Cooking Pan Set", "description": "Set of 3 non-stick frying pans in 8, 10, and 12 inch sizes with ergonomic handles", "category": "Kitchen", "price": 54.99, "brand": "ChefPro", "in_stock": true}
{"id": "prod-006", "title": "LED Camping Lantern", "description": "Rechargeable LED lantern with 4 brightness modes and emergency SOS signal", "category": "Outdoor", "price": 19.99, "brand": "TrailMaster", "in_stock": true}
{"id": "prod-007", "title": "Wireless Charging Pad", "description": "Fast wireless charger compatible with all Qi-enabled devices, slim design", "category": "Electronics", "price": 15.99, "brand": "TechEdge", "in_stock": true}
{"id": "prod-008", "title": "Ceramic Coffee Mug Set", "description": "Set of 4 handcrafted ceramic mugs in assorted colors, microwave and dishwasher safe", "category": "Kitchen", "price": 29.99, "brand": "ArtisanHome", "in_stock": true}
{"id": "prod-009", "title": "Hiking Backpack 40L", "description": "Ergonomic hiking backpack with rain cover, multiple compartments, and hydration sleeve", "category": "Outdoor", "price": 74.99, "brand": "TrailMaster", "in_stock": true}
{"id": "prod-010", "title": "Smart Fitness Watch", "description": "Fitness tracker with heart rate monitor, GPS, sleep tracking, and 7-day battery life", "category": "Electronics", "price": 129.99, "brand": "TechEdge", "in_stock": false}
{"id": "prod-011", "title": "Bamboo Cutting Board Set", "description": "Set of 3 eco-friendly bamboo cutting boards in small, medium, and large sizes", "category": "Kitchen", "price": 22.99, "brand": "ArtisanHome", "in_stock": true}
{"id": "prod-012", "title": "Compact Binoculars", "description": "10x42 high-definition binoculars with carrying case for bird watching and outdoor events", "category": "Outdoor", "price": 45.99, "brand": "TrailMaster", "in_stock": true}
{"id": "prod-013", "title": "USB-C Hub Adapter", "description": "7-in-1 USB-C hub with HDMI, USB 3.0, SD card reader, and power delivery", "category": "Electronics", "price": 34.99, "brand": "TechEdge", "in_stock": true}
{"id": "prod-014", "title": "Silicone Kitchen Utensil Set", "description": "10-piece heat-resistant silicone cooking utensil set with wooden handles", "category": "Kitchen", "price": 27.99, "brand": "ChefPro", "in_stock": true}
{"id": "prod-015", "title": "Solar Power Bank", "description": "20000mAh portable solar charger with dual USB ports and LED flashlight for outdoor use", "category": "Electronics", "price": 32.99, "brand": "TechEdge", "in_stock": true}

What does this data include?

  • id gives each product a unique identifier.
  • title and description are the fields Agent Search will use to understand what each product is about. You'll map these to key properties later.
  • category, price, brand, and in_stock give your search engine extra signals to filter and rank results.
  • The 15 products span three categories: Electronics, Outdoor, and Kitchen. This variety helps you test different types of search queries later.
  • Save products.ndjson.
  • Confirm your file has 15 lines in the editor, each starting with { and ending with }.

Seeing yellow or red warnings in VS Code?

VS Code may show warnings on your NDJSON file because its JSON validator expects a single JSON value per file. These warnings don't affect your data. Your file is valid as long as each line is a complete JSON object.

You can safely ignore the warnings, or click the language mode indicator in the bottom-right corner of VS Code and switch it to Plain Text to hide them.

Help me check if my products.ndjson file is formatted correctly.

✔️ Awesome, I've got everything!

Great. Double check you've saved products.ndjson before moving on.

ⓧ I'd like to double check the full code

Here is the complete products.ndjson file. Compare it line by line with yours.

{"id": "prod-001", "title": "Wireless Bluetooth Headphones", "description": "Over-ear wireless headphones with active noise cancellation and 30-hour battery life", "category": "Electronics", "price": 49.99, "brand": "SoundWave", "in_stock": true}
{"id": "prod-002", "title": "Portable Camping Tent", "description": "Lightweight 2-person tent with waterproof coating, perfect for hiking and outdoor adventures", "category": "Outdoor", "price": 89.99, "brand": "TrailMaster", "in_stock": true}
{"id": "prod-003", "title": "Stainless Steel Water Bottle", "description": "Insulated 32oz water bottle that keeps drinks cold for 24 hours or hot for 12 hours", "category": "Outdoor", "price": 24.99, "brand": "HydroFlow", "in_stock": true}
{"id": "prod-004", "title": "Bluetooth Portable Speaker", "description": "Waterproof portable speaker with 360-degree sound and 18-hour battery life", "category": "Electronics", "price": 39.99, "brand": "SoundWave", "in_stock": true}
{"id": "prod-005", "title": "Non-Stick Cooking Pan Set", "description": "Set of 3 non-stick frying pans in 8, 10, and 12 inch sizes with ergonomic handles", "category": "Kitchen", "price": 54.99, "brand": "ChefPro", "in_stock": true}
{"id": "prod-006", "title": "LED Camping Lantern", "description": "Rechargeable LED lantern with 4 brightness modes and emergency SOS signal", "category": "Outdoor", "price": 19.99, "brand": "TrailMaster", "in_stock": true}
{"id": "prod-007", "title": "Wireless Charging Pad", "description": "Fast wireless charger compatible with all Qi-enabled devices, slim design", "category": "Electronics", "price": 15.99, "brand": "TechEdge", "in_stock": true}
{"id": "prod-008", "title": "Ceramic Coffee Mug Set", "description": "Set of 4 handcrafted ceramic mugs in assorted colors, microwave and dishwasher safe", "category": "Kitchen", "price": 29.99, "brand": "ArtisanHome", "in_stock": true}
{"id": "prod-009", "title": "Hiking Backpack 40L", "description": "Ergonomic hiking backpack with rain cover, multiple compartments, and hydration sleeve", "category": "Outdoor", "price": 74.99, "brand": "TrailMaster", "in_stock": true}
{"id": "prod-010", "title": "Smart Fitness Watch", "description": "Fitness tracker with heart rate monitor, GPS, sleep tracking, and 7-day battery life", "category": "Electronics", "price": 129.99, "brand": "TechEdge", "in_stock": false}
{"id": "prod-011", "title": "Bamboo Cutting Board Set", "description": "Set of 3 eco-friendly bamboo cutting boards in small, medium, and large sizes", "category": "Kitchen", "price": 22.99, "brand": "ArtisanHome", "in_stock": true}
{"id": "prod-012", "title": "Compact Binoculars", "description": "10x42 high-definition binoculars with carrying case for bird watching and outdoor events", "category": "Outdoor", "price": 45.99, "brand": "TrailMaster", "in_stock": true}
{"id": "prod-013", "title": "USB-C Hub Adapter", "description": "7-in-1 USB-C hub with HDMI, USB 3.0, SD card reader, and power delivery", "category": "Electronics", "price": 34.99, "brand": "TechEdge", "in_stock": true}
{"id": "prod-014", "title": "Silicone Kitchen Utensil Set", "description": "10-piece heat-resistant silicone cooking utensil set with wooden handles", "category": "Kitchen", "price": 27.99, "brand": "ChefPro", "in_stock": true}
{"id": "prod-015", "title": "Solar Power Bank", "description": "20000mAh portable solar charger with dual USB ports and LED flashlight for outdoor use", "category": "Electronics", "price": 32.99, "brand": "TechEdge", "in_stock": true}
Upload your data to Cloud Storage

Your product catalog needs to live in Cloud Storage so Agent Search can access it. You'll create a storage bucket and upload your file.

  • Switch to the Google Cloud Console in your browser.
  • Search for Cloud Storage in the top search bar and select it.
  • Click Create to start creating a new bucket.
  • In the Name your bucket field, enter a globally unique name (e.g., product-search-data-yourname).
  • Click Continue through the remaining sections, keeping all defaults (Multi-region location type, Standard storage class).
  • Click Create.

Why does the bucket name need to be globally unique?

Every Cloud Storage bucket name must be unique across all of Google Cloud, not just your account. Adding your name or a random string to the bucket name helps avoid naming conflicts with other users.

Prompted about public access prevention?

If you see a dialog about public access prevention or access control, accept the defaults and continue. Your bucket does not need to be publicly accessible for this project.

  • Inside your new bucket, click Upload files.
  • Select the products.ndjson file from your computer.
  • Wait for the upload to complete.
  • You should see products.ndjson listed as a file in your bucket.
  • Click on the file name to verify it contains your product data.

Don't see your file in the bucket?

Make sure you saved products.ndjson in VS Code before uploading. Uploading an unsaved file results in missing or empty data.

Double check that you're looking at the correct bucket. Your bucket name should match what you entered earlier.

Help me troubleshoot my Cloud Storage file upload.

Your product data is in the cloud and ready to be indexed. Next up, you'll create a data store in Agent Search and feed it your catalog.

Create a Data Store and Ingest Your Products

Your product catalog is uploaded to Cloud Storage and ready to go. Now it's time to connect that data to Agent Search so it can be indexed and searched with natural language queries.

In this step, you'll create a data store that points to your NDJSON file, map key fields so Agent Search understands the structure of your products, and verify that all 15 products are successfully imported.

In this step, get ready to:
  • Create an Agent Search data store linked to your Cloud Storage bucket.
  • Map key properties so Agent Search understands your product fields.
  • Verify that all products are imported and indexed.
Create a structured data store
  • Return to the AI Applications page in the Google Cloud Console.
  • Click Data Stores in the left navigation.
  • Click Create data store.
  • In the Select a data source pane, select Cloud Storage.
  • In the Import data from Cloud Storage pane, select Structured data (JSONL).
  • Make sure File is selected.
  • In the gs:// field, enter the path to your uploaded file:
[[BUCKET_NAME="your-bucket-name"]]/products.ndjson
  • Click Continue.

What is a data store?

Agent Search uses data stores to hold and index the content you want to search. Each data store is linked to a single data source, like your Cloud Storage bucket.

Once your data is imported, Agent Search builds an index that powers fast, intelligent search queries across all your products.

Map key properties and configure the data store

Agent Search auto-detects the schema from your NDJSON file. You'll see a list of fields detected from your data, like title, description, category, and price.

  • In the detected fields list, find the title field and assign it to the title key property.
  • Find the description field and assign it to the description key property.
  • Click Continue.
  • In the Configure your data store pane, select global (Global) as the location.
  • Enter Product Catalog as the display name.
  • Note the generated data store ID displayed below the name field. You will need this in a later step.
  • Click Create.

Why map key properties?

Key properties tell Agent Search the semantic role of each field. Mapping title to the title key property means Agent Search treats that field as the name of each document. Mapping description tells it where to find the detailed content.

These mappings improve search relevance because Agent Search knows which fields matter most when ranking results. Each data store can only be attached to one app and cannot be removed later, so it's worth getting these mappings right.

Verify data ingestion

After creating the data store, Agent Search begins importing your products from Cloud Storage. This typically takes 2-3 minutes.

  • On your data store's Data page, click the Activity tab.
  • Wait for the Status column to display Import completed. Click Refresh if the status still shows in progress.
  • Click the Documents tab to confirm all 15 products were imported.

Import taking longer than expected?

  • Make sure you selected Structured data (JSONL) when creating the data store. Selecting the wrong format can cause import failures.
  • Verify that your products.ndjson file has exactly one JSON object per line with no trailing commas or blank lines at the end.
  • Double check that the gs:// path matches your actual bucket name and file name exactly.
  • My Agent Search data import is stuck or showing an error. How do I troubleshoot?

Your products are indexed and ready to be searched. Next up, you'll create a search app and test it with real natural language queries.

Build and Configure Your Search App

Your product data is indexed and ready to go. In the previous step, you created a data store and confirmed all 15 products were imported successfully.

Now it's time to build the search app that sits on top of your data store. The search app is the layer that handles queries, ranks results, and powers the search experience your users interact with.

In this step, get ready to:
  • Create an Agent Search app with Enterprise edition features.
  • Test semantic search queries in the Preview panel.
  • Review widget configuration and autocomplete settings.
Create the search app

A search app connects to your data store and provides the interface for running queries against your indexed data. You need to create one with Enterprise edition features turned on to access structured data search and enhanced capabilities.

  • Return to the AI Applications page in the Google Cloud Console.
  • Click Create App.
  • Under Site search with AI mode, click Create.
  • Make sure the Enterprise edition features toggle is turned on.

Why Enterprise edition?

Enterprise edition features unlock enhanced search capabilities for your app. These include structured data search, website search, and the ability to choose a region for your app.

Your project's usage is covered by the Free Trial credits and the 10,000 free queries per month included with Agent Search.

  • In the Your app name field, enter Product Search Engine.
  • In the External name of your company or organization field, enter Cymbal Store.
  • Select global (Global) as the location.
  • Click Continue.
  • In the list of data stores, select the Product Catalog data store you created earlier.
  • Click Create.

Data stores are permanent

A data store can be attached to only one app and cannot be removed from the app later. Make sure you select the correct data store before clicking Create.

After clicking Create, the console takes you to your new search app's overview page.

Don't see your data store in the list?

Make sure you selected global (Global) as the location. Your data store was created in the global region, so the search app must use the same region to see it.

help me find my data store when creating an Agent Search app

Preview and test your search

The Preview panel lets you run queries against your indexed products directly in the console. This is the fastest way to verify your search app is working before deploying it anywhere.

  • Click Preview in the left navigation menu.
  • In the search bar, type wireless headphones and press Enter.

You should see results that include headphone and audio products from your catalog, like the Wireless Bluetooth Headphones and the Bluetooth Portable Speaker.

  • Try searching for outdoor camping gear under $100 to test price and category understanding.
  • Try searching for kitchen accessories to test category search.

What is semantic search?

Notice how Agent Search returns products that are semantically relevant, not just exact keyword matches. Searching for "outdoor camping gear" returns tents, lanterns, and backpacks even though none of them contain the exact phrase "camping gear" in their title.

Agent Search understands the intent behind your query and matches it to products with related meanings. This is what makes it more powerful than a simple keyword filter.

Configure search widget settings

The Configurations section controls how search results and autocomplete suggestions appear in the search widget. These settings affect the user experience when the widget is deployed on a web page.

  • In the left navigation, click Configurations.
  • On the UI tab, review the available configuration options for the search widget. These include result display settings and autocomplete behavior.
  • Click the Autocomplete tab to review autocomplete settings.

How does autocomplete work?

Autocomplete suggestions are generated based on your document content and search history. As users type a query, the widget suggests relevant completions to help them find products faster.

  • If you make any changes, click Save and publish.

Your search app is live and returning relevant results. Next up, you'll deploy the search widget on a local HTML page so users can search your catalog from a web browser.

Deploy the Search Widget on a Web Page

Your search app is live and returning relevant results in the console. Now it's time to see how that search experience can be embedded on a web page.

In this step, you'll grab the widget code snippet from the Integration page, build a simple HTML page to host it, and run final end-to-end tests to confirm your semantic search handles a variety of query types.

In this step, get ready to:
  • Retrieve the search widget code from the Integration page.
  • Create a local HTML page with the widget container.
  • Run end-to-end semantic search tests in the Preview panel.
Get the widget code

Agent Search provides a ready-made code snippet for embedding your search widget on any web page. You'll find it on the Integration page of your app.

  • In the left navigation of your app, click Integration.
  • Make sure the Widget tab is selected.
  • Look for the code snippet in the Copy the following code to your web application section.

This snippet contains a custom HTML element that powers the search interface. You'll reference it in the HTML page you build next.

What is the search widget?

The search widget is a pre-built web component provided by Agent Search. It handles the search bar, autocomplete, and result display automatically.

For production deployment on a live domain, the widget requires JWT or OAuth authorization. For this project, you'll test your search using the Console Preview panel instead, which works without any authorization setup.

Create a local HTML page with the widget

Now you'll build a simple web page that serves as a template for embedding the search widget. This page includes a styled container where the widget code snippet would go in a production deployment.

  • Switch back to VS Code.
  • Create a new file called search.html in the same folder as your products.ndjson file.
  • Add the following code to search.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Search Engine</title>
    <!-- Styles for the page layout and widget container -->
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 900px;
            margin: 0 auto;
            padding: 40px 20px;
            background-color: #f5f5f5;
        }
        h1 {
            text-align: center;
            color: #1a73e8;
        }
        p {
            text-align: center;
            color: #555;
        }
        /* Container that will hold the search widget */
        .widget-container {
            margin-top: 30px;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        /* Info box explaining widget setup */
        .note {
            margin-top: 20px;
            padding: 15px;
            background-color: #e8f0fe;
            border-left: 4px solid #1a73e8;
            border-radius: 4px;
            font-size: 14px;
            color: #333;
        }
    </style>
</head>
<body>
    <h1>Product Search Engine</h1>
    <p>Search our product catalog using natural language queries</p>

    <!-- Widget container: paste your Agent Search widget code here -->
    <div class="widget-container">
        <!-- Replace the element below with the widget code from your Agent Search Integration page -->
        <!-- Example: <gen-search-widget configId="your-config-id" triggerId="searchWidgetTrigger"></gen-search-widget> -->
        <p class="note">
            To embed the live search widget, copy the code snippet from your Agent Search app's
            Integration page in the Google Cloud Console and paste it here. The widget requires
            JWT or OAuth authorization for production deployment. For testing, use the Preview
            panel in the Google Cloud Console.
        </p>
    </div>
</body>
</html>

What does this code do?

  • The <style> block creates a clean, centered layout with a light gray background. The .widget-container class gives the search area a white card look with rounded corners and a subtle shadow.
  • The .note class styles the informational message with a blue left border, matching Google Cloud's color scheme.
  • The HTML comments show exactly where you would paste the <gen-search-widget> element from the Integration page for a production deployment.
  • Save search.html.
  • Open search.html in your browser by double-clicking the file in Finder (macOS) or File Explorer (Windows). You should see a centered heading that says "Product Search Engine" and a blue info box explaining the widget setup.

Page looks blank or unstyled?

  • Make sure you saved search.html before opening it in your browser.
  • Check that the opening <!DOCTYPE html> tag is on the very first line with no extra spaces before it.
  • Confirm that every opening tag (<style>, <div>) has a matching closing tag.

Help me debug my search.html page layout

✔️ Awesome, I've got everything!

Great. Make sure you've saved search.html before moving on.

ⓧ I'd like to double check the full code

Here is the complete search.html file. Compare your code against this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Search Engine</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 900px;
            margin: 0 auto;
            padding: 40px 20px;
            background-color: #f5f5f5;
        }
        h1 {
            text-align: center;
            color: #1a73e8;
        }
        p {
            text-align: center;
            color: #555;
        }
        .widget-container {
            margin-top: 30px;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .note {
            margin-top: 20px;
            padding: 15px;
            background-color: #e8f0fe;
            border-left: 4px solid #1a73e8;
            border-radius: 4px;
            font-size: 14px;
            color: #333;
        }
    </style>
</head>
<body>
    <h1>Product Search Engine</h1>
    <p>Search our product catalog using natural language queries</p>

    <div class="widget-container">
        <!-- Replace the element below with the widget code from your Agent Search Integration page -->
        <!-- Example: <gen-search-widget configId="your-config-id" triggerId="searchWidgetTrigger"></gen-search-widget> -->
        <p class="note">
            To embed the live search widget, copy the code snippet from your Agent Search app's
            Integration page in the Google Cloud Console and paste it here. The widget requires
            JWT or OAuth authorization for production deployment. For testing, use the Preview
            panel in the Google Cloud Console.
        </p>
    </div>
</body>
</html>
Test and verify the complete search experience

The real test of your search engine is whether it understands the intent behind different types of queries. The Preview panel in the Google Cloud Console lets you run these tests without any authorization setup.

  • Return to the Google Cloud Console.
  • In the left navigation of your app, click Preview.
  • Test a product name search by typing bluetooth speaker in the search bar and pressing Enter.
  • Test a category-based search by typing electronics and pressing Enter.
  • Test a natural language search by typing something to take on a camping trip and pressing Enter.

Each query should return semantically relevant products. For example, "something to take on a camping trip" should return outdoor gear like tents, lanterns, and backpacks.

Why do natural language queries work?

Agent Search goes beyond simple keyword matching. It uses semantic understanding to connect the meaning of your query to product descriptions.

A query like "something to take on a camping trip" doesn't match any product title exactly. Agent Search understands the intent and returns outdoor products because their descriptions mention hiking, outdoor adventures, and camping.

Search results look irrelevant?

  • Make sure you are searching in the correct app. Check that the app name at the top of the page says "Product Search Engine".
  • Confirm your data store import completed successfully. Go to Data Stores in the left navigation, click your data store, and check the Activity tab for "Import completed" status.
  • If you just finished importing data, wait a minute and try again. Indexing can take a short time to complete.

Help me troubleshoot my Agent Search results

Secret mission

Add Orders Data and Enable AI Answers

Your product search engine handles catalog queries. Now, add a second dataset of customer orders and unlock AI-generated answer summaries that synthesize results into natural language responses.

Clean Up Your Resources

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project's resources stay well within Google Cloud's free tier limits, so there are no ongoing charges for the amount of data and queries used here.

Resources you used:

  • 1 Cloud Storage bucket containing products.ndjson and orders.ndjson.
  • Agent Search data stores (Product Catalog, and Order History if you completed the Secret Mission).
  • Agent Search apps (Product Search Engine, and Orders Search if you completed the Secret Mission).
  • Local files: products.ndjson, search.html, and orders.ndjson.

Keep everything running

No action needed. Choose this if you plan to keep experimenting with your search apps or want to add more data.

  • Your Agent Search apps include 10,000 free queries per month. The sample data you indexed is well under the 10 GiB free index storage tier.
  • Your Cloud Storage bucket stores only two small files, which falls well within the free storage tier.
  • Your $300 Free Trial credit covers any additional usage for 90 days from signup.

Pause - I'll come back to this later

There is no dedicated pause option for Agent Search. Data stores remain active, but you are only charged when queries are made against them.

  • Your data stores and apps will stay in place. As long as you stay under 10,000 queries per month and 10 GiB of index storage, there are no charges.
  • You can delete the local files (products.ndjson, search.html, orders.ndjson) from your computer if you want to free up disk space. The data is already stored in Cloud Storage and your data stores.

Delete - I don't want to use this again

Remove all project resources to avoid any future charges. Follow these steps in order, since data stores are permanently attached to their apps.

  • Navigate to the AI Applications page in the Google Cloud Console.
  • Select your Product Search Engine app. If you completed the Secret Mission, also select your Orders Search app.
  • Delete the selected apps.
  • Click Data Stores in the left navigation.
  • Select and delete the Product Catalog data store. If you completed the Secret Mission, also delete the Order History data store.
  • Navigate to Cloud Storage in the Google Cloud Console.
  • Select your bucket (e.g., product-search-data-yourname) and delete it along with its contents.
  • Delete the local files (products.ndjson, search.html, and orders.ndjson) from your computer.

Created this project just for the tutorial?

You can delete the entire Google Cloud project instead of removing each resource individually. This removes all resources, APIs, and billing associations in one step.

Nice Work!

Nice Work!

Nice work! You've just built an AI-powered product search engine using Google Cloud's Agent Search that understands natural language queries over a product catalog.

You've learned how to:

  • Created a structured product catalog in NDJSON format, uploaded it to Cloud Storage, and ingested it into an Agent Search data store with key property mappings.
  • Built a search app with Enterprise edition features that returns semantically relevant results for natural language queries like "outdoor camping gear under $100".
  • Explored the search widget integration for embedding AI-powered search into a web page.
  • Secret Mission: Added an orders dataset as a second data store and enabled AI-generated answer summaries with generative responses.

Ready to quiz yourself?