> ## Documentation Index > Fetch the complete documentation index at: https://docs.major.build/llms.txt > Use this file to discover all available pages before exploring further. # Editor > Build apps with AI assistance in the live editor. The Major Editor provides a collaborative environment to modify your applications with AI assistance. # Building with AI The editor includes an AI assistant with full context of your application code. You describe what you want to build or change in the chat panel, and the AI reads your codebase, asks clarifying questions if anything is ambiguous, and works through the implementation with you. ## Images and Attachments You can attach images and files to your AI chat messages. Drag and drop or paste screenshots, mockups, or reference images directly into the chat. Supported file types include: * **Images** — PNG, JPG, GIF, and other common formats up to 5MB. * **PDFs** — for documentation or design references up to 5MB. * **Office Documents** - .docx, .pptx, .xlsx files up to 10MB. * **Text files** — plain text files up to 100KB. * **Markdown files** — .md files up to 100KB. * **JSON files** — .json files up to 100KB. The AI uses these attachments as context when building or modifying your app — useful for matching a specific design, reproducing a bug from a screenshot, referencing documentation, or providing structured data for implementation. ## @ Mentions Type `@` in the chat to explicitly reference connectors, attachments, and workspace files in your message. This tells the AI exactly which resource or file you're talking about. ## Tool Cards When the AI executes resource operations in the chat, tool cards display the operation being performed. Each tool card shows: * **Tool name in plain text**: The name of the tool being invoked, displayed as readable text. * **Tool description**: A brief description of the tool appears below the tool name for clarity. * **Arguments with descriptions**: Input parameters are labeled with human-readable descriptions and resolved resource names where applicable. * **Formatted output**: Results are displayed with proper JSON formatting for clarity. ## Approvals & User Input When your app requires approval before executing a tool or needs input from you, approval and ask-user cards render directly within the chat message flow. You no longer see separate overlay windows — everything stays in context within the chat. When an approval request or ask-user prompt is active, the chat input area switches to feedback mode: * The input field becomes a response/feedback field for that specific request * Toolbar actions are hidden to focus on the immediate decision * Attachments are stashed temporarily and restored once the request is resolved Respond directly in the input field to approve the action, provide feedback, or answer the question. Once resolved, the chat resumes normal operation and any stashed attachments are available again. ### Environment Variable Setup Requests When the AI needs to set up environment variables, it sends a setup request that you can approve or decline. If you decline an environment variable setup request, you can include optional feedback explaining why. Your feedback is captured and sent back to the AI immediately via the control channel, and it also appears in the chat message history for future reference. ## Queued Messages You can send follow-up messages while the AI is still working. Queued messages appear with a "Queued" label and a "Cancel" button. They are processed in order once the current task completes. You can cancel a queued message before it's picked up. When you send a new message while the AI is waiting for your approval or decision, the pending decision is automatically interrupted and the agent resumes immediately with your new message. ## Plan Mode When you send a request, the AI starts in Plan Mode — it analyzes your codebase and proposes a set of changes before touching any code. The plan appears in the **Plan** tab alongside Web, Code, and Logs. It includes a summary of what will change, which files are affected, and the implementation approach. From there you can approve the plan to let the AI start building, reject it to stay in Plan Mode with no changes made, or give feedback to have it revise. Once approved, the session switches to **Accept Edits** mode and you see changes appear in real-time in the code and preview panels. ## Preview & Inspection Every editing session runs a live preview of your application in the right panel. As the AI makes changes, the preview updates automatically so you can verify behavior before committing. The panel includes three tabs: * **Preview** — the running application, updated in real-time as changes are made * **Code** — the generated source code for your application * **Log** — runtime logs from the application, useful for debugging errors or verifying behavior ### Visual Selector The visual selection tool lets you click elements in the preview to reference them in your AI chat. Hold Cmd (Mac) or Ctrl (Windows/Linux) to select multiple elements — each appears as a dismissible badge in the chat input. This is useful for telling the AI "change this button" or "fix the layout of these two components." The preview's URL bar shows all available routes as an autocomplete dropdown, making it easy to navigate your app. ## TypeScript Intelligence The AI assistant has built-in TypeScript language server support, giving it precise code navigation across your codebase — go to definition, find references, and symbol lookup. This means the AI can understand your type relationships and imports accurately instead of relying on text search. ## Session Persistence Sessions persist across reconnections. When you resume a session on the same app, your conversation history and workspace state are automatically restored, so you pick up right where you left off without re-cloning or reinstalling dependencies. To start the agent fresh on an unrelated task, say "clear context" in chat. The agent will reset its context window while keeping the code changes already in your repository intact. ## Debugging Logs The AI assistant can query logs from both your live preview and your deployed application. * **Preview logs** — logs from the local dev server running in your current session. Use these to debug build errors, hot-reload issues, or runtime problems during development. * **Production logs** — logs collected from your deployed app's container stdout/stderr. Use these to investigate issues in production. Ask the AI to investigate an error and it will search the appropriate log source automatically, correlate messages with your code, and suggest fixes.