Skip to content

Stems Labs

3D, audio–reactive visualizer for Spotify tracks.

Code Video Cerebral Valley

Core trick

Chat completion turns Spotify track metadata into a Meshy prompt, and a procedural 3D model animates to the audio preview.

Tags

creative/musicdev tools

Description

3D, audio–reactive visualizer for Spotify tracks.
haithamelmengad/visus-gpt5-hackathon★ 00 forksTypeScriptCreated Aug 9, 2025 · last push Aug 10, 2025

README excerpt

## Visus (Hackathon)

3D, audio–reactive visualizer for Spotify tracks. The web app lives in `web/` and is a Next.js App Router project. It generates a procedural 3D model for a track and animates it to the audio preview.

### OpenAI API usage in this project:
Uses `chat.completions.create` to build a single-line Meshy prompt from Spotify data in the format `Artist — <2-4 keywords>`

#### Post-processing of the AI output
Ensures the first artist is prefixed, strips punctuation, and enforces 2–4 tokens after the dash

### Prerequisites
- Node.js 20+ and npm 10+
- Spotify Developer application (SPOTIFY_CLIENT_ID and SPOTIFY_CLIENT_SECRET)
- OpenAI account (OPENAI_API_KEY)
- Meshy account (MESHY_API_KEY)
- Random (NEXTAUTH_SECRET)

### Spotify setup
- Go to the Spotify Developer Dashboard and create an app. https://developer.spotify.com/
- Add the redirect URI: `http://127.0.0.1:3000/api/auth/callback/spotify`
- Add your Spotify account to user management
- Copy the Client ID and Client Secret.

### OpenAI setup
- Create an OpenAI account if you don't have one already. https://platform.openai.com/
- Generate an API key

### Meshy setup
- Create a Meshy account. https://www.meshy.ai/discover
- Create an API key https://www.meshy.ai/settings/api
  
### Quickstart

1. Create `web/.env.local` with the following variables:
   ```bash
   SPOTIFY_CLIENT_ID=your_spotify_client_id
   SPOTIFY_CLIENT_SECRET=your_spotify_client_secret
   NEXTAUTH_SECRET=your_random_string
   NEXTAUTH_URL=ht

Team