diff --git a/docs/configurations/api-keys.mdx b/docs/configurations/api-keys.mdx new file mode 100644 index 0000000..7471c7b --- /dev/null +++ b/docs/configurations/api-keys.mdx @@ -0,0 +1,19 @@ +--- +title: "API Keys and Service Keys" +description: "You can create API Keys to trigger Dograh Voice Agents and Service Keys to use with Inference Providers" +--- + +The option to create the Keys are in https://app.dograh.com/api-keys if you are using hosted version, or http://localhost:3010/api-keys if you are using the self hosted version. + +### API Keys +API keys can be used to trigger a voice agent from an external system, like n8n or programatically from your other workflows. In order to generate that, you can go to `/api-keys` and create a new key. + +![Create a new API Key](../images/api-keys.png) + +Please note that you must copy and keep the API key secretly, since this is the only time that you would be able to copy it. If you lose it, you can always delete that, if its not being used anywhere, and create a new API key. + +### Service Keys +Service Keys are the keys which you generate to be used in [Model Configurations](inference-providers). In order to generate that, you can go to `/api-keys` and create a new key. + +![Create a new Service Key](../images/service-keys.png) + diff --git a/docs/configurations/inference-providers.mdx b/docs/configurations/inference-providers.mdx index ade9492..0e27961 100644 --- a/docs/configurations/inference-providers.mdx +++ b/docs/configurations/inference-providers.mdx @@ -5,13 +5,13 @@ description: "Dograh ships with its own inferencing engine, which is hosted at h ## Configure Inference Provider -You can go to `https://app.dograh.com/service-configurations` if you are on hosted version of Dograh or go to `http://localhost:3010/service-configurations` if you are running Dograh locally. +You can go to `https://app.dograh.com/model-configurations` if you are on hosted version of Dograh or go to `http://localhost:3010/model-configurations` if you are running Dograh locally. You can see the configuration for the inference provider in the following screenshot. -![Inference Provider Configuration](../images/service-configuration.png) +![Model Configuration](../images/service-configuration.png) -You can select the provider from the dropdown and configure the API key, model, etc. +You can select the provider from the dropdown and configure the API key, model, etc. You can see [API Keys](api-keys) documentation for instructions on how to create Service Keys to be used in Model Configuration. ## Next Steps diff --git a/docs/deployment/index.mdx b/docs/deployment/introduction.mdx similarity index 100% rename from docs/deployment/index.mdx rename to docs/deployment/introduction.mdx diff --git a/docs/docs.json b/docs/docs.json index 53ee7b7..6edb52c 100644 --- a/docs/docs.json +++ b/docs/docs.json @@ -29,12 +29,32 @@ { "group": "Configurations", "pages": [ - "configurations/inference-providers" + "configurations/inference-providers", + "configurations/api-keys" + ] + }, + { + "group": "Voice Agent Builder", + "pages": [ + "voice-agent/introduction", + "voice-agent/template-variables", + { + "group": "Nodes", + "pages": [ + "voice-agent/start-call", + "voice-agent/end-call", + "voice-agent/agent", + "voice-agent/global", + "voice-agent/api-trigger", + "voice-agent/webhook" + ] + } ] }, { "group": "Deployment", "pages": [ + "deployment/introduction", "deployment/docker", "deployment/custom-domain", "deployment/heroku" diff --git a/docs/getting-started/index.mdx b/docs/getting-started/index.mdx index 4fe6d1d..3a9356e 100644 --- a/docs/getting-started/index.mdx +++ b/docs/getting-started/index.mdx @@ -14,7 +14,7 @@ description: "Open-source alternative to Vapi - build voice AI agents with full ## Setting up -Get the platform up and running using Docker with a single command on your local computer. If you are looking to deploy the platform on a server, please check the [Deployment](deployment) section. +Get the platform up and running using Docker with a single command on your local computer. If you are looking to deploy the platform on a server, please check the [Deployment](deployment/introduction) section. We collect anonymous usage data to improve the product. You can opt out by setting the `ENABLE_TELEMETRY` to `false` in the below command. diff --git a/docs/images/api-keys.png b/docs/images/api-keys.png new file mode 100644 index 0000000..5f1d2cd Binary files /dev/null and b/docs/images/api-keys.png differ diff --git a/docs/images/create-a-voice-agent.png b/docs/images/create-a-voice-agent.png new file mode 100644 index 0000000..f615adb Binary files /dev/null and b/docs/images/create-a-voice-agent.png differ diff --git a/docs/images/global-node.png b/docs/images/global-node.png new file mode 100644 index 0000000..02301c0 Binary files /dev/null and b/docs/images/global-node.png differ diff --git a/docs/images/service-configuration.png b/docs/images/service-configuration.png index 1688b31..2cbc350 100644 Binary files a/docs/images/service-configuration.png and b/docs/images/service-configuration.png differ diff --git a/docs/images/service-keys.png b/docs/images/service-keys.png new file mode 100644 index 0000000..828be02 Binary files /dev/null and b/docs/images/service-keys.png differ diff --git a/docs/voice-agent/agent.mdx b/docs/voice-agent/agent.mdx new file mode 100644 index 0000000..e017e35 --- /dev/null +++ b/docs/voice-agent/agent.mdx @@ -0,0 +1,6 @@ +--- +title: "Agent Node" +description: "Agent node contains the prompts that drives the conversation with the Voice Agent" +--- + +The Edges connected with Agent Nodes are pathways that the LLMs can take depending on how the conversation has been going so far. diff --git a/docs/voice-agent/api-trigger.mdx b/docs/voice-agent/api-trigger.mdx new file mode 100644 index 0000000..d76b26c --- /dev/null +++ b/docs/voice-agent/api-trigger.mdx @@ -0,0 +1,23 @@ +--- +title: "API Trigger" +description: "API Trigger helps you trigger your Voice Agent using external systems, like N8n or Zapier" +--- + +### API Payload +The API Trigger is a POST request, which requires an [API Key](configurations/api-keys). It expects a valid JSON with `phone_number` and `initial_context`. + +### Initial Context +`initial_context` is a valid JSON object, which contains any contextual information that you would want your voice agent to access. You can refer to these values in your prompts using **Handle Bars**, which are values enclosed in `{{` and `}}`. + +Example: If you have below JSON as your `initial_context` +``` +{ + "initial_context": { + "user": { + "name": "John" + } + } +} +``` + +you can refer to the user name in your prompts as `{{initial_context.user.name}}`. \ No newline at end of file diff --git a/docs/voice-agent/end-call.mdx b/docs/voice-agent/end-call.mdx new file mode 100644 index 0000000..b3332af --- /dev/null +++ b/docs/voice-agent/end-call.mdx @@ -0,0 +1,7 @@ +--- +title: "End Call" +description: "You can use End Call node to configure how the Agent says its final message right before the call is terminated" +--- + +You should have only one End Call node per Voice Agent. + \ No newline at end of file diff --git a/docs/voice-agent/global.mdx b/docs/voice-agent/global.mdx new file mode 100644 index 0000000..978ac1c --- /dev/null +++ b/docs/voice-agent/global.mdx @@ -0,0 +1,12 @@ +--- +title: "Global Node" +description: "Global Node contain the common prompt that is appended to the prompt of every node, in which `Add Global Prompt` is turned on." +--- + + +You should have only one Global node per Voice Agent. + + +![Add Global Prompt Selector](../images/global-node.png) + +This node typically contains common instructions, that the Voice Agent should always follow, like tone of the conversation, any objection handling etc. diff --git a/docs/voice-agent/introduction.mdx b/docs/voice-agent/introduction.mdx new file mode 100644 index 0000000..be393ce --- /dev/null +++ b/docs/voice-agent/introduction.mdx @@ -0,0 +1,10 @@ +--- +title: "Voice Agent Builder" +description: "Dograh provides UI components to build a voice Agent. The voice agent can be created by going to https://app.dograh.com/workflow and then Creating a new Agent." +--- + +![Create a Voice Agent](../images/create-a-voice-agent.png) + +We provide an Agent which quickly helps you get started by creating a voice agent with default prompts and pathways. You can provide inputs like whether you need an "Inbound" or "Outbound" voice agent. You can also provide your use case, and description of what the voice agent should be doing. Your inputs will be sent to an LLM to generate the voice agent, so the better you can describe your use case, the better the starting agent will be created for you. + +Once you create your Voice Agent using our Agent builder, you would be taken to the Agent, where you would have an option to test the agent using "Web Call" or "Phone Call". You can also modify the prompts of the Agent to suit it to your use case better. \ No newline at end of file diff --git a/docs/voice-agent/start-call.mdx b/docs/voice-agent/start-call.mdx new file mode 100644 index 0000000..2744e5e --- /dev/null +++ b/docs/voice-agent/start-call.mdx @@ -0,0 +1,7 @@ +--- +title: "Start Call" +description: "You can use Start Call node to Start the call and configure how Agent greets the user when the conversation starts." +--- + +You should have only one Start Call node per Voice Agent. + diff --git a/docs/voice-agent/template-variables.mdx b/docs/voice-agent/template-variables.mdx new file mode 100644 index 0000000..3b81909 --- /dev/null +++ b/docs/voice-agent/template-variables.mdx @@ -0,0 +1,28 @@ +--- +title: "Template Variables" +description: "You can use Template Variables in your prompts for your Agent nodes, or when constructing the payload for the Webhook Node" +--- + +### Template Rendering +You can reference template variables which is passed as `initial_context` either using the API Trigger or when uploading a Sheet for a campaign. You can also use any extracted variable as `gathered_context` + +The template rendering can take nested values. + +Example: If the initial context is + +``` +{ + "initial_context": { + "user": { + "name": "John" + } + } +} +``` + +You can write your prompt to access the user's name as below + +Prompt: `You are Alice, who is talking to {{initial_context.user.name}}.` + +### Nodes +Dograh Voice Agents are composed of various nodes. These nodes can provide instructions to the voice agent, help you setup a trigger where you can trigger the voice agent to call someone, or help you setup a webhook, where you can update the results of the call in your CRM or trigger a downstream workflow in n8n. In the next steps, we will be documenting the nodes that you can use in building the voice agent. \ No newline at end of file diff --git a/docs/voice-agent/webhook.mdx b/docs/voice-agent/webhook.mdx new file mode 100644 index 0000000..130acde --- /dev/null +++ b/docs/voice-agent/webhook.mdx @@ -0,0 +1,33 @@ +--- +title: "Webhook" +description: "Webhook node allow you to sync the result of Voice Agent runs to your external systems, like CRM or to other workflow orchestrator like Zapier or n8n." +--- + + +You can have multiple Webhook Nodes for a single Voice Agent, if you want to sync the result of the call at multiple places. + + +### Creating the Webhook Payload +The payload can contain a valid JSON, and you can reference variables while constructing that payload. You can reference below variables while constructing the payload. + +- `{{workflow_run_id}}` Unique ID of the Agent run +- `{{workflow_id}}` ID of the Agent +- `{{workflow_name}}` Name of the workflow +- `{{initial_context.*}}` Initial context variables +- `{{gathered_context.*}}` Extracted variables +- `{{cost_info.call_duration_seconds}}` Call duration +- `{{recording_url}}` Call recording URL +- `{{transcript_url}}` Transcript URL + +An example of the payload is given below + +``` +{ + "call_id": "{{workflow_run_id}}", + "first_name": "{{initial_context.first_name}}", + "rsvp": "{{gathered_context.rsvp}}", + "duration": "{{cost_info.call_duration_seconds}}", + "recording_url": "{{recording_url}}", + "transcript_url": "{{transcript_url}}" +} +``` diff --git a/ui/src/app/workflow/[workflowId]/hooks/useWorkflowState.ts b/ui/src/app/workflow/[workflowId]/hooks/useWorkflowState.ts index 466a393..8d4281a 100644 --- a/ui/src/app/workflow/[workflowId]/hooks/useWorkflowState.ts +++ b/ui/src/app/workflow/[workflowId]/hooks/useWorkflowState.ts @@ -77,7 +77,14 @@ const getNewNode = (type: string, position: { x: number, y: number }, existingNo http_method: "POST" as const, endpoint_url: "", custom_headers: [], - payload_template: {}, + payload_template: { + call_id: "{{workflow_run_id}}", + first_name: "{{initial_context.first_name}}", + rsvp: "{{gathered_context.rsvp}}", + duration: "{{cost_info.call_duration_seconds}}", + recording_url: "{{recording_url}}", + transcript_url: "{{transcript_url}}", + }, }, }; } diff --git a/ui/src/components/flow/AddNodePanel.tsx b/ui/src/components/flow/AddNodePanel.tsx index 084c578..98a74d1 100644 --- a/ui/src/components/flow/AddNodePanel.tsx +++ b/ui/src/components/flow/AddNodePanel.tsx @@ -1,4 +1,4 @@ -import { Globe, Headset, Link2, LucideIcon, OctagonX, Play, Webhook, X } from 'lucide-react'; +import { ExternalLink, Globe, Headset, Link2, LucideIcon, OctagonX, Play, Webhook, X } from 'lucide-react'; import { useEffect } from 'react'; import { Button } from '@/components/ui/button'; @@ -125,7 +125,18 @@ export default function AddNodePanel({ isOpen, onNodeSelect, onClose }: AddNodeP >
-

