From 3e6a4c6fe7ff1fff625d1f478b2de4bdd312935a Mon Sep 17 00:00:00 2001
From: guiafonso-ol <guilherme.oliveira@azion.com>
Date: Thu, 13 Feb 2025 16:20:51 -0300
Subject: [PATCH 1/3] feat: refactor chatbot widget readme

---
 .../vue/vue3-ai-chatbot-widget/README.md      | 111 ++++++++++++++++--
 1 file changed, 102 insertions(+), 9 deletions(-)

diff --git a/templates/vue/vue3-ai-chatbot-widget/README.md b/templates/vue/vue3-ai-chatbot-widget/README.md
index 00cab679..75c8ded8 100644
--- a/templates/vue/vue3-ai-chatbot-widget/README.md
+++ b/templates/vue/vue3-ai-chatbot-widget/README.md
@@ -1,28 +1,121 @@
-# Vue3/Vite Boilerplate
+# Vue3 AI Chatbot Widget
 
-The **Vue3/Vite Boilerplate** accelerates the deployment of an application based on these frameworks directly on the edge.
+The **Vue3 AI Chatbot Widget** is the frontend application for the **LangGraph AI Agent Boilerplate**. It consists of the graphic interface to interact with the Artificial Intelligence agent created by that template.
 
-This repository is an example of the new GitHub repository created during the deployment. For a more detailed step-by-step to deploy this template through Azion's platform, check the [How to deploy edge applications with the Vue3/Vite Boilerplate](https://www.azion.com/en/documentation/products/guides/vue-vite-boilerplate/) guide.
+This repository is an example of the new GitHub repository created during the deployment. For a more detailed step-by-step to deploy the **LangGraph AI Agent Boilerplate** through Azion's platform, check the [How to deploy the LangGraph AI Agent Boilerplate](https://www.azion.com/en/documentation/products/guides/langgraph-ai-agent-boilerplate/) guide.
 
-This template uses Vue version `3.3.4` and Vite version `4.4.6`.
+This application uses Vue version `3.3.4`.
 
 ---
 
 ## Requirements
 
