> ## Documentation Index
> Fetch the complete documentation index at: https://docs.camb.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

export const UseCaseCard = ({src, title, description, prompt, badge, icon, href, resetOnPause = true, exclusive = true}) => {
  const audioRef = React.useRef(null);
  const [playing, setPlaying] = React.useState(false);
  const [progress, setProgress] = React.useState(0);
  const [hovering, setHovering] = React.useState(false);
  const uid = React.useMemo(() => 'u' + Math.random().toString(36).slice(2, 8), []);
  const hasAudio = !!src;
  React.useEffect(() => {
    const audio = audioRef.current;
    if (!audio || !hasAudio) return;
    const onTime = () => setProgress(audio.duration ? audio.currentTime / audio.duration : 0);
    const onEnd = () => {
      setPlaying(false);
      setProgress(0);
    };
    audio.addEventListener('timeupdate', onTime);
    audio.addEventListener('ended', onEnd);
    const onGlobalStop = e => {
      if (e.detail !== uid && !audio.paused) {
        audio.pause();
        audio.currentTime = 0;
        setPlaying(false);
        setProgress(0);
      }
    };
    if (exclusive) window.addEventListener('audio-player-stop', onGlobalStop);
    return () => {
      audio.removeEventListener('timeupdate', onTime);
      audio.removeEventListener('ended', onEnd);
      if (exclusive) window.removeEventListener('audio-player-stop', onGlobalStop);
    };
  }, [hasAudio, exclusive, uid]);
  const toggle = e => {
    if (e) e.stopPropagation();
    const audio = audioRef.current;
    if (!audio) return;
    if (audio.paused) {
      if (exclusive) window.dispatchEvent(new CustomEvent('audio-player-stop', {
        detail: uid
      }));
      audio.currentTime = 0;
      setProgress(0);
      audio.play().catch(() => setPlaying(false));
      setPlaying(true);
    } else {
      audio.pause();
      if (resetOnPause) {
        audio.currentTime = 0;
        setProgress(0);
      }
      setPlaying(false);
    }
  };
  const circleSize = 32;
  const strokeWidth = 2;
  const radius = (circleSize - strokeWidth) / 2;
  const circumference = 2 * Math.PI * radius;
  const strokeDashoffset = circumference * (1 - progress);
  return <div onClick={() => href && (window.location.href = href)} style={{
    borderRadius: '12px',
    border: '1px solid rgba(255,255,255,0.08)',
    background: 'rgba(255,255,255,0.02)',
    padding: '20px',
    display: 'flex',
    flexDirection: 'column',
    gap: '12px',
    cursor: href ? 'pointer' : 'default',
    transition: 'border-color 0.2s ease, background 0.2s ease'
  }} onMouseEnter={e => {
    if (href) {
      e.currentTarget.style.borderColor = 'rgba(236,85,18,0.25)';
      e.currentTarget.style.background = 'rgba(236,85,18,0.03)';
    }
  }} onMouseLeave={e => {
    if (href) {
      e.currentTarget.style.borderColor = 'rgba(255,255,255,0.08)';
      e.currentTarget.style.background = 'rgba(255,255,255,0.02)';
    }
  }}>
      <div style={{
    display: 'flex',
    alignItems: 'flex-start',
    justifyContent: 'space-between',
    gap: '12px'
  }}>
        <div style={{
    flex: 1,
    minWidth: 0
  }}>
          <div style={{
    display: 'flex',
    alignItems: 'center',
    gap: '8px',
    marginBottom: '8px'
  }}>
            {icon && <span style={{
    fontSize: '18px'
  }}>{icon}</span>}
            <span style={{
    fontWeight: 600,
    fontSize: '14px',
    letterSpacing: '-0.01em'
  }}>{title}</span>
            {badge && <span style={{
    fontSize: '10px',
    fontWeight: 600,
    padding: '2px 7px',
    borderRadius: '4px',
    background: 'rgba(236,85,18,0.08)',
    color: '#EC5512',
    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
    border: '1px solid rgba(236,85,18,0.12)',
    whiteSpace: 'nowrap'
  }}>{badge}</span>}
            {href && <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{
    opacity: 0.3,
    marginLeft: 'auto',
    flexShrink: 0
  }}><path d="M7 17L17 7" /><path d="M7 7h10v10" /></svg>}
          </div>
          {description && <div style={{
    fontSize: '13px',
    opacity: 0.55,
    lineHeight: '1.5',
    marginBottom: prompt ? '6px' : '0'
  }}>{description}</div>}
          {prompt && <div style={{
    fontSize: '12px',
    opacity: 0.4,
    lineHeight: '1.4',
    fontStyle: 'italic'
  }}>"{prompt}"</div>}
        </div>
        {hasAudio && <div style={{
    flexShrink: 0,
    position: 'relative',
    width: '32px',
    height: '32px',
    cursor: 'pointer',
    marginTop: '2px'
  }} onMouseEnter={() => setHovering(true)} onMouseLeave={() => setHovering(false)}>
            <svg width={circleSize} height={circleSize} style={{
    position: 'absolute',
    top: 0,
    left: 0,
    transform: 'rotate(-90deg)'
  }}>
              <circle cx={16} cy={16} r={radius} fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth={strokeWidth} />
              <circle cx={16} cy={16} r={radius} fill="none" stroke={`url(#${uid})`} strokeWidth={strokeWidth} strokeDasharray={circumference} strokeDashoffset={strokeDashoffset} strokeLinecap="round" style={{
    transition: 'stroke-dashoffset 0.15s ease'
  }} />
              <defs><linearGradient id={uid} x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stopColor="#EC5512" /><stop offset="100%" stopColor="#FF8A5C" /></linearGradient></defs>
            </svg>
            <button onClick={toggle} style={{
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: '24px',
    height: '24px',
    borderRadius: '50%',
    background: hovering ? 'linear-gradient(145deg, #F06020, #EC5512)' : 'linear-gradient(145deg, #EC5512, #D44A0F)',
    border: 'none',
    cursor: 'pointer',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    boxShadow: hovering ? '0 2px 10px rgba(236,85,18,0.4)' : '0 1px 4px rgba(236,85,18,0.2)',
    transition: 'all 0.2s ease',
    padding: playing ? '0' : '0 0 0 1px'
  }}>
              {playing ? <svg width="9" height="9" viewBox="0 0 24 24" fill="white" stroke="none"><rect x="6" y="4" width="4" height="16" rx="1" /><rect x="14" y="4" width="4" height="16" rx="1" /></svg> : <svg width="9" height="9" viewBox="0 0 24 24" fill="white" stroke="none"><polygon points="7 3 21 12 7 21" /></svg>}
            </button>
          </div>}
      </div>
      {hasAudio && <audio ref={audioRef} preload="none" src={src} />}
    </div>;
};

