# AI use cases for Mesh Avatar Studio (shinshin86/mesh-avatar-studio) Repo: [shinshin86/mesh-avatar-studio](https://github.com/shinshin86/mesh-avatar-studio) | Use cases: 5 | Page: https://dedupedai.com/use-cases/shinshin86-mesh-avatar-studio/ Mesh Avatar Studio is a TypeScript project that turns one illustration into an animated 2D mesh avatar, with a coding agent preparing it and a local editor for fine-tuning. This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL. - Turn your illustration into an animated 2D avatar: https://dedupedai.com/use-cases/shinshin86-mesh-avatar-studio/animate-own-illustration/ - Stream your avatar in OBS with webcam tracking: https://dedupedai.com/use-cases/shinshin86-mesh-avatar-studio/stream-avatar-in-obs/ - Try an avatar in the browser without installing anything: https://dedupedai.com/use-cases/shinshin86-mesh-avatar-studio/try-avatar-in-browser/ - Share a finished avatar as one .mavatar file: https://dedupedai.com/use-cases/shinshin86-mesh-avatar-studio/share-avatar-as-mavatar-file/ - Add drawn eyes and mouths with Codex: https://dedupedai.com/use-cases/shinshin86-mesh-avatar-studio/add-drawn-eyes-mouths-with-codex/ ## How to turn your illustration into an animated 2D avatar with Mesh Avatar Studio Repo: [shinshin86/mesh-avatar-studio](https://github.com/shinshin86/mesh-avatar-studio) | Difficulty: Intermediate | Time: 60 minutes | Basis: From the README An agent builds a mesh avatar from your PNG, and you check it in the local editor. **Who it is for:** A creator or developer with one character illustration who wants it to blink, talk and turn its head. **The problem:** Animating a 2D character by hand means drawing many frames and placing each part manually. **The outcome:** A saved avatar project under projects/ that plays blinking, talking and head motion in the editor preview. ### Steps 1. Run `npx create-mesh-avatar-studio` 2. Run `cd mesh-avatar-studio` 3. Open Claude Code or Codex in the repository folder and give it your PNG following docs/agent-guide.md 4. Run `npm run dev` and open the URL printed in the terminal 5. Choose Open project, pick your project, then use Pose test and Lip sync to check the motion ### Prompt to paste into your agent ```text In the mesh-avatar-studio repository, follow docs/agent-guide.md to create an avatar from . Expect a project folder under projects/ that the editor can open. Verify by confirming that Pose test and Lip sync run in the preview. ``` ### Caveat The bundled Miko sample is read-only and is not covered by the MIT License, so choose Copy and keep editing before changing it and use your own illustration for a personal avatar. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/shinshin86-mesh-avatar-studio/animate-own-illustration/ ## How to stream your avatar in OBS with webcam tracking with Mesh Avatar Studio Repo: [shinshin86/mesh-avatar-studio](https://github.com/shinshin86/mesh-avatar-studio) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README Drive the avatar with your face and voice on the Live page and add its stream URL to OBS. **Who it is for:** A streamer or VTuber-style creator who needs an avatar that follows their face and voice during a live broadcast. **The problem:** Live avatars need face tracking, mouth sync and a clean transparent overlay that works in streaming software. **The outcome:** An avatar in OBS that mirrors your head, eyes and voice, with a transparent background. ### Steps 1. Run `npm run dev` in the project folder 2. Open your project in the editor and choose Live 3. Start the camera, face forward with relaxed eyes and a closed mouth, then choose Calibrate 4. Choose Copy OBS URL, then add it as an OBS Browser Source at 1080 × 1080 5. Keep the Live page open in its own window while streaming ### Prompt to paste into your agent ```text In the mesh-avatar-studio repository, start the dev server with npm run dev, then open the Live page for . Expect a Copy OBS URL result that loads in an OBS Browser Source. Verify that the stream view moves when the Live page tracking is active. ``` ### Caveat The OBS URL only works while the local development server runs, and the Live page must stay open in its own window. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/shinshin86-mesh-avatar-studio/stream-avatar-in-obs/ ## How to try an avatar in the browser without installing anything with Mesh Avatar Studio Repo: [shinshin86/mesh-avatar-studio](https://github.com/shinshin86/mesh-avatar-studio) | Difficulty: Beginner | Time: 15 minutes | Basis: From the README Open the Player in Chrome or Edge and move the sample or your own .mavatar file with your face. **Who it is for:** A curious viewer or non-developer who wants to see the avatar move before setting up any tools. **The problem:** Setting up a development environment just to see a demo is a barrier for most people. **The outcome:** The sample or your own .mavatar file animates in the browser, with face tracking and microphone lip sync. ### Steps 1. Open https://shinshin86.github.io/mesh-avatar-studio/play/ in Chrome or Edge 2. Open the bundled sample or choose your own .mavatar file 3. Allow camera and microphone access when the browser asks 4. Choose Open avatar window to show the avatar in its own window ### Prompt to paste into your agent ```text Open the Mesh Avatar Studio Player in Chrome or Edge and load the bundled sample. Expect the avatar to animate in the page. Verify that blinking and talking appear when the webcam and microphone are on. ``` ### Caveat The Player has no stream URL, so transparency and the OBS Browser Source need the Live page in the local editor instead. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/shinshin86-mesh-avatar-studio/try-avatar-in-browser/ ## How to share a finished avatar as one .mavatar file with Mesh Avatar Studio Repo: [shinshin86/mesh-avatar-studio](https://github.com/shinshin86/mesh-avatar-studio) | Difficulty: Intermediate | Time: 15 minutes | Basis: From the README Export your saved avatar as a single file that another person can import into Studio. **Who it is for:** A creator who wants to send a finished avatar to a collaborator or another Studio user. **The problem:** Moving an avatar project between machines means copying rigs, layers, expressions and metadata correctly. **The outcome:** One .mavatar file that a recipient imports as a new project folder under projects/. ### Steps 1. Run `npm run dev` and open your project in the editor 2. Choose Export .mavatar, keeping Include source image on if the recipient should edit it 3. Send the downloaded file to the recipient 4. On the recipient's machine, run `npm run dev`, choose Open project, then Import .mavatar and select the file ### Prompt to paste into your agent ```text In the mesh-avatar-studio repository, export the project as a .mavatar file using the editor. Expect a downloaded archive under 128 MiB. Verify that it imports as a new folder under projects/ and plays in the preview. ``` ### Caveat Without the source image the imported avatar can play but cannot be edited or rebuilt, and import requires npm run dev. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/shinshin86-mesh-avatar-studio/share-avatar-as-mavatar-file/ ## How to add drawn eyes and mouths with Codex with Mesh Avatar Studio Repo: [shinshin86/mesh-avatar-studio](https://github.com/shinshin86/mesh-avatar-studio) | Difficulty: Intermediate | Time: 45 minutes | Basis: From the README Have Codex draw closed eyes, vowel mouths and expressions so blinking and talking look more natural. **Who it is for:** A creator who has an animated avatar that looks stiff and wants drawn eye and mouth variants. **The problem:** Mesh deformation alone makes eyes and mouths look less natural than drawn variants. **The outcome:** Drawn closed eyes and vowel mouths, and optionally expressions, that the editor reloads automatically. ### Steps 1. Open your project in the editor and go to Drawn variants 2. Check Eyes, Mouth or both, then copy the message shown 3. Open Codex in the repository folder and paste the message 4. Wait for Codex to draw and import the variants, then check the reloaded preview ### Prompt to paste into your agent ```text In the mesh-avatar-studio repository, use Codex to draw the eye and mouth variants for as described in the copied editor message. Expect the drawn variants imported into the project. Verify that the editor reloads them and that blinking and vowel mouths use the new images. ``` ### Caveat Claude Code cannot generate images, so its message only prepares masks and prompts for a separate image generator. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/shinshin86-mesh-avatar-studio/add-drawn-eyes-mouths-with-codex/