-Before using this template, you need to:
+Before using this application, you need to:
 
 - Have a [GitHub account](https://github.com/signup).
   - Every push will be deployed automatically to the main branch in this repository to keep your project updated.
 
-> **Note**: this template uses [Application Accelerator](https://www.azion.com/en/documentation/products/build/edge-application/application-accelerator/) and [Edge Functions](https://www.azion.com/en/documentation/products/build/edge-application/edge-functions/), and it could generate usage-related costs. Check the [pricing page](https://www.azion.com/en/pricing/) for more information.
+> **Note**: this template uses [Application Accelerator](https://www.azion.com/en/documentation/products/build/edge-application/application-accelerator/), [Edge Functions](https://www.azion.com/en/documentation/products/build/edge-application/edge-functions/), and [Edge SQL](https://www.azion.com/en/documentation/products/store/edge-sql/), and it could generate usage-related costs. Check the [pricing page](https://www.azion.com/en/pricing/) for more information.
 
 ---
 
 ## Deploy your own
 
-Deploy your own Vue3/Vite project with Azion.
+This application is designed to work together with the backend application for the **LangGraph AI Agent Boilerplate**. You can use the button below to deploy this template with both applications:
 
-[![Deploy Button](https://www.azion.com/button/)](https://console.azion.com/create/vitejs/vitejs-vue3-boilerplate "Deploy with Azion")
+[![Deploy Button](https://www.azion.com/button/)](https://console.azion.com/create/langgraph-ai-agent-boilerplate "Deploy with Azion")
 
-For a more detailed step-by-step, check the [documentation](https://www.azion.com/en/documentation/products/guides/vue-vite-boilerplate/).
\ No newline at end of file
+## Configuring the template
+
+After the deploy, the template creates two databases, one for conversation history and another for reference documents. The **Vue3 AI Chatbot Widget** provides a graphic interface to chat with your AI agent; the databases must be correctly configured to store the chat messages and provide the documents which will serve as the agent's reference.
+
+To start using your own documents, you must set the appropriate database by following these steps:
+
+1. Access the Github repository for the **backend application** created during the deployment. Its name will be similar to `<your-agent-name>-backend-agent`.
+
+2. You must have a `.env` file with your environment variables in it. If you want to create a new one, it must follow the structure below:
+
+```
+AZION_TOKEN=
+OPENAI_API_KEY=
+OPENAI_MODEL=
+EMBEDDING_MODEL=
+
+LANGSMITH_API_KEY=
+LANGCHAIN_PROJECT=
+LANGCHAIN_TRACING_V2=false
+
+MESSAGE_STORE_DB_NAME=
+MESSAGE_STORE_TABLE_NAME=
+
+VECTOR_STORE_DB_NAME=
+VECTOR_STORE_TABLE_NAME=
+```
+
+Note that not all environment variables are required. Check details on the table below.
+
+| Environment variable      | Description                                                                 | Required |
+|---------------------------|-----------------------------------------------------------------------------|----------|
+| AZION_TOKEN               | The token for authenticating with Azion's platform. | Yes |
+| OPENAI_API_KEY            | Your API key for accessing OpenAI services. | Yes |
+| OPENAI_MODEL              | The OpenAI model to be used for processing. If not set, defaults to `gpt-4o`. | No |
+| EMBEDDING_MODEL           | The model used for generating embeddings. If not set, defaults to `text-embedding-3-small`. To use a different model, you must create a database with columns configured for the same model. | No |
+| LANGSMITH_API_KEY         | API key for accessing Langsmith services. | No |
+| LANGCHAIN_PROJECT         | The Langchain project identifier. | No |
+| LANGCHAIN_TRACING_V2      | Enables or disables Langchain tracing (set to true or false). | No |
+| MESSAGE_STORE_DB_NAME     | The database name for storing conversation history messages. Default name: `<agent-name>-messagestore`. | Yes |
+| MESSAGE_STORE_TABLE_NAME  | The table name within the messages database for storing the conversation history. Default name: `messages`. | Yes |
+| VECTOR_STORE_DB_NAME      | The database name for storing your documents as vector embeddings. Default name: `<agent-name>-vectorstore`. | Yes |
+| VECTOR_STORE_TABLE_NAME   | The table name within the documents database for storing embeddings. Default name: `<vectors`. | Yes |
+
+:::tip
+You can use the [Azion EdgeSQL Shell](/en/documentation/products/store/sql/edge-sql-shell-commands/) to interact with your databases. This shell provides a command-line interface that allows you to better visualize your databases and tables and execute SQL commands directly from the terminal.
+:::
+
+3. Open the file `setup/setup.ts`. This file contains the function that sets up the databases, and you can edit it to match your requirements:
+  - You can change the names of environment variables to match your `.env` file if needed, or even pass some of them directly in the code.
+  - Edit the value of the constant `productDocs`. It uses by default the return of the function `getDocs`, which is configured in the boilerplate to process data from an example file. You can add your own documents file in the `setup` folder.
+  - The template automatically creates the databases during the deployment, but you can configure the function to create your database according to the environment variables. There are two options available in the code for doing this. They are written as commentaries and you can uncomment the one you prefer.
+
+    The first option uses a static factory method:
+
+```ts
+const vectorStore = await AzionVectorStore.createVectorStore(
+     embeddingModel,
+     {
+       dbName: VECTOR_STORE_DB_NAME,
+       tableName: VECTOR_STORE_TABLE_NAME
+     },
+     {
+       columns,
+       mode: "hybrid"
+     }
+   );
+```
+
+  Alternatively, you can choose to create the instance and setup the database separately:
+
+```ts 
+ const vectorStore = new AzionVectorStore(embeddingModel, {
+     dbName: VECTOR_STORE_DB_NAME,
+     tableName: VECTOR_STORE_TABLE_NAME
+   });
+   await vectorStore.setupDatabase({
+     columns,
+     mode: "hybrid"
+   }); 
+```
+
+4. Run the following command in the root directory of the project to run the function that sets up the database:
+
+```bash
+yarn setup
+```
+
+The reference documents database is now set and ready for your application to access it. Read the [backend application documentation](https://github.com/aziontech/azion-samples/tree/3cf53a690ac7f40508bc020adcfc61ba553d0b2f/templates/typescript/azion-react-agent) to see more details about configuring the project.
+
+:::note
+The template also creates a database for storing the messages exchanged with the agent. By default, it'll store messages for *14 days*.
+:::
+
+For a more detailed step-by-step, check the [documentation](https://www.azion.com/en/documentation/products/guides/langgraph-ai-agent-boilerplate/).
\ No newline at end of file

From a2ca66056817b60d5b47482b179eb4ed49d27bc9 Mon Sep 17 00:00:00 2001
From: guiafonso-ol <guilherme.oliveira@azion.com>
Date: Fri, 14 Feb 2025 11:41:22 -0300
Subject: [PATCH 2/3] fidx: small changes on naming

---
 templates/vue/vue3-ai-chatbot-widget/README.md | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/templates/vue/vue3-ai-chatbot-widget/README.md b/templates/vue/vue3-ai-chatbot-widget/README.md
index 75c8ded8..b5ae00bc 100644
--- a/templates/vue/vue3-ai-chatbot-widget/README.md
+++ b/templates/vue/vue3-ai-chatbot-widget/README.md
@@ -4,16 +4,17 @@ The **Vue3 AI Chatbot Widget** is the frontend application for the **LangGraph A
 
 This repository is an example of the new GitHub repository created during the deployment. For a more detailed step-by-step to deploy the **LangGraph AI Agent Boilerplate** through Azion's platform, check the [How to deploy the LangGraph AI Agent Boilerplate](https://www.azion.com/en/documentation/products/guides/langgraph-ai-agent-boilerplate/) guide.
 
-This application uses Vue version `3.3.4`.
+This template uses Vue version `3.3.4`.
 
 ---
 
 ## Requirements
 
-Before using this application, you need to:
+Before using this template, you need to:
 
 - Have a [GitHub account](https://github.com/signup).
   - Every push will be deployed automatically to the main branch in this repository to keep your project updated.
+- Have an [OpenAI](https://platform.openai.com/) API Key.
 
 > **Note**: this template uses [Application Accelerator](https://www.azion.com/en/documentation/products/build/edge-application/application-accelerator/), [Edge Functions](https://www.azion.com/en/documentation/products/build/edge-application/edge-functions/), and [Edge SQL](https://www.azion.com/en/documentation/products/store/edge-sql/), and it could generate usage-related costs. Check the [pricing page](https://www.azion.com/en/pricing/) for more information.
 
@@ -35,7 +36,7 @@ To start using your own documents, you must set the appropriate database by foll
 
 2. You must have a `.env` file with your environment variables in it. If you want to create a new one, it must follow the structure below:
 
-```
+```dotenv
 AZION_TOKEN=
 OPENAI_API_KEY=
 OPENAI_MODEL=
@@ -66,7 +67,7 @@ Note that not all environment variables are required. Check details on the table
 | MESSAGE_STORE_DB_NAME     | The database name for storing conversation history messages. Default name: `<agent-name>-messagestore`. | Yes |
 | MESSAGE_STORE_TABLE_NAME  | The table name within the messages database for storing the conversation history. Default name: `messages`. | Yes |
 | VECTOR_STORE_DB_NAME      | The database name for storing your documents as vector embeddings. Default name: `<agent-name>-vectorstore`. | Yes |
-| VECTOR_STORE_TABLE_NAME   | The table name within the documents database for storing embeddings. Default name: `<vectors`. | Yes |
+| VECTOR_STORE_TABLE_NAME   | The table name within the documents database for storing embeddings. Default name: `vectors`. | Yes |
 
 :::tip
 You can use the [Azion EdgeSQL Shell](/en/documentation/products/store/sql/edge-sql-shell-commands/) to interact with your databases. This shell provides a command-line interface that allows you to better visualize your databases and tables and execute SQL commands directly from the terminal.

From 05134b02d603e4568a1924c6d611fea0aaeaa8bb Mon Sep 17 00:00:00 2001
From: Guilherme Afonso Oliveira <guilherme.oliveira@azion.com>
Date: Fri, 14 Feb 2025 13:27:00 -0300
Subject: [PATCH 3/3] Apply suggestions from code review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Mariana Bellorín Aguilera <89138244+MarianaAguilera@users.noreply.github.com>
---
 templates/vue/vue3-ai-chatbot-widget/README.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/templates/vue/vue3-ai-chatbot-widget/README.md b/templates/vue/vue3-ai-chatbot-widget/README.md
index b5ae00bc..ad02a78b 100644
--- a/templates/vue/vue3-ai-chatbot-widget/README.md
+++ b/templates/vue/vue3-ai-chatbot-widget/README.md
@@ -26,9 +26,12 @@ This application is designed to work together with the backend application for t
 
 [![Deploy Button](https://www.azion.com/button/)](https://console.azion.com/create/langgraph-ai-agent-boilerplate "Deploy with Azion")
 
+
+---
+
 ## Configuring the template
 
-After the deploy, the template creates two databases, one for conversation history and another for reference documents. The **Vue3 AI Chatbot Widget** provides a graphic interface to chat with your AI agent; the databases must be correctly configured to store the chat messages and provide the documents which will serve as the agent's reference.
+After the deployment, the template creates two databases, one for conversation history and another for reference documents. The **Vue3 AI Chatbot Widget** provides a graphic interface to chat with your AI agent; the databases must be correctly configured to store the chat messages and provide the documents that will serve as the agent's reference.
 
 To start using your own documents, you must set the appropriate database by following these steps: