explaingit

ashchanance/3d-companion-animation

Analysis updated 2026-05-18

★ 4TypeScriptAudience · vibe coderComplexity · 3/5Setup · moderate

TLDR

A browser-based AI companion with a Live2D animated character that chats, syncs lip movements to speech, and relays live comments from Pump.fun. Deployable to Vercel with an embeddable widget included.

Mindmap

mindmap
  root((HARUKA))
    What it does
      Live2D character render
      AI chat with voice
      Lip sync expressions
      Pump.fun relay
    Tech Stack
      TypeScript Vite
      Live2D Cubism SDK
      ElevenLabs TTS
      Vercel deployment
    Features
      Personality presets
      Embeddable widget
      Usage quota gating
      EN JP language toggle
    Audience
      Streamers creators
      Vibe coders
      Crypto community
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Add an animated AI companion to your website that responds to chat with voice and matching facial expressions.

USE CASE 2

Stream live comments from Pump.fun into an AI character that responds to your audience in real time.

USE CASE 3

Embed a compact HARUKA chat widget on any web page using a JavaScript snippet with API key gating.

USE CASE 4

Run a personality-customized AI chatbot with multiple preset personas (classic, scholar, cyberpunk) and short-term memory.

What is it built with?

TypeScriptViteLive2D Cubism SDKElevenLabsNode.jsVercel

How does it compare?

ashchanance/3d-companion-animation0labs-in/vision-linkarviahq/arvia
Stars444
LanguageTypeScriptTypeScriptTypeScript
Setup difficultymoderatemoderatemoderate
Complexity3/53/53/5
Audiencevibe coderdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

Requires API keys for an OpenAI-compatible provider and optionally ElevenLabs for cloud voice, the Pump.fun relay needs a Vercel-compatible SSE-capable host.

In plain English

HARUKA is a browser-based AI companion that renders an animated 2D character (using a standard called Live2D) in the browser and connects it to a chat AI backend. When you talk or type to HARUKA, the character responds with text and spoken audio, and its expressions and mouth movements change to match the reply. The project is built on top of the official Live2D Cubism SDK for web browsers with a custom application layer added on top. The chat backend is a shared API route that both the main website and an embeddable widget version use. You can connect it to any OpenAI-compatible chat provider by supplying a base URL, model name, and API key through environment variables. HARUKA ships with several personality presets including classic, scholar, sunset, and cyberpunk. It keeps a short conversation history in the browser so replies stay contextually aware. Voice input uses ElevenLabs when configured, or falls back to the browser's built-in speech recognition. Voice output similarly uses ElevenLabs text-to-speech or the browser's built-in speech synthesis. A notable feature is the Pump.fun live relay. Pump.fun is a platform where people create and trade tokens. The relay connects to that platform's live comment stream and feeds viewer comments into the HARUKA session, letting the character respond to real-time audience messages in the browser. The embeddable widget version ships as a small JavaScript snippet you add to any web page. It opens a compact chat window using the same backend as the main site, and supports usage quotas and API key gating so you can control who can use it. Setup requires Node.js. You run npm install, copy an example environment file to configure your API keys, and start a Vite development server. The project is shaped for deployment on Vercel.

Copy-paste prompts

Prompt 1
Set up HARUKA on Vercel with my OpenAI-compatible API key so the Live2D character responds to chat input with voice.
Prompt 2
Configure the ElevenLabs voice ID in HARUKA's .env file so the character speaks with a specific voice and syncs lip movements.
Prompt 3
Embed the HARUKA widget on my website with a widget API key and set a per-session usage limit of 50 messages.
Prompt 4
Connect the Pump.fun live relay in HARUKA to a token stream and configure comment length filters and blocked-word lists.
Prompt 5
Switch HARUKA to the cyberpunk personality preset and point the provider to a different OpenAI-compatible base URL.

Frequently asked questions

What is 3d-companion-animation?

A browser-based AI companion with a Live2D animated character that chats, syncs lip movements to speech, and relays live comments from Pump.fun. Deployable to Vercel with an embeddable widget included.

What language is 3d-companion-animation written in?

Mainly TypeScript. The stack also includes TypeScript, Vite, Live2D Cubism SDK.

How hard is 3d-companion-animation to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is 3d-companion-animation for?

Mainly vibe coder.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Scan in gitsafehub Deploy in gitdeployhub ashchanance on gitmyhub

Verify against the repo before relying on details.

Alternatives & similar repos