How to deploy the LangGraph AI Agent Boilerplate

The LangGraph AI Agent Boilerplate contains the configurations for creating intelligent, real-time agents that can query and interact with data stored in an Azion EdgeSQL database, delivering optimized performance and reduced latency for your applications.

This template is built to leverage Azion’s robust edge computing infrastructure, ensuring scalability, security, and seamless integration with EdgeSQL.

The deployment of this template will create an EdgeSQL database with two tables: one for conversation history and another for reference documents. It also creates a backend application developed with LangGraph for document management and agent functionality, and a Vue-based frontend for user interaction.

This template uses Vue version 3.3.4.

Requirements

• A GitHub account to connect with Azion and create your new repository.
  • Every push will be deployed automatically to this repository to keep your project updated.
• An OpenAI API Key.
• This template uses Application Accelerator, Edge Functions, and Edge SQL, and it could generate usage-related costs. Check the pricing page for more information.

Deploying the template

You can obtain and configure your template through the Azion Console. To easily deploy it at the edge, click the button below.

Setting up the template

In the configuration form, you must provide the information to configure your application. Fill in the presented fields.

Fields identified with an asterisk are mandatory.

1. Connect Azion with your GitHub account.
   • A pop-up window will open to confirm the installation of the Azion GitHub App, a tool that connects your GitHub account with Azion’s platform.
   • Define your permissions and repository access as desired.
2. Select the Git Scope to work with.
3. Define a name for your agent.
   • By default, the name of the database follows the pattern <agent_name>-database.
   • Use a unique and easy-to-remember name. If the name has already been used, the platform returns an error message.
4. Insert your OpenAI API key.
5. Click the Deploy button to start the deployment process.

During the deployment, you’ll be able to follow the process through a window showing off the logs. When it’s complete, the page shows information about the application and some options to continue your journey.

Managing the template

Setting up the database

This template creates two tables in the database, one for conversation history and another for reference documents. To start using your own documents, you must set up the 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.

3. Open the file setup/setup.ts. This file contains the function that sets up the database, 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 database 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 comments, and you can uncomment the one you prefer.

  The first option uses a static factory method:

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:

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 project`s root directory to execute the function that sets up the database:

yarn setup

The database is now set with your documents and ready for your application to access it. Read the template documentation to see more details about configuring the project.

Managing the edge application

Considering that this initial setup may not be optimal for your specific edge application, all settings can be customized any time you need by using Azion’s platform.

To manage and edit your edge application’s settings, follow these steps:

1. Access Azion Console.
2. On the upper-left corner, select Products menu, the icon with three horizontal lines, > Edge Application.
   • You’ll be redirected to the Edge Application page. It lists all the edge applications you’ve created.
3. Find the edge application related to your template and select it.
   • The list is organized alphabetically. You can also use the search bar located in the upper-left corner of the list; currently, it filters only by Application Name.

After selecting the edge application you’ll work on, you’ll be directed to a page containing all the settings you can configure.

Adding a custom domain

The edge application created during the deployment has an assigned Azion domain to make it accessible through the browser. The domain has the following format: xxxxxxxxxx.map.azionedge.net/. However, you can add a custom domain for users to access your edge application through it.