Build a Banuba Face AR Web App with AI

In about an hour, you'll have a working Face AR camera running in your browser, with features such as face filters, beauty try-on, virtual backgrounds, or hand gesture triggers.

You don't need to write code manually. You'll tell Claude Code what to build in plain English, and Banuba's official AI Skills will guide the agent with SDK-specific instructions, starter templates, and integration steps.

Difficulty: ●●○○○ Beginner-friendly
Time: ~1 hour
You need: a laptop, a Banuba license key, Node.js, Claude Code, and the terminal app on your computer.

First time doing something like this?

That's exactly who this guide is for. You'll follow five prep steps and five build steps, each with a clear finish line you can check off. If something doesn't work, jump to Troubleshooting.

What you'll have at the end

A working Web AR demo you can show to stakeholders, hand to a developer, or use to sharpen product requirements. You'll have:

• A starter Web app created in a new local project folder on your computer, for example banuba-far-demo.
• A running AR camera in your browser with Face AR features such as face tracking, filters, makeup, virtual backgrounds, or gesture-based effects.
• SDK-aligned demo code generated with Banuba's official AI Skill instructions, which are versioned with the SDK and kept up to date with every release.

You can open the project in Visual Studio Code, WebStorm, or another IDE you prefer for Web development.

Two common scenarios

No app yet? This guide assumes this scenario. You create an empty local folder, install Banuba AI Skills there, and ask the agent to scaffold a working Web demo from scratch.

Already have a Web app? Open your existing project folder in Claude Code and ask the agent to add Banuba Face AR SDK as a module or feature inside your current app - for example, in a video call, social feed, beauty try-on flow, profile photo flow, or fitness experience.

In both cases, the skill gives the agent Banuba-specific guidance so it can answer SDK questions, generate integration code, and help move from documentation to a working Web AR experience faster.

Who this guide is for

If you're a…	This guide helps you…
Application owner evaluating Banuba	See how Face AR SDK can work in a real web app before committing engineering resources
Product manager scoping a filter, try-on, or video-call AR feature	Validate the user flow and understand what is required for a working integration
Project manager planning the integration	Estimate scope, prepare the right inputs, and brief engineering more clearly
Junior developer with the integration ticket	Get SDK-specific answers faster, avoid long documentation searches, and start from guided integration steps instead of a blank project

How it works

Three pieces work together:

• Banuba Face AR SDK - the AR camera engine that runs inside your app. It requires a Banuba license key.
• An AI coding agent - a desktop coding tool that can read your project, answer questions, and help write code. The first version supports Claude Code. Codex and Qwen Code support is coming soon.
• Banuba's agent skills - packaged instructions that teach the agent how to use Banuba Face AR SDK correctly. The skills are versioned with the SDK, so the agent can rely on up-to-date integration guidance instead of generic or outdated answers.

After setup, you can ask the agent SDK-specific questions in plain English, such as:

"How do I initialize Face AR SDK in a Web project?"

Or ask it to help with implementation:

"Set up a Face AR camera for a Web app with beauty filters and a virtual background."

The skill does not automatically create a finished product after installation. It gives the agent the right Banuba-specific context, so it can help you navigate the documentation, generate integration code, and guide you toward a working Web project faster.

---

Prep - 15 minutes

Never used a terminal?

The terminal is a text-based app on your computer where you can run commands.

• Mac: press ⌘ + Space, type Terminal, then press Enter.
• Windows: press the Win key, type Terminal or PowerShell, then press Enter.

For this guide, you only need to copy a command, paste it into the terminal, and press Enter.

1. Get a Banuba license key

Request a license key at the Banuba license page. You'll receive a license token - a long string of letters and numbers. Save it somewhere safe because you'll need it later during setup.

tip

If your demo needs specific neural networks, such as hand gestures, advanced makeup, or virtual background, mention them when requesting the license. Some features require an add-on to the trial license.

Project managers

Request the license early, even if someone else will run the build. Waiting for the license key is one of the most common reasons demos slip.

2. Confirm your target platform

The first version of Banuba AI Skills supports Web Application projects only.

Platform	What you need	Pick if…
Web	Any modern browser, Node.js, Visual Studio Code or WebStorm	You are adding Face AR to a website or web app

You can use either Visual Studio Code or WebStorm as your code editor.

3. Install the Web toolchain

For Web Application projects, install:

• Node.js - required to run the installer and web project
• Visual Studio Code or WebStorm - used to open and edit the project
• Any modern browser - used to run and test the web app

