Code Editor

A code editor for an AI builder. The project's files on the left, code you can type in, in tabs in the middle, and an agent on the right that reads the project and proposes edits. Each edit is drawn inside the code with its own Accept and Reject, and you can attach files or add project files to a message.

Get lifetime access to installPro screen · 4 examples · built from 6 Layro components

Open full screen

When to use

An AI app builder or coding agent with a project to edit
Reviewing changes an agent proposed before they are saved
Any product where people and an agent edit the same files

When not to use

A chat without files: use the Agent Chat screen
Watching an agent run step by step: use Agent Run

The decision inside it

Nothing changes until you accept it, one change at a time

The agent's edits arrive as proposals inside the code, so you can keep one and drop the next. A change whose lines you edited after the agent read them is marked out of date, with Re-run, instead of being written over your edit.

Installation

Code Editor is a Pro screen, included with lifetime access. It is two files on top of the Layro components it is made of.

Add the components it uses:

npx shadcn@latest add @layro/button @layro/badge @layro/kbd @layro/menu @layro/tooltip @layro/toast

Copy screens/code-editor-screen.tsx and screens/data/code-editor-screen.ts from the Code tab above into your project, at the same paths.
It also imports @/lib and @/demos/portraits: Layro’s shared helpers and the demo’s sample images. Point them at your own.

Usage

app/page.tsx

import { CodeEditorScreen } from "@/screens/code-editor-screen";

export default function Page() {
  /* A screen fills the box it is given: give it the window. */
  return (
    <main className="h-dvh">
      <CodeEditorScreen className="h-full" />
    </main>
  );
}

Built from

Every Layro component this screen imports. Each has its own page, props and install command.

API reference

Read from CodeEditorScreenProps when the site is built. It also takes every attribute a div does, such as className.

CodeEditorScreen

Prop	Type	Notes
`state`	`CodeEditorState`	Which case to open on. Default "review".
`logo`	`React.ReactNode`	The product's mark in the title bar. The project's initial when not given.
`modelAvatar`	`(model: string) => React.ReactNode`	–
`onAccept`	`(hunk: Hunk) => void`	Called when a proposed change is accepted into the file.
`onReject`	`(hunk: Hunk) => void`	Called when a proposed change is rejected.
`onSend`	`(text: string, options: { mode: AgentMode; model: string; context: string \| null }) => void`	Called with each message sent to the agent.
`className`	`string`	–

Accessibility

Each proposed change is a labelled group, with removed and added lines named for screen readers
The file tree, tabs and quick open work from the keyboard; ⌘P opens quick open and ⌘S saves
Every line is a labelled text field: type, Enter, Backspace, Tab and the arrow keys work as in an editor
The agent's replies are announced as they arrive
Accept, reject and re-run confirm in a toast

Responsive behavior

Fills the box it is given: mount it at the window's height
The file tree folds away first; on a narrow screen the agent takes the whole width and the editor is one tap away
Light and dark come from the Layro theme: it follows the dark class on <html>, like every component.