말하기 연습
, 한 마디마다 교정까지

내가 쓰는 언어와 배우는 언어를 고르고, 커피 주문하기나 버스표 사기 같은 장면을 하나 고르세요. 상대역은 Cartesia Managed Agent가 소리 내어 맡고, 내가 한 마디 할 때마다 옆 패널에 고칠 점이 적힙니다.
교정을 켠 채 스페인어 카페 장면을 진행 중인 Speaking partner. 바리스타가 학습자에게 스페인어로 답하고, 교정 패널에는 고친 문장이 담긴 문법 카드가 보입니다

스크린샷. 로컬에서 실행 중인 템플릿입니다.

모델
ink-2, sonic-3.6
언어
영어, 스페인어, 프랑스어, 힌디어, 일본어
라이선스
Apache-2.0
기술 스택
Next.js 16React 19AI SDKshadcn/uiagents-web
Cartesia 제품
Managed AgentsInk 2Sonic 3.6

하는 일

장면은 새 이웃과 인사하기부터 월세 협상까지 아홉 가지이고, 장면마다 이뤄야 할 목표가 있습니다. 가르치는 스타일도 고릅니다. Teacher는 단어를 제안하고 내 언어로 설명해 줍니다. Immersive는 끝까지 역할을 유지하고, 교정은 처음에 숨겨 둡니다. 장면을 마치면 1(어려워함)부터 3(유창함)까지 점수를 매기고 조언 세 개를 줍니다. 장면과 두 스타일은 Zack Akil의 오픈소스 데모(Apache-2.0)에서 가져왔습니다.

직접 실행하기

  1. 설치

    Node 22.22 이상에서 아래 명령어를 실행하세요. pnpm도 쓸 수 있습니다. 대화만 하려면 CARTESIA_API_KEY로 충분합니다. 교정 패널에는 LLM_MODEL과 그 제공업체의 키가 필요하며, 설정하기 전까지 패널이 무엇을 추가할지 알려 줍니다.

    npx degit cartesia-ai/cookbook/examples/speaking-partner speaking-partner
    cd speaking-partner
    # add CARTESIA_API_KEY, and LLM_MODEL plus its key for corrections
    cp .env.example .env.local
    npm install
    npm run dev
    

    환경 변수
    CARTESIA_API_KEY
    play.cartesia.ai/keys
    LLM_MODEL
    교정용. provider/model, 예를 들어 openai/gpt-5.4-mini
    OPENAI_API_KEY
    LLM_MODEL이 openai/로 시작할 때
    ANTHROPIC_API_KEY
    LLM_MODEL이 anthropic/으로 시작할 때
    AI_GATEWAY_API_KEY
    그 밖의 제공업체. Vercel에서는 필요 없음
    AGENT_MODEL_ID
    선택 사항. 상대역의 LLM, GET /v1/agents/models에서 확인
    VOICE_ID_ES
    선택 사항. 스페인어 음성을 고정합니다. VOICE_ID_EN, _FR, _HI, _JA도 같은 방식입니다
    APP_PASSWORD
    로컬에서는 선택 사항. Vercel에서는 필수이며, none으로 두면 앱이 공개됨
    TRUST_PROXY
    선택 사항. 자체 리버스 프록시 뒤에서는 1
  2. 장면 고르기

    npm run dev가 출력한 URL을 열고 두 언어를 고르세요. 가르치는 스타일과 장면을 고른 뒤 Start speaking을 누르고 첫마디는 직접 하세요. 헤드폰을 쓰세요. 세션은 3분 뒤에 끝납니다.

코딩 에이전트로 만들기

어디서 시작하고 무엇을 먼저 읽어야 하는지 코딩 에이전트에게 알려 주는 프롬프트입니다.

프롬프트

Claude CodeCursorCodex

Build a language speaking practice app on a Cartesia Managed Agent. Start from https://github.com/cartesia-ai/cookbook/tree/main/examples/speaking-partner and follow its AGENTS.md for the commands, files and rules. The server creates one temporary agent per session with POST /v1/agents, writing the mission, role, mode and languages into its instructions, because a browser access token cannot send dynamic_variables. The browser gets a 60 second token with only the agent grant and talks to the agent through useCartesiaAgent from lib/agents-web. Corrections are a separate AI SDK call per line. Keep the five Ink 2 languages (en, es, fr, hi, ja). If I don't have a Cartesia API key yet, follow https://www.cartesia.ai/agent-quickstart.md to get one.

