Browser IDE

The LaraCopilot IDE is a full development environment that runs entirely in your browser. No local setup, no Docker, no environment configuration — everything runs on a managed container.

IDE overview

The IDE is split into several panels:

File Explorer

The left sidebar shows your project's full directory tree.

• Click a file to open it in the editor
• Expand/collapse folders by clicking them
• Files are colour-coded by type (PHP, JS, CSS, Blade, etc.)

Creating files and folders:

• Right-click a folder to see the context menu
• Options include: New File, New Folder, Upload File

Uploading files:

• Drag and drop files onto the explorer
• Or use the Upload option in the context menu
• Useful for adding images, config files, or seed data

Code Editor

The editor is built on Monaco Editor (the same engine as VS Code).

• Full syntax highlighting for PHP, JavaScript, TypeScript, CSS, Blade, JSON, and more
• Code folding, line numbers, and a minimap on the right
• Auto-completion for common patterns
• Save: Ctrl + S (Windows/Linux) or Cmd + S (Mac)

Unsaved changes are indicated in the tab bar. Save before running or deploying to ensure your latest code is live.

AI Chat sidebar

The right-side chat panel lets you generate and modify code using natural language — the AI has full context of your existing project.

How to use:

1. Type your request in the chat input at the bottom of the sidebar
2. The AI generates code and shows which files it will modify
3. Review the proposed changes
4. Click Apply to write the changes to your project files
5. The modified files open automatically in the editor

Example requests:

Add a search bar to the tasks list that filters by title

Create a middleware that logs all incoming requests to the database

Refactor the UserController to use a repository pattern

Revert last change: If an AI-generated change broke something, click Revert in the header toolbar to undo the last set of AI modifications.

Terminal

The integrated terminal runs inside your project container. Use it like any Linux terminal.

Common commands:

php artisan migrate
php artisan make:controller ProductController
composer require spatie/laravel-permission
npm install && npm run build
php artisan tinker

Toggle terminal visibility: Click the terminal icon in the bottom toolbar or drag the panel divider.

Running your project

Click Run in the IDE header to start your application.

1. The container compiles assets and starts services
2. A Live App URL appears in the header (e.g. https://myapp123.laracopilot.com)
3. Click the URL or the Open in new tab button to view your app
4. The built-in preview panel can also load the URL inline

Click Stop to shut down the running instance.

Visual editing

Once your app is running, you can edit text and styling directly in the live preview — no chat prompt, no manual file hunting.

Turning on visual edit mode

Click the Visual Edit button in the preview's chrome bar (top-left, next to the URL field). The button turns red while the mode is active. Click it again to leave the mode.

Selecting an element

With visual edit on, move your cursor over the preview:

• Hover an element — a blue outline highlights it
• Click — the outline turns amber and a side panel opens on the right with that element's properties

Links inside the preview still navigate normally, so you can click around to reach the page you want before selecting something on it. Wrapper tags like html, body, script, and iframe are skipped — you'll always land on a visible element.

Editing text

If the selected element has direct text content, the side panel shows a Text section with an inline editor. Change the text and click out — the change appears in the preview immediately and writes through to the matching template file when you save.

Text edits are matched by literal string replacement across your view files (Blade, Vue, JSX/TSX, HTML, and other templates under resources/). Controllers, models, and config files are never touched.

Editing styles

The side panel groups every style property into collapsible sections:

Every change is applied to the live preview the moment you adjust the value, so you can iterate visually.

Saving and discarding

• Click the × in the panel header or click Visual Edit again to exit the mode
• If you have unsaved changes, a confirmation dialog asks you to Save Changes or Discard
• Save Changes writes everything to disk and reloads the preview
• Discard drops all visual edits in this session

Saved style edits are written to a generated file at public/visual-edits.css, which LaraCopilot links from your project's layout automatically. You can review or edit this file like any other in the editor.

Environment variables

Click the Env tab (or .env in the file explorer) to open the environment variable editor.

• Add, edit, or delete any environment variable
• Changes are saved immediately to the container's .env file
• Restart the app after changing env vars for them to take effect

Downloading your project

Click Download ZIP in the header toolbar to download the full project as a .zip file. This includes all files, migrations, and assets.

Sharing a project

Click Share in the IDE header to copy a link to your running app. The link points to:

• The project's deployed URL if it has been deployed (Laravel Cloud, custom domain)
• Otherwise the project's live container URL (e.g. https://myapp123.laracopilot.com)
• A local preview URL as a fallback

Giving someone access to a project

Project access is managed in Team Settings, not in the IDE. To let another team member open a project:

1. Go to Team Settings in the sidebar (you must be the team owner)
2. Find the member in the Members list
3. Tick the checkbox next to each project you want to grant them access to
4. Click Save Access for that member

By default, team members can't see any of the team's projects. The owner and the original creator of a project always have access automatically; everyone else needs an explicit grant. See Teams for the full flow, including invitations.

LaraCopilot does not currently support public share links, expiring links, or view-only access — sharing is always with named team members and grants full editing capability.

Deploying from the IDE

Two deployment options are available directly from the IDE header:

GitHub: Push the project to a GitHub repository. See the GitHub Integration guide for setup.

Laravel Cloud: Deploy directly to a Laravel Cloud environment. See the Laravel Cloud guide for setup.

Keyboard shortcuts