Skip to content

Commit a0b36a5

Browse files
PedroMiolaSilvaPedroMiolaSilva
authored
Merge pull request #227 from aziontech/EDU-6160-langgraph-readme
[EDU-6160] Update LangGraph AI Agent Boilerplate readme
2 parents affe17b + 05134b0 commit a0b36a5

File tree

1 file changed

+105
-8
lines changed
  • templates/vue/vue3-ai-chatbot-widget

1 file changed

+105
-8
lines changed

‎templates/vue/vue3-ai-chatbot-widget/README.md

+105-8
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
# Vue3/Vite Boilerplate
1+
# Vue3 AI Chatbot Widget
22

3-
The **Vue3/Vite Boilerplate** accelerates the deployment of an application based on these frameworks directly on the edge.
3+
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.
44

5-
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.
5+
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.
66

7-
This template uses Vue version `3.3.4` and Vite version `4.4.6`.
7+
This template uses Vue version `3.3.4`.
88

99
---
1010

@@ -14,15 +14,112 @@ Before using this template, you need to:
1414

1515
- Have a [GitHub account](https://github.com/signup).
1616
- Every push will be deployed automatically to the main branch in this repository to keep your project updated.
17+
- Have an [OpenAI](https://platform.openai.com/) API Key.
1718

18-
> **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.
19+
> **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.
1920
2021
---
2122

2223
## Deploy your own
2324

24-
Deploy your own Vue3/Vite project with Azion.
25+
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:
2526

26-
[![Deploy Button](https://www.azion.com/button/)](https://console.azion.com/create/vitejs/vitejs-vue3-boilerplate "Deploy with Azion")
27+
[![Deploy Button](https://www.azion.com/button/)](https://console.azion.com/create/langgraph-ai-agent-boilerplate "Deploy with Azion")
2728

28-
For a more detailed step-by-step, check the [documentation](https://www.azion.com/en/documentation/products/guides/vue-vite-boilerplate/).
29+
30+
---
31+
32+
## Configuring the template
33+
34+
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.
35+
36+
To start using your own documents, you must set the appropriate database by following these steps:
37+
38+
1. Access the Github repository for the **backend application** created during the deployment. Its name will be similar to `<your-agent-name>-backend-agent`.
39+
40+
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:
41+
42+
```dotenv
43+
AZION_TOKEN=
44+
OPENAI_API_KEY=
45+
OPENAI_MODEL=
46+
EMBEDDING_MODEL=
47+
48+
LANGSMITH_API_KEY=
49+
LANGCHAIN_PROJECT=
50+
LANGCHAIN_TRACING_V2=false
51+
52+
MESSAGE_STORE_DB_NAME=
53+
MESSAGE_STORE_TABLE_NAME=
54+
55+
VECTOR_STORE_DB_NAME=
56+
VECTOR_STORE_TABLE_NAME=
57+
```
58+
59+
Note that not all environment variables are required. Check details on the table below.
60+
61+
| Environment variable | Description | Required |
62+
|---------------------------|-----------------------------------------------------------------------------|----------|
63+
| AZION_TOKEN | The token for authenticating with Azion's platform. | Yes |
64+
| OPENAI_API_KEY | Your API key for accessing OpenAI services. | Yes |
65+
| OPENAI_MODEL | The OpenAI model to be used for processing. If not set, defaults to `gpt-4o`. | No |
66+
| 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 |
67+
| LANGSMITH_API_KEY | API key for accessing Langsmith services. | No |
68+
| LANGCHAIN_PROJECT | The Langchain project identifier. | No |
69+
| LANGCHAIN_TRACING_V2 | Enables or disables Langchain tracing (set to true or false). | No |
70+
| MESSAGE_STORE_DB_NAME | The database name for storing conversation history messages. Default name: `<agent-name>-messagestore`. | Yes |
71+
| MESSAGE_STORE_TABLE_NAME | The table name within the messages database for storing the conversation history. Default name: `messages`. | Yes |
72+
| VECTOR_STORE_DB_NAME | The database name for storing your documents as vector embeddings. Default name: `<agent-name>-vectorstore`. | Yes |
73+
| VECTOR_STORE_TABLE_NAME | The table name within the documents database for storing embeddings. Default name: `vectors`. | Yes |
74+
75+
:::tip
76+
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.
77+
:::
78+
79+
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:
80+
- 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.
81+
- 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.
82+
- 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.
83+
84+
The first option uses a static factory method:
85+
86+
```ts
87+
const vectorStore = await AzionVectorStore.createVectorStore(
88+
embeddingModel,
89+
{
90+
dbName: VECTOR_STORE_DB_NAME,
91+
tableName: VECTOR_STORE_TABLE_NAME
92+
},
93+
{
94+
columns,
95+
mode: "hybrid"
96+
}
97+
);
98+
```
99+
100+
Alternatively, you can choose to create the instance and setup the database separately:
101+
102+
```ts
103+
const vectorStore = new AzionVectorStore(embeddingModel, {
104+
dbName: VECTOR_STORE_DB_NAME,
105+
tableName: VECTOR_STORE_TABLE_NAME
106+
});
107+
await vectorStore.setupDatabase({
108+
columns,
109+
mode: "hybrid"
110+
});
111+
```
112+
113+
4. Run the following command in the root directory of the project to run the function that sets up the database:
114+
115+
```bash
116+
yarn setup
117+
```
118+
119+
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.
120+
121+
:::note
122+
The template also creates a database for storing the messages exchanged with the agent. By default, it'll store messages for *14 days*.
123+
:::
124+
125+
For a more detailed step-by-step, check the [documentation](https://www.azion.com/en/documentation/products/guides/langgraph-ai-agent-boilerplate/).

0 commit comments

Comments
 (0)