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

# Showcase

> Real-time voice and video AI agents built with Vision Agents — explore live demos, their tech stacks, and source code.

export const ShowcasePage = () => {
  const canReveal = typeof window !== 'undefined' && ('IntersectionObserver' in window) && !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  let revealObserver = null;
  const registerReveal = el => {
    if (!el || !canReveal) return;
    if (!revealObserver) {
      revealObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.setAttribute('data-reveal', 'in');
            observer.unobserve(entry.target);
          }
        });
      }, {
        rootMargin: '0px 0px -10% 0px',
        threshold: 0.1
      });
    }
    el.setAttribute('data-reveal', 'out');
    revealObserver.observe(el);
  };
  const TECH_REGISTRY = {
    Gemini: {
      href: '/integrations/realtime/gemini',
      slug: 'googlegemini'
    },
    OpenAI: {
      href: '/integrations/realtime/openai',
      slug: 'openai'
    },
    Anthropic: {
      href: '/integrations/llm/anthropic',
      slug: 'anthropic'
    },
    ElevenLabs: {
      href: '/integrations/tts/elevenlabs',
      slug: 'elevenlabs'
    },
    Anam: {
      href: '/integrations/avatars/anam',
      slug: 'anam'
    },
    AssemblyAI: {
      href: '/integrations/stt/assemblyai',
      slug: 'assemblyai'
    },
    Inworld: {
      href: '/integrations/tts/inworld',
      slug: 'inworld'
    }
  };
  const showcaseItems = [{
    title: 'Crashout Buddy',
    description: 'An emotional helper that detects visually how you feel and responds to that with empathy and well-intended advice.',
    videoUrl: 'https://www.youtube.com/embed/-FMcLbcS01I?si=MC5Jh9w5wlhyanjQ',
    tags: ['Vision', 'Realtime', 'Avatars'],
    stack: ['Gemini', 'Anam'],
    demoUrl: 'https://emotional-support.visionagents.ai/',
    sourceUrl: 'https://github.com/GetStream/Vision-Agents',
    blogUrl: 'https://github.com/google/vision-agents'
  }, {
    title: 'AI Sales Coach',
    description: "An AI sales coach that helps salespeople improve their sales skills. It uses Gemini to generate sales scripts and provides feedback on the salesperson's performance.",
    videoUrl: 'https://www.youtube.com/embed/EcVRaBZkSR4?si=rfFj7-DF15sVC-P0',
    tags: ['Gemini', 'Avatars'],
    stack: ['Gemini', 'Anam'],
    sourceUrl: 'https://github.com/GetStream/Vision-Agents',
    blogUrl: 'https://github.com/google/vision-agents'
  }, {
    title: 'Prescription Assistant',
    description: "An AI assistant that helps patients request their prescriptions. It uses a combination of AssemblyAI's `universal-3.5-pro` model for STT, Gemini for the brain, and Inworld's TTS services.",
    videoUrl: 'https://www.youtube.com/embed/KUeoYbZiMXk?si=TGsb4pU79WwhNJhw',
    tags: ['Healthcare', 'Realtime'],
    stack: ['AssemblyAI', 'Gemini', 'Inworld'],
    sourceUrl: 'https://github.com/GetStream/Vision-Agents',
    blogUrl: 'https://getstream.io/blog/voice-ai-prescription-agent/'
  }];
  return <div className="showcase-page">
      <section className="hero">
        <h1>
          What you can <span className="emphasized">actually</span> build.
        </h1>
        <p>
          Vision Agents is THE platform for building{' '}
          <span className="emphasized">real-time agents</span>. Ship faster than
          anywhere else. Here are some of the agents we built to showcase what
          is possible.
        </p>
      </section>
      {showcaseItems.map((item, index) => <section key={item.title} ref={registerReveal} className={`showcase${index % 2 === 1 ? ' showcase-reversed' : ''}`}>
          <div className="showcase-video">
            <iframe src={item.videoUrl} title={`${item.title} — demo video`} loading="lazy" frameBorder="0" allow="
              accelerometer;
              autoplay;
              clipboard-write;
              encrypted-media;
              gyroscope;
              picture-in-picture;
              web-share;
            " referrerPolicy="strict-origin-when-cross-origin" allowFullScreen></iframe>
          </div>
          <div className="showcase-content">
            <div className="showcase-content-prefix">
              <p className="showcase-content-prefix-index">
                {index + 1}/{showcaseItems.length}
              </p>
              <div>
                {item.tags.map(tag => <span key={tag} className="pill">
                    {tag}
                  </span>)}
              </div>
            </div>
            <h2>{item.title}</h2>
            <p className="showcase-content-description">{item.description}</p>
            <div className="showcase-content-stack">
              {item.stack.map(tech => ({
    tech,
    info: TECH_REGISTRY[tech]
  })).filter(({info}) => Boolean(info)).map(({tech, info}) => <a key={tech} href={info.href} className="stack-item" title={tech}>
                    {info.slug ? <span className={`stack-logo stack-logo--${info.slug}`} aria-hidden="true"></span> : <span className="stack-logo stack-logo--mono" aria-hidden="true">
                        {tech.charAt(0)}
                      </span>}
                    <span className="stack-label">{tech}</span>
                  </a>)}
            </div>
            <p className="showcase-content-cta">
              {item.demoUrl && <a href={item.demoUrl} className="cta-primary" target="_blank" rel="noopener noreferrer">
                  Demo
                </a>}
              <a href={item.sourceUrl} className="cta-github github" target="_blank" rel="noopener noreferrer">
                Source
              </a>
              <a href={item.blogUrl} className="cta-blog" target="_blank" rel="noopener noreferrer">
                Blog
              </a>
            </p>
          </div>
        </section>)}
    </div>;
};

<ShowcasePage />