———

Connect Supabase & Voiceflow with the New Agent Step: A No-Code Guide

This tutorial provides a comprehensive guide to integrating Supabase with Voiceflow using the new Agent Step. You'll learn how to create a database, build tools to interact with it, and seamlessly integrate these tools into your Voiceflow chatbot, all without writing any HTML or curl commands. This approach simplifies the process of creating powerful, data-driven chatbots.

Prerequisites

Before you begin, ensure you have the following:

A Voiceflow account (www.voiceflow.com)

A Supabase account (supabase.com)

Basic understanding of chatbot concepts.

Step 1: Create a Voiceflow Account and Project (if necessary)

If you don't already have a Voiceflow account, create one at www.voiceflow.com. If you already have an account, log in and create a new project or select an existing one where you want to implement the Supabase integration.

Step 2: Create a Supabase Project and Database

Navigate to Supabase: Go to supabase.com and log in or create an account.

Create a New Project: Click on "New Project" in your Supabase dashboard.

Project Details: Provide a name for your project (e.g., voiceflow-integration). Choose a region closest to your users.

Create the Database: Once your project is created, navigate to the "Table Editor" or "Database" section. Create a new table. For example, let's create a table called users with columns for id (UUID, primary key), name (text), and email (text).

    CREATE TABLE users (
        id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
        name TEXT,
        email TEXT
    );

Get API Keys: Go to the "Settings" section in your Supabase project and then click on "API". Copy your anon public key and your service_role key. You will need these later in Voiceflow.

Step 3: Create the Agent Step in Voiceflow

Open Your Voiceflow Project: In your Voiceflow project, navigate to the flow where you want to integrate Supabase.

Add the Agent Step: Add a new "Agent Step" to your flow. This step allows you to define custom functions that can interact with external services like Supabase.

Name the Agent Step: Give your Agent Step a descriptive name (e.g., "Database Agent").

Add the Prompt: You can copy and paste this prompt

    ### Role
You're an interactive assistant to efficiently retrieve and present information from a Supabase database that houses customers information and order details for a pizza store restaurant. The agent must ensure compliance with privacy regulations and handle sensitive information responsibly.
Personality
The chat agent embodies a friendly, professional tone that promotes trust and comfort. It should communicate with clarity and empathy, providing concise and accurate responses while encouraging user engagement.
Goals
The primary goals of the chat agent are to quickly access and deliver relevant patient and prescription data upon user request, ensuring a smooth and informative interaction. It should also address any follow-up questions to assist users in understanding the information presented.
Behavior
Make sure to use listTables to get the relevant table names.
Based on the request, pinpoint which table might contains the relevant information, by default look into all tables.
For the table you'd like to check, use the getColumnsNames tool to retrieve the relevant column names information. Only useful when you need to filter for a column, and search for a record.
Use the getRecord to retrieve the information from a specific table.
You might need to get records from multiple table to get to the complete data for the request.
If you can't find the records in the first try, correct your query, and rerun the tool. Do this at least 3 times before giving up.
Always trigger the provide answer path at the end of your process, even if you couldn't find any information. 
-----Here's the request:
{inputs}

Step 4: Build the First Tool: Build the First Tool - Retrieve The Table Names

In the Agent Step, create a new API tool. Give it a descriptive name, such as getTableNames.

Go to the Supabase SQL Editor.

Paste this code and hit run to create a new function:

CREATE OR REPLACE FUNCTION get_public_tables()
RETURNS TABLE (table_name TEXT) AS $$
BEGIN
    RETURN QUERY
    SELECT c.table_name::TEXT
    FROM information_schema.tables c
    WHERE c.table_schema = 'public' AND c.table_type = 'BASE TABLE';
END;
$$ LANGUAGE plpgsql;

Configure the tool to connect to your Supabase project:

- Create an input variable ApiKey and give it a description - Select GET Method and add this URL:

https://.supabase.co/rest/v1/rpc/get_public_tables

Add Headers: Add the following headers:

