// documentation

Clavio IDE

The Ultimate AI-Powered Development Environment

Clavio IDE is a powerful, web-based development environment designed for rapid application building and deployment powered by Artificial Intelligence. It combines the ease of AI coding with direct integration into infrastructures like GitHub, Supabase, and Vercel.

// 01

Key Features

AI Code Assistant

Support for premium models (Clavio 3 Code, Gemini 3.1 Pro, GPT-5.4 Pro, Claude Opus 4.7, Llama 4 Scout).

Full-Stack Management

Manage databases and Edge Functions directly within the IDE.

One-Click Deploy

Deploy your application to Vercel with a single click.

Git Automation

Automatic repository creation and file synchronization.

Live Preview

Real-time preview of your application as you write code.

// 02

How to Get API Keys & Tokens

To unlock all features of Clavio, you need to configure the necessary "keys" in Settings (gear icon).

1. GitHub (Git & Push)

  • GitHub Username: Your public GitHub identifier.
  • Personal Access Token (PAT):
    • Go to: GitHub Settings > Tokens
    • Create a "Fine-grained token" or "Classic token".
    • Required Scopes: repo (all) & workflow.
    • This token allows Clavio to create repos and push your code.

2. AI Models (Artificial Intelligence)

Google (Gemini)

Gemini 3.1 Pro, 3.1 Flash

OpenAI

GPT-5.4 Pro & Mini

Anthropic (Claude)

Claude Opus 4.7, Sonnet 4.6

Groq

Llama 4 Scout, Llama 3.3

3. Supabase (Database & Functions)

  • Management API Token: Supabase Access Tokens

    Allows Clavio to create projects and tables for you.

  • Organization ID: Found in your Supabase organization URL (e.g., supabase.com/dashboard/org/your-org-id).

4. Vercel (Deployment)

// 03

Git & GitHub Management

Clavio simplifies Git to the maximum:

Connection

Click "Connect to GitHub" in the Git Panel.

Repo Creation

Clavio can automatically create a new Public or Private repository for your project.

Smart Push

When you click "Push Changes", Clavio doesn't just send files.

Auto-Configuration:It automatically generates necessary configuration files (vite.config.ts, tsconfig.json, tailwind.config.ts).
Auto-Dependencies:It scans your code and updates package.json with the libraries you used.
Environment Variables:If you've connected Supabase, it automatically creates a .env file with the correct credentials.
// 04

Supabase & Database Management

Manage your entire backend without leaving Clavio:

Project Setup

Create a new Supabase project with one click. Clavio handles the provisioning and provides the API keys.

Table Builder

Create tables by defining columns and data types. Clavio automatically adds id, created_at, and updated_at.

Security Policies

Automatically add RLS (Row Level Security) policies to allow access to authenticated users.

Edge Functions

  • Create templates for Supabase Edge Functions.
  • Clavio automatically configures GitHub Actions (.github/workflows/deploy-functions.yml).
  • Important: For automatic deployment of Functions to work, add SUPABASE_ACCESS_TOKEN & SUPABASE_PROJECT_REF as "Secrets" in your GitHub repo.
// 05

Deployment to Vercel

When your app is ready for the world:

01

Open the Deploy Panel.

02

Click "Deploy to Vercel".

03

Clavio packages your app and uploads it to Vercel's global edge network.

04

In a few seconds, you'll have a live link (e.g., project-name.vercel.app).

Clavio IDE - Built for the future of development.