elevenlabs-agents by jezweb/claude-skills
npx skills add https://github.com/jezweb/claude-skills --skill elevenlabs-agents构建一个生产就绪的对话式 AI 语音智能体。生成一个配置好的智能体,包含工具、知识库和 SDK 集成。
npm install @elevenlabs/react # React SDK
npm install @elevenlabs/client # JavaScript SDK (浏览器 + 服务器)
npm install @elevenlabs/react-native # React Native SDK
npm install @elevenlabs/elevenlabs-js # 完整 API (仅限服务器)
npm install -g @elevenlabs/agents-cli # CLI ("代码即智能体")
已弃用: @11labs/react, @11labs/client — 如果已安装请卸载。
仅限服务器警告: @elevenlabs/elevenlabs-js 使用 Node.js child_process,无法在浏览器中运行。在浏览器环境中请使用 @elevenlabs/client,或创建一个代理服务器。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
仪表板: https://elevenlabs.io/app/conversational-ai → 创建智能体
CLI (代码即智能体):
elevenlabs-cli init my-agent
# 使用智能体设置编辑 agent.config.ts
elevenlabs-cli deploy
配置:
assets/system-prompt-template.md工具让智能体能够在对话过程中执行操作:
// 客户端工具 (在浏览器中运行)
const clientTools = {
navigate: {
description: "导航到页面",
parameters: { type: "object", properties: { url: { type: "string" } } },
handler: async ({ url }) => { window.location.href = url; return "已导航"; }
}
};
// 服务器端工具 (Webhooks)
// 在仪表板中配置: 设置 → 工具 → 添加 Webhook
模式示例请参见 references/tool-examples.md。
上传文档供智能体参考:
React — 复制并自定义 assets/react-sdk-boilerplate.tsx:
import { useConversation } from '@elevenlabs/react';
const { startConversation, stopConversation, status } = useConversation({
agentId: 'your-agent-id',
signedUrl: '/api/elevenlabs/auth',
clientTools,
onEvent: (event) => { /* transcript, agent_response, tool_call */ },
});
React Native — 参见 assets/react-native-boilerplate.tsx Widget 嵌入 — 参见 assets/widget-embed-template.html Swift — 参见 assets/swift-sdk-boilerplate.swift
# 本地测试
elevenlabs-cli test my-agent
# 模拟对话
elevenlabs-cli simulate my-agent --scenario "预约明天的时间"
# 部署
elevenlabs-cli deploy my-agent
部署前,请先运行一次预演: elevenlabs-cli deploy my-agent --dry-run 以检查更改。
对于对话模拟,请基于 assets/simulation-template.json 创建 JSON 测试场景。
切勿在客户端代码中暴露 API 密钥。请使用服务器端点:
// 服务器端点
app.get('/api/elevenlabs/auth', async (req, res) => {
const response = await fetch('https://api.elevenlabs.io/v1/convai/conversation/get-signed-url', {
headers: { 'xi-api-key': process.env.ELEVENLABS_API_KEY },
body: JSON.stringify({ agent_id: 'your-agent-id' }),
method: 'POST'
});
const { signed_url } = await response.json();
res.json({ signed_url });
});
为测试不同配置创建版本分支:
将用户上下文传递给智能体的系统提示:
const { startConversation } = useConversation({
agentId: 'your-agent-id',
dynamicVariables: {
user_name: 'John',
account_type: 'premium',
}
});
系统提示中通过 {{user_name}} 引用这些变量。
assets/react-sdk-boilerplate.tsx — React 集成模板assets/react-native-boilerplate.tsx — React Native 模板assets/swift-sdk-boilerplate.swift — Swift/iOS 模板assets/javascript-sdk-boilerplate.js — 原生 JS 模板assets/widget-embed-template.html — 可嵌入小部件assets/system-prompt-template.md — 系统提示指南assets/agent-config-schema.json — 配置模式参考assets/ci-cd-example.yml — CI/CD 流水线模板references/api-reference.md — 完整 API 端点references/tool-examples.md — 客户端和服务器端工具模式references/system-prompt-guide.md — 智能体提示工程references/cli-commands.md — CLI 参考references/workflow-examples.md — 端到端工作流示例references/testing-guide.md — 测试与模拟references/cost-optimization.md — 定价与优化references/compliance-guide.md — 数据驻留与合规性每周安装量
744
代码仓库
GitHub 星标数
643
首次出现
2026 年 1 月 20 日
安全审计
安装于
claude-code597
opencode588
gemini-cli577
cursor563
codex551
github-copilot503
Build a production-ready conversational AI voice agent. Produces a configured agent with tools, knowledge base, and SDK integration.
npm install @elevenlabs/react # React SDK
npm install @elevenlabs/client # JavaScript SDK (browser + server)
npm install @elevenlabs/react-native # React Native SDK
npm install @elevenlabs/elevenlabs-js # Full API (server only)
npm install -g @elevenlabs/agents-cli # CLI ("Agents as Code")
DEPRECATED: @11labs/react, @11labs/client — uninstall if present.
Server-only warning: @elevenlabs/elevenlabs-js uses Node.js child_process and won't work in browsers. Use @elevenlabs/client for browser environments, or create a proxy server.
Dashboard: https://elevenlabs.io/app/conversational-ai → Create Agent
CLI (Agents as Code):
elevenlabs-cli init my-agent
# Edit agent.config.ts with agent settings
elevenlabs-cli deploy
Configure:
assets/system-prompt-template.mdTools let the agent take actions during conversation:
// Client-side tools (run in browser)
const clientTools = {
navigate: {
description: "Navigate to a page",
parameters: { type: "object", properties: { url: { type: "string" } } },
handler: async ({ url }) => { window.location.href = url; return "Navigated"; }
}
};
// Server-side tools (webhooks)
// Configure in dashboard: Settings → Tools → Add Webhook
See references/tool-examples.md for patterns.
Upload documents for the agent to reference:
React — copy and customise assets/react-sdk-boilerplate.tsx:
import { useConversation } from '@elevenlabs/react';
const { startConversation, stopConversation, status } = useConversation({
agentId: 'your-agent-id',
signedUrl: '/api/elevenlabs/auth',
clientTools,
onEvent: (event) => { /* transcript, agent_response, tool_call */ },
});
React Native — see assets/react-native-boilerplate.tsx Widget embed — see assets/widget-embed-template.html Swift — see assets/swift-sdk-boilerplate.swift
# Test locally
elevenlabs-cli test my-agent
# Simulate conversation
elevenlabs-cli simulate my-agent --scenario "Book appointment for tomorrow"
# Deploy
elevenlabs-cli deploy my-agent
Before deploying, run a dry-run first: elevenlabs-cli deploy my-agent --dry-run to review changes.
For conversation simulation, create a JSON test scenario based on assets/simulation-template.json.
Never expose API keys in client code. Use a server endpoint:
// Server endpoint
app.get('/api/elevenlabs/auth', async (req, res) => {
const response = await fetch('https://api.elevenlabs.io/v1/convai/conversation/get-signed-url', {
headers: { 'xi-api-key': process.env.ELEVENLABS_API_KEY },
body: JSON.stringify({ agent_id: 'your-agent-id' }),
method: 'POST'
});
const { signed_url } = await response.json();
res.json({ signed_url });
});
Create version branches for testing different configurations:
Pass user context to the agent's system prompt:
const { startConversation } = useConversation({
agentId: 'your-agent-id',
dynamicVariables: {
user_name: 'John',
account_type: 'premium',
}
});
System prompt references them as {{user_name}}.
assets/react-sdk-boilerplate.tsx — React integration templateassets/react-native-boilerplate.tsx — React Native templateassets/swift-sdk-boilerplate.swift — Swift/iOS templateassets/javascript-sdk-boilerplate.js — Vanilla JS templateassets/widget-embed-template.html — Embeddable widgetassets/system-prompt-template.md — System prompt guideassets/agent-config-schema.json — Config schema referenceassets/ci-cd-example.yml — CI/CD pipeline templatereferences/api-reference.md — Full API endpointsreferences/tool-examples.md — Client and server tool patternsreferences/system-prompt-guide.md — Prompt engineering for agentsreferences/cli-commands.md — CLI referencereferences/workflow-examples.md — End-to-end workflow examplesreferences/testing-guide.md — Testing and simulationreferences/cost-optimization.md — Pricing and optimisationreferences/compliance-guide.md — Data residency and complianceWeekly Installs
744
Repository
GitHub Stars
643
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
claude-code597
opencode588
gemini-cli577
cursor563
codex551
github-copilot503
AI 代码实施计划编写技能 | 自动化开发任务分解与 TDD 流程规划工具
40,200 周安装