Using VertexAI Search to quickly create a search widget within our App

Published in

Google Cloud - Community

3 min readOct 17, 2023

Background

Last story I was learning a lot about embeddings and try to create a concept to have a search app to serve me information I want through GenAI Chat app. Now this small snippet is a comparison in how I can build the similar application (much better of course) in mere minutes. Please refer to the documentation for more detail informations.

Get started with Vertex AI Search | Vertex AI Search and Conversation | Google Cloud

Create a search app for a website, structured data, and unstructured data, then preview the results.

cloud.google.com

Concept

Now the concept is the same as the previous story, however I did not have to design all the resources and also connectivities. Hence I was able to create through VertexAI Search an app then integrate it on my app or just call it as an API.

Steps

[One] Definitely enable the API. Vertex AI Search and Conversation, BigQuery, Cloud Storage APIs

[Two] Start building the app by going to the Search and Conversation page.

We have some options, yet for this story choose Search

Set some parameters such as AppName and Location

Create data source which in this case I will use Cloud Storage

Select the location of GCS bucket and for this story I will use the Unstructured Documents

When all is well we can create the data stores and connect to our App

Select the Data store and wait till it finished processing our data

[Three] Lets test before we integrate it to our app by going to Preview tab

We got the response and also the citation

[Four] Lets integrate to our app by moving to the Integration tab and select the appropriate parameters. As this is only intended for a test so I can choose public access and later allow my domains for the widget.

What we need to do is actually copy the script and put it within our page. For this simple test I will use a simple flask server and then render the index.html with the code in it.

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/', methods = ['POST', 'GET'])
def embed():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True, host="0.0.0.0", port=int(os.environ.get("PORT", 8080)))

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FlaskApp</title>
</head>
<body>
    <!-- Widget JavaScript bundle -->
    <script src="https://cloud.google.com/ai/gen-app-builder/client?hl=en_US"></script>

    <!-- Search widget element is not visible by default -->
    <gen-search-widget
    configId=""
    triggerId="searchWidgetTrigger">
    </gen-search-widget>

    <!-- Element that opens the widget on click. It does not have to be an input -->
    <input placeholder="Search here" id="searchWidgetTrigger" />
</body>
</html>

And just lets try to test it out by running the flask server

Now the flask server may only have a small search icon and run the widget on top of our app, however to think how fast I can create this app is amazing. It is very useful when I want to create a prototype or even just use it directly rather than create from scratch. What do you think? Have you tried the VertexAI Search ?