CAMB.AI is the localization AI infrastructure company built to help the world’s biggest Enterprises reach 8 billion fans, customers and viewers. Supporting 140+ languages!
Explore our docs to integrate Camb AI's MARS & BOLI models into your applications.

<CardGroup cols={3}>
  <Card title="SDK Guide" icon="code" href="/tutorials/tts-with-sdk">
    Learn how to install and use the Python & Node.js SDKs to build voice apps quickly.
  </Card>

  <Card title="Custom Cloud Providers" icon="cloud" href="/custom-cloud-providers">
    Access MARS models on your own favorite cloud providers like Google Cloud, Modal, Baseten, etc.
  </Card>

  <Card title="Open Source" icon="github" href="/open-source">
    Explore our open-source models MARS 6 and MARS 5 on GitHub.
  </Card>
</CardGroup>

## Quick Start

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px', marginBottom: '16px' }}>
  <UseCaseCard src="/audio/demo-accent-en-us.wav" title="Text to Speech" description="Generate speech from text using the Python or TypeScript SDK. The best place to start." prompt="Welcome to our service. We're glad to have you here." icon="🎙️" href="/tutorials/tts-with-sdk" />

  <UseCaseCard src="/audio/demo-accent-en-us.wav" title="TTS without SDK" description="Call the TTS API directly with HTTP requests for maximum control." prompt="Welcome to our service. We're glad to have you here." icon="⌨️" href="/tutorials/direct-api" />

  <UseCaseCard src="/audio/demo-accent-fr-fr.wav" title="TTS with Accents" description="Generate speech in 140+ language accents with the same voice." prompt="Welcome to our service. We're glad to have you here." icon="🌍" badge="fr-fr" href="/tutorials/tts-with-accents" />

  <UseCaseCard src="/audio/demo-translated-es.wav" title="Translated TTS" description="Translate text and generate speech in the target language in one call." prompt="Hello, welcome to our service. We're glad to have you here." icon="🌐" badge="es" href="/tutorials/translated-tts" />

  <UseCaseCard src="/audio/demo-sfx-laser.wav" title="Text to Sound Effects" description="Generate royalty-free sound effects and music from text descriptions." prompt="A futuristic sci-fi laser sound effect" icon="🔊" href="/tutorials/text-to-sound" />

  <UseCaseCard title="Voice Cloning" description="Clone a voice from a reference audio file and generate speech with it." icon="🎤" href="/tutorials/voice-cloning" />