- apikey: {ApiKey} - Authorization: Bearer {ApiKey}

Test the Tool: After setting up the tool, test it within Voiceflow. Provide values for the ApiKey variable during the test.

Step 5: Build the Second Tool - Get Column Names

Define the Tool: Add a new API tool to your Agent Step. Name it getColumnNames.

Create the Supabase Function: Configure this tool similarly to the first one, using the Supabase SQL Editor and this snippet and run it:

CREATE OR REPLACE FUNCTION get_table_columns(p_table_name TEXT)
RETURNS TABLE (column_name TEXT, data_type TEXT) AS $$
BEGIN
    RETURN QUERY
    SELECT 
        c.column_name::TEXT,
        c.data_type::TEXT
    FROM 
        information_schema.columns c
    WHERE 
        c.table_schema = 'public' -- Or any other schema you want to target
        AND c.table_name = p_table_name;
END;
$$ LANGUAGE plpgsql;

Configure the tool to connect to your Supabase project:

- Create an input variable ApiKey and table name and give them a description - - Select POST Method and add this URL:

https://.supabase.co/rest/v1/rpc/get_table_columns

Add Headers: Add the following headers:

- apikey: {ApiKey} - Authorization: Bearer {ApiKey}

Add Body: Select RAW JSON, and paste this body:

{ "p_table_name": "" }

Testing: Test the getColumnNames tool with a valid table name and your Supabase Api Key. Verify that the correct user data is retrieved.

Step 6: Build the Third Tool - Retrieve Records

Define the Tool: Create a new tool, name it retrieveRecords.

Configure the tool to connect to your Supabase project:

- Create an input variable ApiKey, table name, and filterQuery and give them a description

Add Headers: Add the same headers as before:

- apikey: {ApiKey} - Authorization: Bearer {ApiKey}

Add URL endpoint Select GET Method and add this URL:

https://.supabase.co/rest/v1/?

Add Prompt Instructions: Go back to the Agent Step Interface, and select the retrieveRecords tool, then select the filterQuery variable. In the LLM instructions, add this prompt:

Here's some guidelines to correctly format your filters
Only catch and provide the string that contains the filter.
Make sure to convert your query into a valid URL-encoded string
Examples:
System: Looking for Amelia records using the column name 'firstname'
Assistant: firstname=eq.Amelia
System: Looking for records that has a price over 47 using the column name 'price'
Assistant: price=gte.47
System: Looking for records where phone_number is +12345678901
Assistant: phone_number=eq.%2B12345678901
Filters
"column=eq.Equal+to"
"column=gt.Greater+than"
"column=lt.Less+than"
"column=gte.Greater+than+or+equal+to"
"column=lte.Less+than+or+equal+to"
"column=like.CaseSensitive"
"column=ilike.CaseInsensitive"
"column=is.null"
"column=in.(Array,Values)"
"column=neq.Not+equal+to"
Arrays
"array_column=cs.{array,contains}"
"array_column=cd.{contained,by}"
Logical operators
"column=not.like.Negate+filter"
"or=(some_column.eq.Some+value,other_column.eq.Other+value)"

Testing: Test the retrieveRecords tool by testing the whole agent. First we will need to add the Supabase Apikey to each of these variables default value:

Step 7: Set Voiceflow Secrets

To enhance security, store your Supabase API keys as Voiceflow "Secrets." This prevents them from being directly visible in your flow. Go to your Voiceflow project settings and add the following secrets:

SUPABASE_API_KEY: Your service_role key.

Then, in your Agent Step, reference these secrets using the {{secrets.SUPABASE_API_KEY}} syntax instead of hardcoding the keys.

Conclusion

You've successfully integrated Supabase with Voiceflow using the Agent Step. You've learned how to create tools for inserting, reading, and updating data. This opens up a wide range of possibilities for building dynamic and data-driven chatbots. You can now connect your Voiceflow chatbot to your database, allowing you to build more complex and engaging conversational experiences. Next steps could include building more complex queries or integrating with other APIs.