작동 방식

세션서버가 장면을 새 에이전트의 instructions에 적습니다
Ink 2배우는 언어로 하는 내 말을 들음
LLM상대역을 맡음, 기본값은 claude-haiku-4.5
Sonic 3.6그 언어의 원어민 음성으로 말함
교정별도의 LLM 호출이 내 문장을 하나씩 확인합니다

이렇게 만든 이유

세션마다 에이전트 하나

브라우저는 수명이 짧은 토큰으로 연결하는데, 이 토큰으로는 장면을 통화에 넘길 수 없습니다. 그래서 서버는 세션마다 장면, 역할, 가르치는 스타일을 새 에이전트의 instructions에 적습니다. 내가 나가면 에이전트를 삭제합니다.

교정은 통화와 따로 실행됩니다

내가 한 마디 할 때마다 별도의 LLM 호출이 그 문장만 확인합니다. 고친 문장과 내 언어로 된 짧은 설명이 돌아옵니다. 상대는 대화를 이어 가고, 교정하려고 멈추지 않습니다.

상대역이 장면을 끝냅니다

목표를 이루면 상대역이 작별 인사를 하고, 장면을 끝내는 브라우저 쪽 도구를 호출합니다. 조언 세 개와 Immersive에서는 점수도 넘기고, 페이지는 요약을 보여 준 뒤 에이전트를 삭제합니다. 중간에 나가면 점수 없는 요약이 나옵니다.

원하는 대로 바꾸기

장면 추가

장면 목록인 data/missions.json에 항목을 추가하세요. 라우트는 장면 id를 받으므로, 브라우저가 자유 텍스트를 프롬프트에 보내는 일은 없습니다.

가르치는 방식 바꾸기

두 가지 가르치는 스타일의 프롬프트는 lib/prompts.ts에 있습니다.

음성 고르기

VOICE_ID_ES 등을 설정하세요. 설정하지 않으면 서버가 음성 라이브러리에서 친근한 설명이 붙은 첫 번째 원어민 음성을 고릅니다.

자주 묻는 질문

실행하는 데 비용이 드나요?

템플릿은 Apache-2.0 라이선스의 무료 오픈소스입니다. 연습 통화는 내 Cartesia 계정을, 글로 된 교정은 내 LLM 제공자를 사용합니다. 세션은 3분 뒤에 끝납니다.

써 보려면 무엇이 필요한가요?

대화만 하려면 Cartesia API 키와 Node 22.22 이상이면 충분합니다. 글로 된 교정에는 OpenAI, Anthropic, Vercel AI Gateway 중 하나의 LLM 키도 필요합니다.

어떤 언어를 연습할 수 있나요?

영어, 스페인어, 프랑스어, 힌디어, 일본어를 어떤 조합으로든 연습할 수 있습니다. Ink 2가 알아듣는 언어가 이것들이라, 다른 언어에는 다른 음성 인식이 필요합니다.

인터넷에 공개해도 안전한가요?

배포하기 전에 비밀번호를 설정하세요. 페이지를 열 수 있는 사람은 누구나 내 계정으로 세션을 시작할 수 있기 때문입니다. Cartesia는 에이전트 통화마다 오디오와 받아쓴 텍스트도 기록하니, 사용자에게 알리고 필요 없는 통화는 삭제하세요.

내 문장은 왜 말을 멈춘 뒤에야 나타나나요?

에이전트는 내가 말을 마쳤을 때 단어를 보내므로, 내 문장과 그 교정이 함께 나타납니다. 상대의 말은 말하는 동안 바로 나타납니다.

이 템플릿의 단계별 가이드가 있나요?

네. 레시피에서 코드를 따라가며 설명하고, README에서 설정, 환경 변수, 배포를 다루며, 클라이언트 도구 문서에서 Cartesia 쪽을 설명합니다.

오늘 시작하세요

전문가와 상담하세요.

팀원과 연결해 Cartesia가 세계적 수준의 음성 경험을 만드는 데 어떻게 도움이 되는지 알아보세요.

영업팀 문의

개발을 시작하세요.

API로 모델을 사용하고 몇 분 만에 음성 에이전트를 프로덕션에 배포하세요.

Cartesia 사용해 보기