</div>

***

## Features Suite

* **Live Text to Speech**: Realistic, emotional speech synthesis, featuring MARS 8 in 4 variants - mars pro, mars flash, mars instruct, and mars nano. Available on all cloud providers.
* **Translation**: Context-aware neural translation using our proprietary BOLI Model.
* **Dubbing**: Automated video dubbing using our AI that preserves emotional delivery across 140+ languages.
* **Voice Cloning**: Create digital voice replicas from audio as short as 2 seconds.
* **Audio Separation**: Isolate and extract distinct audio components from mixed recordings using deep learning to separate speech from background elements.
* **Sound and Music**: Create high-quality music and realistic soundscapes, delivering immersive audio experiences from simple text prompts.
* **Transcription**: Convert speech to text with speaker identification, timestamps, and specialized terminology (dictionaries) support.
  and more!

Continue exploring our detailed documentation for each API:

<CardGroup cols={3}>
  <Card title="Text-to-Speech" icon="audio-lines" href="/api-reference/endpoint/create-tts-stream">
    Transform text into natural-sounding speech with customizable voice features across 140+ languages
  </Card>

  <Card title="Translated Text-to-Speech" icon="messages-square" href="/api-reference/endpoint/create-translated-tts">
    Translate text and synthesize speech in one step across 140+ languages
  </Card>

  <Card title="Dubbing" icon="video" href="/api-reference/endpoint/end-to-end-dubbing">
    Localize your content using our AI that preserves emotional delivery across 140+ languages
  </Card>

  <Card title="Stories" icon="book-audio" href="/api-reference/endpoint/create-story">
    Convert written narratives into audiobooks using your own voice or custom voice.
  </Card>

  <Card title="Translated Stories" icon="book-audio" href="/api-reference/endpoint/create-translated-story">
    Translate and convert narratives into audiobooks in 140+ languages
  </Card>

  <Card title="Translation" icon="languages" href="/api-reference/endpoint/create-translation">
    Translate content across 140+ language pairs  with context-aware neural technology.
  </Card>

  <Card title="Transcription" icon="captions" href="/api-reference/endpoint/create-transcription">
    Convert speech to text with speaker identification, timestamps, and specialized terminology (dictionaries) support.
  </Card>

  <Card title="Voice from Description" icon="speech" href="/api-reference/endpoint/create-text-to-voice">
    Create unique voices by describing characteristics or clone existing voices from audio samples for consistent brand identity.
  </Card>

  <Card title="Sound and Music" icon="speaker" href="/api-reference/endpoint/create-text-to-sound">
    Create high-quality music and realistic soundscapes, delivering immersive audio experiences from simple text prompts.
  </Card>

  <Card title="Audio Separation" icon="separator-vertical" href="/api-reference/endpoint/create-audio-separation">
    Isolate and extract distinct audio components from mixed recordings using deep learning to separate speech from background elements.
  </Card>
</CardGroup>