Welcome to Aria Studio

Aria Studio is a vibe coding platform that turns your ideas into fully functional web applications — entirely from your browser. Just describe what you want to build, and Aria, our intelligent AI assistant, writes the code, sets up the project, and gives you a live preview in seconds. No local setup, no terminal commands, no configuration files. Just create and ship.

🤖

Powered by Aria AI

Our built-in AI assistant intelligently selects the best model for each task to deliver production-quality code

🚀

One-Click Deploy

Ship your project to Vercel, Netlify, GitHub, or GitLab with a single click

💻

Full IDE in Your Browser

Code editor, terminal, file explorer, and live preview — everything you need, zero installation

Getting Started

Create an Account

Visit the Aria Studio homepage

Click Sign Up in the top-right corner

Choose a subscription plan (Free tier available)

You're ready to build!

Your First Project

💬

Click "Start new chat" in the sidebar

✏️

Describe what you want to build in plain English

⚡

Aria generates code, dependencies, and file structure

👀

Watch the Live Preview update in real-time

🔄

Refine with follow-up messages

Interface Overview

📋

Sidebar (Left)

Chat history, new chat button, and settings access

💬

Chat Panel (Center)

Your conversation with Aria AI

🛠️

Workbench (Right)

Code editor, file explorer, terminal, and live preview

🔝

Navbar (Top)

Account menu, token usage, theme toggle, deploy button

AI Chat — Meet Aria

Aria is your AI coding partner. Unlike traditional tools where you pick from dozens of models, Aria intelligently handles model selection behind the scenes — always choosing the best model for the task at hand.

🔨

Build Mode

The default mode. Aria generates runnable code, creates files, installs dependencies, and updates the live preview in real-time.

New projectsAdd featuresFix bugsRefactor

💬

Discuss Mode

Chat without code changes. Aria answers questions, explains concepts, and helps plan features before building.

PlanningLearningArchitectureCode review

Prompt Tips

✨

Enhance Your Prompts

Click the ✨ enhance icon before sending to have Aria automatically refine and improve your prompt.

📎

Attach Images

Upload screenshots, mockups, or wireframes — Aria can recreate designs from images.

Good vs Great Prompts

✕"Make a website"

✓"Build a modern SaaS landing page with hero section, pricing table with 3 tiers, testimonials carousel, and contact form. Use React and Tailwind CSS."

Browser IDE

A complete development environment running entirely in your browser. No downloads, no installations — just open and start coding.

Code Editor

✓Syntax highlighting for 50+ languages

✓Multi-file editing with tabs

✓Find and replace across files

✓Code folding and bracket matching

✓Keyboard shortcuts (Cmd/Ctrl + S)

✓Manual editing alongside AI changes

File Explorer

Browse your entire project structure in the sidebar of the workbench:

•Browse all files and folders

•Click to open in editor

•Files from Aria appear instantly

•Full project tree navigation

Terminal

Full-featured terminal for running commands in a secure, sandboxed environment.

npm install package-namenpm run buildnpm run devnpm test

Live Preview

🔄

Refresh

Reload the preview

📱

Responsive

Toggle mobile/desktop

📸

Screenshot

Capture preview state

🔗

Open External

Open in new tab

Design & Customization

Design Scheme

🎨

Customize the look of your generated projects before Aria writes code. Choose color palettes, typography, and layout styles for a consistent design system.

Access via the 🎨 icon in the chat input toolbar.

Inspector Panel

🔍

Click any element in the Live Preview to inspect its HTML tag, CSS classes, and computed styles. Toggle Inspector Mode with the 🔍 icon in the preview toolbar.

Framework Templates

Frontend Frameworks

React + ViteVue.jsAngularSvelteSolidJS

Full-Stack Frameworks

Next.jsAstroRemixNuxtQwik

Special Templates

Slidev

Create presentation slides with code

Deployment

Ship to production with one click — no CI/CD pipelines to configure. Connect your accounts in Settings, then deploy from the header.

V
Vercel

Go to Settings → Vercel

Enter your Vercel API token

Click Connect — green checkmark confirms

Click Deploy in the top navigation bar

Select Vercel as deployment target

Get a live URL with global CDN and HTTPS

N
Netlify

Go to Settings → Netlify

Enter your Netlify API token

Click Connect to verify

Click Deploy in header and select Netlify

Get a live URL with automatic build optimization

G
GitHub

Go to Settings → GitHub and connect your account

Click the deploy button and select Push to GitHub

Choose an existing repo or create a new one

Code is committed and pushed automatically

G
GitLab

Go to Settings → GitLab and enter your access token

Click deploy and select Push to GitLab

Choose a project or create a new one

Code is pushed to your GitLab repository

Integrations

Supabase Database

⚡

Connect a Supabase backend for databases, authentication, and real-time features.

Create a project at supabase.com

Go to Settings → Supabase in Aria Studio

Enter your project URL and API keys

Aria can create tables, write queries, set up auth, and manage your database

MCP Tools

🔌

Model Context Protocol (MCP) extends Aria's capabilities with external tools and services — databases, APIs, and custom business logic.

Configure MCP servers in Settings → MCP Servers. This is an advanced feature for power users.

Git — Clone a Repo

📂

Click "Clone a repo" on the home screen

🔗

Paste a GitHub or GitLab repository URL

⚡

Aria clones the project and sets up the environment

🤖

Start modifying with AI assistance

Chat History & Projects

☁️

Cloud Sync

All conversations sync across devices. Switch browsers or machines — your projects are always there.

📦

Import & Export

Import chat conversations or project folders. Export your history for backup or sharing.

📋

Managing Chats

Search, rename, pin, or delete chats from the sidebar. Hover a chat for quick actions.

Account & Billing

Subscription Plans

Free

Basic

Pro

Teams

Upgrade anytime from the account dropdown or Settings → Profile.

Token Usage

Every AI interaction uses tokens. Track usage in the account dropdown (top-right). The progress bar shows your allocation. Upgrade when depleted.

Profile Settings

Manage your display name, username, bio, profile picture, and contact info in Settings → Profile.

Tips & Best Practices

Be Specific About Your Stack

Mention frameworks and libraries (e.g., "Use React with Tailwind CSS and Framer Motion") in your initial prompt for correct scaffolding.

Use the Enhance Button

Click the ✨ enhance icon before sending your prompt. Aria will refine your description for better results.

Scaffold First, Then Refine

Start with a broad request for the basic structure, then refine with follow-up messages for cleaner code.

Batch Simple Changes

Combine multiple small tasks in one message — e.g., "Change heading to blue, add a footer, and round the buttons".

Use Discuss Mode for Planning

Before building complex features, switch to Discuss Mode to plan architecture, then switch to Build Mode to implement.

Attach Screenshots

Want Aria to match a specific design? Attach a screenshot or mockup image — Aria can recreate visual designs from images.

Need help? Visit our contact page or reach out to our support team.