Done when: Node.js is installed and a sample web project can run in your browser.

4. Install Node.js

Runs the skill installer in the terminal.

Download the LTS version from https://nodejs.org, then open your terminal and run:

node --version

Should return v20.x.x or higher.

5. Install Claude Code

The AI agent that will build for you.

Install from https://docs.claude.com/en/docs/claude-code, then open your terminal and run:

claude --version

Should return a version number.

✅ You're ready when: node --version works, claude --version works, and you've run a sample app on your simulator (or opened a sample web page) at least once.

---

Build - five steps to a working Web AR camera

1. Create a project folder (1 min)

Open your terminal and run:

mkdir banuba-far-demo && cd banuba-far-demo

The folder name is up to you. This is where your demo project will be created.

2. Install Banuba's agent skills (2 min)

warning

Do not visit GitHub manually. The command below is the installer. Copy it, paste it into your terminal, and press Enter.

npx skills add Banuba/ai-skills -a claude-code

This downloads the official Banuba AI Skills into a hidden .claude/skills/ folder.

Done when: the command prints a list of installed skills.

Optional commands

# Install only the far-general skill
npx skills add Banuba/ai-skills --skill far-general -a claude-code

# See the available Banuba skills first
npx skills add Banuba/ai-skills --list

3. Start Claude Code (1 min)

Open your terminal and enter:

claude

A chat will open in your terminal. This is where you talk to the agent and give it instructions.

4. Ask the agent to build the Web Demo (10–30 min)

Type one of the prompts below. Replace the bracketed part with your Banuba license key.

/far-general Set up a Face AR camera for Web with beauty filters and a virtual background. Banuba license key: [paste your token]

/far-general Add face filters and hand gesture triggers to my Web app. Banuba license key: [paste your token]

/far-general Build a makeup try-on camera for Web with lipstick, eyeshadow, foundation, and a shade picker. Banuba license key: [paste your token]

The agent will use the Banuba skill to guide the setup, install the required SDK packages, configure the Web project, wire the camera, and load sample effects. It may ask follow-up questions such as: "Which effects should I preload?" If you are not sure, answer: "Use the defaults."

Done when: the agent reports that the build is finished and tells you how to run the Web project.

5. Run the Web project (5 min)

Open the project in Visual Studio Code or WebStorm. Then follow the run command provided by the agent. It will usually look similar to:

npm install
npm run dev

Open the local browser link shown in the terminal.

🎉 You now have a working Banuba Face AR camera in a Web project. You can test effects, try beauty filters, switch backgrounds, and validate the AR experience directly in your browser.

---

What to do next

If you're a…	Do this
Application owner	Record a screen capture. Align stakeholders on what matters before scoping production.
Product manager	Iterate by re-prompting the agent, for example: "Add a lipstick shade picker," "Trigger this effect on a 👍 gesture," "Replace the background with our brand video."
Project manager	Use the handoff template below to turn the demo into a production integration task.
Junior developer	Use the skill for SDK-specific documentation lookups, for example: /far-general How do I load a custom effect at runtime? Then adapt the demo code to the real Web app.

Developer handoff template

Paste into a ticket or Slack:

Banuba Face AR SDK - Web demo complete, ready for production integration

What's done: A working Web demo was scaffolded with Banuba's far-general skill.
Effects enabled: [face filters / makeup / virtual background / hand gestures / other]
Source: [path or repo link]

Engineering, please:
- Review the demo integration against our Web app architecture.
- Replace the trial license with the production token when ready.
- Wire the AR camera into [feature/screen - e.g. video call, profile photo, product try-on].
- Review performance on our target browser and device matrix.
- Confirm that all required neural networks and add-ons are covered by the license.
- Run our security, privacy, and accessibility review.

References: Banuba Face AR SDK docs
For inline docs lookups in Claude Code, use /far-general.

---

Troubleshooting

