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
- 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
- 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
- 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
- Clone the repository:
git clone https://github.com/yourusername/interactive-avatar-playground.git
cd interactive-avatar-playground- Install dependencies:
bun install- Start the development server:
bun dev- Open http://localhost:3000 in your browser
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_hereDeploy easily on Vercel, the platform from Next.js creators.
This project is MIT licensed.
Built with using Next.js and HeyGen