Skip to content

[elevenlabs] Add createElevenLabsSession helper and example#36

Open
robinandeer wants to merge 3 commits into
mainfrom
rw-elevenlabs-convai-integration
Open

[elevenlabs] Add createElevenLabsSession helper and example#36
robinandeer wants to merge 3 commits into
mainfrom
rw-elevenlabs-convai-integration

Conversation

@robinandeer

@robinandeer robinandeer commented Jun 26, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • Adds createElevenLabsSession (exported from @runwayml/avatars-react/api): server-side helper that fetches an ElevenLabs signed URL, creates a Runway realtime session with integration: { type: "elevenlabs", signedUrl }, and polls until READY.
  • Re-exports the helper from @runwayml/avatars-react/api (core had it; react /api was missing the re-export).
  • Adds examples/nextjs-elevenlabs/ — wires the helper to <AvatarCall> with stage-friendly RUNWAY_API_BASE_URL and .env.local override in next.config.ts.

Why

Companion to the API + streaming-inference ElevenLabs integration work. Customers with their own ElevenLabs ConvAI agent get a Runway avatar on top with one server-side call. No ElevenLabs SDK on the client.

Companion PRs (merge last, after API + SI deploy):

Supersedes #29.

Review guide

Start here: packages/core/src/api/elevenlabs.ts, then packages/react/src/api/index.ts (re-export), then examples/nextjs-elevenlabs/app/api/avatar/connect/route.ts.

Review question: Is createElevenLabsSession the right SDK surface, or should customers call the public API directly and only use consumeSession client-side?

Not in this PR: dev-docs OpenAPI regen for integration (follow-up after API merge).

Test plan

  • bun test packages/ incl. elevenlabs.test.ts
  • bun run typecheck + lint + build
  • Stage E2E (2026-06-30): examples/nextjs-elevenlabs against api.dev-stage.runwayml.com — smooth avatar + ElevenLabs agent audio

Try it: bun run build at repo root, then cd examples/nextjs-elevenlabs && bun install && bun run dev. Agent must use PCM 16000 Hz.

Server-side helper that connects a customer-owned ElevenLabs ConvAI agent to a
Runway avatar in one call: fetches a signed WebSocket URL from ElevenLabs,
creates a Runway realtime session with the elevenlabs integration, and polls
until READY. Exported from @runwayml/avatars-react/api.

- Reuses the existing pollUntilReady helper instead of a bespoke poll loop
- Sends the correct model literal (gwm1_avatars) and integration payload
- Adds a nextjs-elevenlabs example wiring the helper to a standard AvatarCall
- Unit tests covering the signed-url -> create -> poll flow and error paths
@vercel

vercel Bot commented Jun 26, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
avatars-playground Ready Ready Preview, Comment Jun 30, 2026 6:49am

Request Review

Extract fetchElevenLabsSignedUrl and createRunwayElevenLabsSession so the
public helper reads as a three-step flow, and dedupe test fixtures.

Copy link
Copy Markdown
Collaborator Author

This stack of pull requests is managed by Graphite. Learn more about stacking.

# Get yours at https://dev.runwayml.com/ (prod) or dev-stage for staging
RUNWAYML_API_SECRET=

# Optional Runway API base URL (defaults to production)

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we typically note our stage API in public examples? thats really just for internal use right so should we remove?

1. Copy `.env.example` to `.env.local` and fill in your keys:

- **`RUNWAYML_API_SECRET`** — API key from the same environment you target (see below)
- **`RUNWAY_API_BASE_URL`** — optional; defaults to production (`https://api.dev.runwayml.com`)

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we even expose this option?

- **`ELEVENLABS_AGENT_ID`** — create an agent at [elevenlabs.io/app/agents](https://elevenlabs.io/app/agents/agents)
- **`RUNWAY_AVATAR_ID`** — custom avatar from the matching Developer Portal

**Stage testing** (after integration is deployed to stage):

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

woudl recommend removing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants