Welcome to your Lovable project

Project info

URL: https://lovable.dev/projects/0c23df06-144b-46ca-a622-913c497fc93f

How can I edit this code?

There are several ways of editing your application.

Use Lovable

Simply visit the Lovable Project and start prompting.

Changes made via Lovable will be committed automatically to this repo.

Use your preferred IDE

If you want to work locally using your own IDE, you can clone this repo and push changes. Pushed changes will also be reflected in Lovable.

The only requirement is having Node.js & npm installed - install with nvm

Follow these steps:

# Step 1: Clone the repository using the project's Git URL.
git clone <YOUR_GIT_URL>

# Step 2: Navigate to the project directory.
cd <YOUR_PROJECT_NAME>

# Step 3: Install the necessary dependencies.
npm i

# Step 4: Start the development server with auto-reloading and an instant preview.
npm run dev

Troubleshooting Lovable automation

Lovable's GitHub App works best when the working branch exists on the same repository as main. If a Codex-generated branch only lives on the upstream codex remote, mirror it to your fork before asking Lovable to create a PR:

git remote -v                               # ensure "origin" points at your fork
git ls-remote --heads origin <branch>       # confirm the branch exists on origin
git fetch codex <branch>                    # fetch the branch from Codex' fork
git checkout -b codex-<branch> codex/<branch>
git push -u origin codex-<branch>           # push to origin so Lovable can PR

Once the branch is available on origin, rerun the Lovable PR workflow.

Private npm packages (for example @crayonai/react-ui) also require explicit authentication when installing dependencies locally or in CI. The repository contains a .npmrc that expects a GitHub token via the GITHUB_TOKEN environment variable (it also falls back to NODE_AUTH_TOKEN or NPM_TOKEN). Provide a token with read access to the @crayonai scope before running npm install:

export GITHUB_TOKEN=ghp_your_token
npm install

Alternatively, configure the token in your CI/CD secret manager (Lovable supports GITHUB_TOKEN, NODE_AUTH_TOKEN, or NPM_TOKEN). If you only have a token under one of the fallback names, the install script will surface a clear error instead of a 404 so you know which secret is missing.

Crayon UI setup (React)

The product spec expects the Canvas experience to follow the Crayon design system. To wire this up in the current React/Vite project:

1. Install the Crayon UI React package and its peer dependencies by following the official Crayon React guide.
2. Import the shared Crayon styles in src/main.tsx so they are applied across the entire application shell.
3. Wrap your root component with any providers required by the Crayon package (for example a theme or token provider) before rendering the rest of the app.

With those steps in place, every Canvas view rendered in React will inherit the Crayon tokens and component styles expected by the spec.

Edit a file directly in GitHub

• Navigate to the desired file(s).
• Click the "Edit" button (pencil icon) at the top right of the file view.
• Make your changes and commit the changes.

Use GitHub Codespaces

• Navigate to the main page of your repository.
• Click on the "Code" button (green button) near the top right.
• Select the "Codespaces" tab.
• Click on "New codespace" to launch a new Codespace environment.
• Edit files directly within the Codespace and commit and push your changes once you're done.

What technologies are used for this project?

This project is built with:

• Vite
• TypeScript
• React
• shadcn-ui
• Tailwind CSS

How can I deploy this project?

Simply open Lovable and click on Share -> Publish.

Supabase & Lovable Cloud setup

This project runs on Lovable Cloud, which provisions a Supabase backend for you. When you work inside Lovable everything is pre-configured, but local development still requires Supabase credentials and a running database so that the generated SQL migrations and Edge Functions can execute correctly.

Environment variables

Create a .env.local file (ignored by git) and copy the Supabase URL and anon key from the Lovable Cloud project settings (Project → Settings → Supabase).

VITE_SUPABASE_URL="https://YOUR-PROJECT.supabase.co"
VITE_SUPABASE_PUBLISHABLE_KEY="YOUR-ANON-KEY"

Lovable Cloud stores these secrets securely for production, but Vite only reads them from your local environment when running npm run dev.

If you do not configure a THESYS_MODEL, the Supabase build function and the Report Studio will fall back to the legacy c1/anthropic/claude-sonnet-4/v-20250930 identifier so previously generated reports remain compatible.

C1 function payload configuration

The supabase/functions/c1 Edge Function now supports an opt-in control frame payload. Set C1_ENABLE_CONTROL_FRAME=true to include the additional control_frame system message when invoking the Thesys API. Leave the variable unset (the default) to keep the legacy two-message payload, which also skips any control frame lookups.

Running Supabase locally

If you want to exercise the SQL schema under supabase/migrations/20251030144752_fc48f646-7f9f-4a33-84c4-b1f3d0882144.sql or test the Edge Functions in supabase/functions/, install the Supabase CLI and start the services locally:

supabase login
supabase start
supabase db reset --local --schema public

The CLI reads project configuration from supabase/config.toml (project ref awltjnhkkqamuvhommxk) so the migrations and functions mirror the Lovable Cloud environment.

Can I connect a custom domain to my Lovable project?

Yes, you can!

To connect a domain, navigate to Project > Settings > Domains and click Connect Domain.

Read more here: Setting up a custom domain