Add New Node

+
+

Add New Node

+ + + View Nodes Documentation + +
diff --git a/ui/src/components/flow/nodes/WebhookNode.tsx b/ui/src/components/flow/nodes/WebhookNode.tsx index fa20b37..fb60b9f 100644 --- a/ui/src/components/flow/nodes/WebhookNode.tsx +++ b/ui/src/components/flow/nodes/WebhookNode.tsx @@ -1,5 +1,5 @@ import { NodeProps, NodeToolbar, Position } from "@xyflow/react"; -import { AlertCircle, Check, Circle, Copy, Edit, Link2, Loader2, PlusIcon, Trash2Icon } from "lucide-react"; +import { AlertCircle, Circle, Edit, Link2, Loader2, PlusIcon, Trash2Icon } from "lucide-react"; import { memo, useCallback, useEffect, useState } from "react"; import { useWorkflow } from "@/app/workflow/[workflowId]/contexts/WorkflowContext"; @@ -19,6 +19,7 @@ import { DialogTitle, } from "@/components/ui/dialog"; import { Input } from "@/components/ui/input"; +import { JsonEditor, validateJson } from "@/components/ui/json-editor"; import { Label } from "@/components/ui/label"; import { Select, @@ -29,7 +30,6 @@ import { } from "@/components/ui/select"; import { Switch } from "@/components/ui/switch"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; -import { Textarea } from "@/components/ui/textarea"; import { useAuth } from "@/lib/auth"; import { NodeContent } from "./common/NodeContent"; @@ -93,13 +93,25 @@ export const WebhookNode = memo(({ data, selected, id }: WebhookNodeProps) => { } }, [getAccessToken]); + // Validation state - only shown on save attempt + const [jsonError, setJsonError] = useState(null); + const [endpointError, setEndpointError] = useState(null); + const handleSave = async () => { - let parsedPayload = {}; - try { - parsedPayload = JSON.parse(payloadTemplate); - } catch { - // Keep empty object if invalid JSON + // Validate endpoint URL + if (!endpointUrl.trim()) { + setEndpointError('Endpoint URL is required'); + return; } + setEndpointError(null); + + // Validate JSON payload + const validation = validateJson(payloadTemplate); + if (!validation.valid) { + setJsonError(validation.error || 'Invalid JSON. Please fix the payload template before saving.'); + return; + } + setJsonError(null); handleSaveNodeData({ ...data, @@ -109,7 +121,7 @@ export const WebhookNode = memo(({ data, selected, id }: WebhookNodeProps) => { endpoint_url: endpointUrl, credential_uuid: credentialUuid || undefined, custom_headers: customHeaders.filter((h) => h.key && h.value), - payload_template: parsedPayload, + payload_template: validation.parsed as Record, }); setOpen(false); setTimeout(async () => { @@ -128,6 +140,9 @@ export const WebhookNode = memo(({ data, selected, id }: WebhookNodeProps) => { setPayloadTemplate( data.payload_template ? JSON.stringify(data.payload_template, null, 2) : "{}" ); + // Clear any previous errors + setJsonError(null); + setEndpointError(null); // Fetch credentials when dialog opens fetchCredentials(); } @@ -204,6 +219,7 @@ export const WebhookNode = memo(({ data, selected, id }: WebhookNodeProps) => { nodeData={data} title="Edit Webhook" onSave={handleSave} + error={endpointError || jsonError} > {open && ( { - const [copied, setCopied] = useState(false); - // Add Credential Dialog state const [isAddCredentialOpen, setIsAddCredentialOpen] = useState(false); const [newCredName, setNewCredName] = useState(""); @@ -365,12 +379,6 @@ const WebhookNodeEditForm = ({ } }; - const handleCopyPayload = async () => { - await navigator.clipboard.writeText(payloadTemplate); - setCopied(true); - setTimeout(() => setCopied(false), 2000); - }; - const addHeader = () => { setCustomHeaders([...customHeaders, { key: "", value: "" }]); }; @@ -387,14 +395,11 @@ const WebhookNodeEditForm = ({ const availableVariables = [ { name: "workflow_run_id", description: "Unique ID of the workflow run" }, - { name: "workflow_run_name", description: "Name of the workflow run" }, { name: "workflow_id", description: "ID of the workflow" }, { name: "workflow_name", description: "Name of the workflow" }, { name: "initial_context.*", description: "Initial context variables" }, { name: "gathered_context.*", description: "Extracted variables" }, { name: "cost_info.call_duration_seconds", description: "Call duration" }, - { name: "completed_at", description: "Completion timestamp" }, - { name: "disposition_code", description: "Final disposition code" }, { name: "recording_url", description: "Call recording URL" }, { name: "transcript_url", description: "Transcript URL" }, ]; @@ -643,32 +648,14 @@ const WebhookNodeEditForm = ({ -
-
- - -
- -