Skip to content

README.md

Latest commit

 

History

History
72 lines (50 loc) · 2.86 KB

README.md

File metadata and controls

72 lines (50 loc) · 2.86 KB
Raw

Keyframe Labs System Design Interviewer Example

This example demonstrates how to use a Keyframe Labs powered avatar with an ElevenLabs voice agent and an infinite architecture canvas to practice system design interviews in real time.

Features

  • Lifelike interviewer avatar powered by Keyframe Labs' human foundation models
  • Real-time voice conversation powered by an ElevenLabs agent
  • Infinite architecture canvas for services, databases, tables, text, and connections — shared with the interviewer as live context
  • Built with React and FastAPI

Getting started

Prerequisites: Python 3.12+, uv, Node.js, and pnpm 11.9.0.

  1. Create a Keyframe Labs API key and an ElevenLabs agent. Require authentication for the agent and scope its API key to the access needed to generate signed conversation URLs.

  2. Configure the provider credentials:

    cp .env.example .env
    KEYFRAME_API_KEY=...
ELEVENLABS_API_KEY=...
ELEVENLABS_AGENT_ID=...

  3. Install and start the app:

    uv sync
pnpm install
pnpm dev

Open http://localhost:5174. The API runs on http://localhost:8788 by default.

ElevenLabs agent setup

Configure the shared agent once in the ElevenLabs dashboard. The application does not modify persistent agent settings at startup or while users are interviewing.

  • Set the first message to Hi, I'm Lyra. Have you done a system design interview in the past? and disable first-message interruptions.

  • Set turn timeout to 15 seconds and turn eagerness to normal.

  • Add the interview_packet dynamic variable with a safe placeholder such as No interview packet was provided. Do not begin an interview.

  • Set the system prompt to:

    # Selected interview packet

The complete interview packet for this conversation appears inside `<interview_packet>`. Follow that packet as the authoritative interview instructions. Never mention dynamic variables or the packet wrapper to the candidate.

<interview_packet>
{{interview_packet}}
</interview_packet>

Each session passes its selected packet as a conversation-scoped dynamic variable, so concurrent users do not overwrite one another's prompt.

Customize

  • Add or edit interview packets in server/app/interviews/prompts/; follow the prompt authoring guide.
  • Change the avatar with KEYFRAME_PERSONA_SLUG in .env.
  • Change colors and typography in frontend/src/index.css, or shared controls in frontend/src/components/ui/.
  • Override the API port with PORT=9000 pnpm dev; set CLIENT_ORIGIN in .env if the frontend origin changes.

Learn more