Skip to content

Latest commit

 

History

History
84 lines (54 loc) · 2.39 KB

README.md

File metadata and controls

84 lines (54 loc) · 2.39 KB

Interactive Avatar Next.js Demo

Overview

This project showcases the implementation of HeyGen's Interactive Streaming Avatar service in a Next.js application. It serves as both a demonstration and a starting point for building advanced avatar-based interactive applications.

preview.mp4

Features

Implemented

  • Background Removal: Real-time green screen background removal
  • Screenshot Capture: Instant frame capture functionality
  • Video Recording: Stream recording with download capability
  • Custom Background: Support for custom image/video backgrounds

Coming Soon

  • Multiple LLM Support: Integration with various AI models
  • Speech-to-Text: Real-time speech transcription
  • Interactive Chatbox: Enhanced communication interface
  • Conversation History: Persistent chat storage and retrieval

Tech Stack

  • Frontend: Next.js 15, React 18, TS
  • Styling: shadcn/ui, Tailwind CSS
  • State Management: Jotai
  • AI Integration: Vercel AI SDK (@ai-sdk/*)
  • Avatar Service: HeyGen Interactive/Streaming Avatar
  • Package Manager: Bun

Getting Started

  1. Clone the repository:
git clone https://github.com/yourusername/interactive-avatar-playground.git
cd interactive-avatar-playground
  1. Install dependencies:
bun install
  1. Start the development server:
bun dev
  1. Open http://localhost:3000 in your browser

Configuration

The project uses environment variables for configuration. Copy .env.example to .env and update the values:

# Required API keys and configurations
HEYGEN_API_KEY=your_api_key_here

Learn More

Deployment

Deploy easily on Vercel, the platform from Next.js creators.

License

This project is MIT licensed.

Built with using Next.js and HeyGen