import React, { useState, Children, isValidElement, cloneElement } from "react"; export const CoolSteps = ({ name = "steps", children }) => { const childArray = Children.toArray(children); const count = childArray.length; return (

{childArray.map((child, index) => { if (isValidElement(child)) { return cloneElement(child, { key: index, stepsName: name, isFirst: index === 0, isLast: index === count - 1, }); } return child; })}

); }; export const CoolStep = ({ number = 1, title = "", stepsName = "steps", isFirst = false, isLast = false, children, }) => { const [isHovered, setIsHovered] = useState(false); const [copied, setCopied] = useState(false); const stepId = `${stepsName}-${number}`; const copyLink = () => { const url = `${window.location.origin}${window.location.pathname}#${stepId}`; navigator.clipboard.writeText(url); setCopied(true); setTimeout(() => setCopied(false), 1500); }; return (

{/* Vertical line - positioned behind the number, extends into padding */}

{/* Number button - positioned on top of line */}

); }; Send a POST request to the agents endpoint with your presenter configuration, LLM settings, and a name for your agent. ```json Request POST https://api.d-id.com/agents ``` ```json Body { "presenter": { "type": "clip", "voice": { "type": "microsoft", "voice_id": "en-US-JennyMultilingualV2Neural" }, "presenter_id": "amy-FLZ1USJl7m", }, "llm": { "type": "openai", "provider": "openai", "model": "gpt-3.5-turbo", "instructions": "You are Amy, an AI designed to assist with information about D-ID Agents." }, "name": "Amy" } ``` The response will include a unique `agent_id` that you'll use to initialize sessions with this agent. ```json Response { agent_id: agt_AbC123 ... } ``` Use the D-ID Client SDK to create an agent manager instance with your credentials and the agent ID from the previous step. ```javascript Client import * as did from "@d-id/client-sdk" const auth = { type: 'basic', clientKey: "YOUR_KEY" }; const agentManager = await did.createAgentManager(agentId, {auth}); ```

Quick setup