Symptom	Cause	Fix
npx: command not found	Node.js is not installed or your terminal has not picked it up yet.	Install the LTS version from https://nodejs.org, then close and reopen your terminal. Run node --version again.
claude: command not found	Claude Code is not installed or not available in your terminal PATH.	Reinstall Claude Code from the official docs, then close and reopen your terminal. Run claude --version again.
/far-general not recognized	Banuba AI Skills were not installed, or Claude Code was started from a different project folder.	Go back to the folder where you installed the skills and start Claude Code again. If needed, rerun the skill installer.
The build is finished, but the Web app does not start	Dependencies may be missing, or the run command failed.	Ask the agent: "Check why the Web app does not start and fix the setup." You can also run the command it provided again and paste the error back into Claude Code.
Browser page opens, but the camera is black	Camera permission was blocked, another app is using the camera, or the browser does not expose camera access correctly.	Allow camera permission in the browser, close other apps using the camera, and refresh the page. If needed, try another modern browser.
License error at runtime	The license key was pasted incorrectly, expired, or does not include the required feature.	Request a fresh key and mention the exact features you need. Then tell the agent: "Update the Banuba license key in the project."
Hand gestures, advanced makeup, or virtual background do not work	The required neural network may not be included in your trial license or project bundle.	Contact Banuba to enable the required add-on, then rerun the project with the updated license and required assets.
Web bundle is too large	The project may include more neural networks or assets than your demo needs.	Tell the agent: "Optimize the Web bundle. Keep only the neural networks and effects required for this demo."
Effects do not load	Effect files may be missing, in the wrong folder, or referenced with an incorrect path.	Ask the agent: "Check how effects are loaded and fix the effect paths."
The app runs, but performance is poor	The browser, device, camera resolution, or enabled effects may be too heavy for the current setup.	Ask the agent to reduce camera resolution, limit preloaded effects, and keep only the required neural networks.

Still stuck? Open an issue or contact Banuba support with the error message, browser name, operating system, and the steps you followed.

---

Reference

All available skills

Skill	What it does	Example prompt
far-general	Helps you understand, plan, and implement Banuba Face AR SDK integration for Web Application projects	"Build a Snapchat-style face-filter camera for a Web Application"

The far-general skill includes starter templates for Web Application projects only. The platform is auto-detected during setup. Banuba AI Skills run locally inside your agent: no extra cost, no prompt bloat, and always versioned with the SDK.

How different roles can use far-general

Role	What to ask for	Example prompt
Application owner	Non-technical explanation of what the SDK can do and how it may support a product demo or campaign	/far-general Explain in simple terms what Face AR SDK can do for a beauty try-on experience.
Product manager or project manager	Technical scope, feature planning, integration requirements, risks, and handoff guidance	/far-general What do we need to prepare to add a Face AR camera to our Web app?
Developer	SDK documentation lookup, code generation, code review, and project implementation help	/far-general How do I load a custom .zip effect at runtime in a Web project?

Common things to ask far-general for

• Face tracking, face filters, masks, AR glasses
• Beauty filters: skin smoothing, teeth whitening, eye enhancement
• Virtual makeup try-on: lipstick, eyeshadow, foundation, blush and more
• Virtual background: blur, replace with image or video
• Hand gesture triggers: 👍 👌 ✋ 🤘 ✌️
• Hand AR effects: ring try-on, nails
• Custom .zip effects loaded at runtime from your CDN
• Video-call integration: Agora, Twilio, Zoom

Supported agents

The first version of Banuba AI Skills supports Claude Code only. Support for Codex and Qwen Code is coming soon.

Agent	Install command
Claude Code	npx skills add Banuba/ai-skills -a claude-code
Codex	Coming soon
Qwen Code	Coming soon

For Claude Code, skills install into .claude/skills/. Future versions will support .codex/skills/ and .qwen/skills/ when Codex and Qwen Code support is released.

No agent setup? Use the LLM-ready documentation files instead:

• llms.txt - shorter version for quick context

• llms-full.txt - complete version for deeper analysis

You can paste these files into ChatGPT, Claude.ai, Gemini, or another LLM. This option is slower and will not create or edit files on your computer, but it is useful for a first look, product scoping, or asking documentation questions without setting up an AI coding agent.

---

Glossary

Term	Definition
Agent skill	Packaged instructions that teach an AI agent how to do one job correctly.
Effect	A Face AR scene: a face filter, makeup look, background, gesture trigger, or any combination. Distributed as a .zip file and loaded at runtime.
License key	The Banuba credential that unlocks the SDK. Required for every build, including trials.
Neural network	In this context, a model bundled with the SDK that recognizes faces, hands, gestures, backgrounds, and other inputs. Some neural networks are add-ons to the base license.
npx	A small tool that ships with Node.js. It runs an installer command without permanently installing the tool. Safe to use.
Repo / GitHub repo	A folder of code on github.com. For this guide, you do not need to visit the repo manually. The install command fetches everything for you.
Slash command	A command inside an AI agent that starts with /, such as /far-general.
Terminal	The text-window app on your computer. On Mac, use Terminal. On Windows, use Terminal or PowerShell.