Connecting Your Extension to the Dreamnet Portal UI

Introduction

This guide will show you the complete workflow for connecting your webhook server to our developer portal and how to test it live using our chat interface.

This tutorial assumes you have already followed the "Event-Driven Webhooks for Dynamic Responses" guide and have the example repository cloned and ready on your local machine.

Connection and Testing Workflow

Follow these steps in order to ensure a successful integration. This process involves getting a public URL for your local server, registering it in our portal, and using the credentials we provide to test the connection.

Start Your Local Server and Expose it to the Internet

Before our system can send you events, your local server must be accessible from the web.

1. Start Your Webhook Server: Open a terminal in your webhook project directory and run npm run dev to start it.

2. Create a Tunnel with ngrok: Open a second terminal and run the following command to expose your local server (running on port 4000) to the internet.

   Copy

   ngrok http 4000

3. Copy Your Public URL: ngrok will provide you with a public HTTPS URL, which looks something like https://<random-string>.ngrok.io. Copy this URL; you will need it in the next step.

Register Your Extension in the Portal

Now, let's register in the developer portal to get your credentials. There are three distinct paths you can take, depending on what you want to build. Choose the one that fits your project.

For Custom UIs Only ("Frontend Only")

• Use this path if: You are building your own user interface and will interact with our API directly, but you do not need to receive real-time webhook events.

• What to do: In the developer portal, enter your full GitHub profile URL (e.g., https://github.com/your-username).

• What you will receive: An App ID, an App Secret, and a Webhook Secret.

For Webhook-Based Triggers Only ("Chat Triggers")

• Use this path if: You only want to listen to conversation events with a webhook to trigger external logic, but you will not be building a custom UI that calls our API.

• What to do: In the developer portal, enter the public URL where you want to receive webhook events.

• What you will receive: A Webhook Secret.

For Custom UIs with Webhook Triggers ("Triggers & Frontend")

• Use this path if: You want to do both: build a custom UI that calls our API and listen to real-time events with a webhook.

• What to do: In the developer portal, enter the public URL where you want to receive webhook events.

• What you will receive: An App ID, an App Secret, and a Webhook Secret.

Save Your Credentials

Copy and save the App ID and App Secret in a safe place. While these credentials will remain available in the portal for your session, saving them locally is recommended for easy access.

Update Your Local .env File

Copy the Webhook Secret provided by the portal. Open the .env file in your local webhook project and paste this value into the WEBHOOK_SECRET variable.

Restart Your Local Server

Stop your local server (with Ctrl + C in the terminal where it's running) and start it again with npm run dev. This step is essential for your server to load the new Webhook Secret.

Trigger Live Events Through the User Interface

With everything configured, you can now test the end-to-end connection.

1. Enter Your Credentials in the UI: In the hackathon portal, find the chat interface. You will see fields to enter your App ID and App Secret. Paste the credentials you saved earlier.

2. Send a Message: Once the UI is connected with your credentials, choose one of the agents and send a test message (e.g., "hello").

3. Verify Your Server: Watch the terminal where your webhook server is running. If everything worked correctly, you should see the console.log from the request and response events being triggered, confirming the connection is working!