ElevenLabs Agents Platform is a comprehensive solution for building production-ready conversational AI voice agents. The platform coordinates four core components:
/plugin marketplace add secondsky/claude-skills/plugin install elevenlabs-agents@claude-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
assets/agent-config-schema.jsonassets/ci-cd-example.ymlassets/javascript-sdk-boilerplate.jsassets/react-native-boilerplate.tsxassets/react-sdk-boilerplate.tsxassets/swift-sdk-boilerplate.swiftassets/system-prompt-template.mdassets/widget-embed-template.htmlreferences/api-reference.mdreferences/cli-commands.mdreferences/compliance-guide.mdreferences/cost-optimization.mdreferences/error-catalog.mdreferences/system-prompt-guide.mdreferences/testing-guide.mdreferences/tool-examples.mdreferences/workflow-examples.mdscripts/create-agent.shscripts/deploy-agent.shscripts/simulate-conversation.shElevenLabs Agents Platform is a comprehensive solution for building production-ready conversational AI voice agents. The platform coordinates four core components:
DEPRECATED (Do not use): @11labs/react and @11labs/client
Current packages:
bun add @elevenlabs/react@0.11.0 # React SDK
bun add @elevenlabs/client@0.11.0 # JavaScript SDK
bun add @elevenlabs/react-native@0.5.2 # React Native SDK
bun add @elevenlabs/elevenlabs-js@2.25.0 # Base SDK
bun add -g @elevenlabs/agents-cli@0.2.0 # CLI
If migrating, uninstall old packages first: npm uninstall @11labs/react @11labs/client
For building voice chat interfaces in React applications.
Installation:
bun add @elevenlabs/react zod
Basic Example:
import { useConversation } from '@elevenlabs/react';
import { z } from 'zod';
export default function VoiceChat() {
const { startConversation, stopConversation, status } = useConversation({
// Authentication (choose one)
agentId: 'your-agent-id', // Public agent (no key needed)
// apiKey: process.env.NEXT_PUBLIC_ELEVENLABS_API_KEY, // Private (dev only)
// signedUrl: '/api/elevenlabs/auth', // Signed URL (production)
// Client-side tools
clientTools: {
updateCart: {
description: "Update the shopping cart",
parameters: z.object({
item: z.string(),
quantity: z.number()
}),
handler: async ({ item, quantity }) => {
console.log('Updating cart:', item, quantity);
return { success: true };
}
}
},
// Event handlers
onEvent: (event) => {
if (event.type === 'transcript') console.log('User:', event.data.text);
if (event.type === 'agent_response') console.log('Agent:', event.data.text);
},
// Regional compliance
serverLocation: 'us' // 'us' | 'global' | 'eu-residency' | 'in-residency'
});
return (
<div>
<button onClick={startConversation}>Start Conversation</button>
<button onClick={stopConversation}>Stop</button>
<p>Status: {status}</p>
</div>
);
}
Complete template: See templates/basic-react-agent.tsx
For managing agents via code with version control and CI/CD. Load references/cli-commands.md when using CLI workflows.
Quick workflow:
bun add -g @elevenlabs/agents-cli
elevenlabs auth login
elevenlabs agents init
elevenlabs agents add "Support Agent" --template customer-service
# Edit agent_configs/support-agent.json
elevenlabs agents push --env dev
elevenlabs agents test "Support Agent"
See: references/cli-commands.md for complete CLI reference and workflows.
For creating agents dynamically (multi-tenant, SaaS platforms). Load references/api-reference.md when using the API directly.
Quick example:
import { ElevenLabsClient } from 'elevenlabs';
const client = new ElevenLabsClient({
apiKey: process.env.ELEVENLABS_API_KEY
});
const agent = await client.agents.create({
name: 'Support Bot',
conversation_config: {
agent: {
prompt: { prompt: "You are a helpful support agent.", llm: "gpt-4o" },
first_message: "Hello! How can I help you today?"
},
tts: { model_id: "eleven_turbo_v2_5", voice_id: "your-voice-id" }
}
});
See: references/api-reference.md for complete API reference.
ElevenLabs recommends a 6-component prompt structure: Personality (identity/role), Environment (communication context), Tone (formality/speech patterns), Goal (objectives/success criteria), Guardrails (boundaries/ethics), and Tools (available functions).
Example structure:
Personality: You are Alex, a friendly customer support specialist at TechCorp.
Environment: Phone communication, voice-only, potential background noise.
Tone: Professional yet warm. Use contractions. Keep responses to 2-3 sentences.
Goal: Resolve issues on first call. Success = customer confirms resolution.
Guardrails: Never give medical/legal advice. Escalate if customer becomes abusive.
Tools: lookup_order(id), transfer_to_supervisor(), send_password_reset(email)
Complete guide: Load references/system-prompt-guide.md when configuring agent prompts or improving conversation quality.
| Mode | Behavior | Best For |
|---|---|---|
| Eager | Responds quickly, jumps in early | Fast-paced support, quick orders |
| Normal | Balanced, waits for natural breaks | General customer service (default) |
| Patient | Waits longer for detailed responses | Information collection, tutoring |
Configuration: "turn": { "mode": "patient" } in conversation_config
Upload documents (PDF/TXT/DOCX) for semantic search during conversations. Agent retrieves relevant chunks automatically. Adds ~500ms latency per query. Documents must be indexed before use.
See: references/api-reference.md for knowledge base API and configuration.
See: references/tool-examples.md when implementing tools. Load references/api-reference.md for webhook tool creation API.
Symptom: Import errors, "module not found"
Solution:
npm uninstall @11labs/react @11labs/client
bun add @elevenlabs/react@0.11.0 @elevenlabs/client@0.11.0
# Update imports:
import { useConversation } from '@elevenlabs/react'; // Not @11labs/react
Symptom: First agent message cuts off on Android only (iOS/web work fine)
Solution:
const { startConversation } = useConversation({
agentId: 'your-agent-id',
connectionDelay: {
android: 3_000, // 3 seconds for Android audio mode switch
ios: 0,
default: 0
}
});
Symptom: "Refused to load the script..." errors, CSP blocks blob URLs
Solution - Self-host worklet files:
cp node_modules/@elevenlabs/client/dist/worklets/*.js public/elevenlabs/
const { startConversation } = useConversation({
agentId: 'your-agent-id',
workletPaths: {
'rawAudioProcessor': '/elevenlabs/rawAudioProcessor.worklet.js',
'audioConcatProcessor': '/elevenlabs/audioConcatProcessor.worklet.js',
}
});
See all 17 errors: Load references/error-catalog.md when troubleshooting errors, debugging webhook failures, RAG issues, or platform-specific problems.
Load specific reference files based on your current task:
references/api-reference.mdLoad when: Creating agents via API, managing agents programmatically, building multi-tenant systems, implementing knowledge base, creating webhook tools, handling API errors, or understanding API rate limits.
references/cli-commands.mdLoad when: Using CLI for agent management, setting up CI/CD pipelines, managing multi-environment deployments (dev/staging/prod), version controlling agent configs, or troubleshooting CLI issues.
references/compliance-guide.mdLoad when: Implementing GDPR compliance, handling HIPAA requirements (healthcare), configuring SOC 2 controls, setting data retention policies, implementing regional data residency (EU/IN), or handling PCI DSS (payments).
references/cost-optimization.mdLoad when: Optimizing LLM costs, implementing caching strategies, choosing between models (GPT/Claude/Gemini), handling traffic spikes (burst pricing), reducing token usage, or setting budget limits.
references/error-catalog.mdLoad when: Troubleshooting errors, debugging webhook failures, fixing voice consistency issues, resolving authentication problems, handling RAG index issues, or diagnosing platform-specific bugs.
references/system-prompt-guide.mdLoad when: Writing agent system prompts, improving conversation quality, implementing 6-component framework, iterating on prompts, testing prompt effectiveness, or defining agent personality/goals/guardrails.
references/testing-guide.mdLoad when: Setting up automated tests, implementing scenario testing, load testing agents, converting real conversations to tests, integrating with CI/CD, or debugging failed tests.
references/tool-examples.mdLoad when: Implementing client tools (browser functions), creating server tools (webhooks), connecting MCP servers, using system tools, or debugging tool execution issues.
references/workflow-examples.mdLoad when: Building multi-agent workflows, implementing call routing, creating escalation flows, designing multi-language support, or debugging workflow transitions.
@elevenlabs/react)Primary hook: useConversation(). Features: client tools, event streaming, connection management, regional compliance. See Quick Start Path A above.
@elevenlabs/client) - Vanilla JS/Node.js@elevenlabs/react-native) - Mobile apps (Expo)Template: See templates/basic-react-agent.tsx for complete React implementation.
Testing & Evaluation: Scenario testing (LLM-based), tool call testing, load testing, simulation API. See references/testing-guide.md.
Analytics: Conversation analysis, success evaluation, data collection, analytics dashboard.
Privacy & Compliance: Data retention, encryption, zero retention mode, GDPR/HIPAA/SOC 2. See references/compliance-guide.md.
Cost Optimization: LLM caching (90% savings), model swapping, burst pricing. See references/cost-optimization.md.
Advanced: Custom models (bring your own LLM), post-call webhooks, chat mode (text-only), telephony (Twilio/SIP), workflows (multi-agent routing).
Composes with:
Templates (templates/):
basic-react-agent.tsx - React SDK with client tools and eventsbasic-cli-agent.json - CLI agent with 6-component promptReferences (references/):
api-reference.md - Complete API referencecli-commands.md - CLI commands and workflowscompliance-guide.md - GDPR/HIPAA/SOC 2 compliancecost-optimization.md - LLM caching and cost reductionerror-catalog.md - All 17 errors with solutionssystem-prompt-guide.md - 6-component framework guidetesting-guide.md - Testing and evaluationtool-examples.md - Client/server/MCP tool examplesworkflow-examples.md - Multi-agent workflow patternsOfficial Documentation:
Production Tested: WordPress Auditor, Customer Support Agents Last Updated: 2025-11-21 Package Versions: Verified current (see metadata)
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.