Resources / Documentation
ADL docs

Put your agent to work.

From your first workspace to a live agent on your website, this guide covers the complete integration path.

Estimated setup
15 minutes
Getting started

A clear path from account to agent.

ADL agents run from your workspace and are delivered to your product through a lightweight plugin. Start with these four milestones.

01

Create your account

Create an ADL workspace and invite the people who will build and maintain your agent.

02

Download an agent

Choose a starter agent from the repository and add it to your local workspace.

03

Configure the plugin

Connect your agent to the ADL plugin and verify its environment variables.

04

Embed and launch

Copy an integration snippet for your frontend and point it at your configured agent.

Setup

Configure an agent in your workspace.

After creating an account, download an agent from the ADL repository into the workspace where you develop your application.

1. Clone a starter agent

Choose the agent that matches your use case, then install its dependencies.

git clone https://github.com/agentdesignlabs/agents.git
cd agents/customer-support
npm install

2. Add the ADL plugin

Authenticate the plugin with a workspace key, then connect it to the agent configuration.

npm install @adl/plugin
npx adl configure --agent customer-support
# Add ADL_API_KEY to your local .env file
Before you deploy: test the configured agent locally and make sure its tools, knowledge sources, and handoff rules behave as expected.
Usage

Use the plugin from your ADL workspace.

In the ADL dashboard, open Team & Account, expand My Business, then choose Integrations. Select the agent you configured and create a web integration. ADL generates an agent ID and a frontend snippet scoped to that integration.

1

Select integration

Choose Web from the Integrations tab.

2

Choose your agent

Attach the configured agent to this integration.

3

Copy the snippet

Use the code generated for your frontend.

Integrations

Embed the agent in any frontend.

Copy the matching snippet from Team & Account → My Business → Integrations. Replace agent_123 with the ID supplied by your workspace.

React

App.tsx

import { ADLAgent } from "@adl/react";

export default function App() {
  return <ADLAgent agentId="agent_123" />;
}

Next.js

app/page.tsx

"use client";
import { ADLAgent } from "@adl/react";

export default function Page() {
  return <ADLAgent agentId="agent_123" />;
}

JavaScript

index.html

<script src="https://cdn.adl.dev/agent.js"></script>
<script>
  ADL.mount("#agent", { agentId: "agent_123" });
</script>
Open integrations