Next.js application demonstrating implementation of an Elements AI visual using Rive.
The component /components/ai-visual.tsx renders the visual element with useRive from @rive-app/react-webgl2 (alternatively use @rive-app/react-canvas-lite).
The AI visual 'Command' is included in this repo at /public/command-2.0.riv.
Elements AI visuals are all setup in a similar way with matching state machines.
Command as an example supports 4 different states: listening, thinking, speaking, asleep. By default it can also be configured into 10 different colors. See the enum in ai-visual.tsx or visit the website for details.
Rename .env.example and populate environment variables.
Install with pnpm i and run development environment with pnpm dev
Open http://localhost:3000 with your browser.
We do not recommend using this repo as a starting template. Please see Next.js AI Chatbot and Next Forge for more complete and fully featured application examples.
Learn more about the different parts of this application:
- Rive Guide - learn about the Rive application and features.
- Rive Runtimes - learn about Rive Runtimes.
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
- Vercel AI SDK - An open source library for building AI-powered user interfaces.