Chat-Driven Editing

The Chat panel is where you work with the AI to make changes that go beyond what visual editing can do — adding features, restructuring layouts, changing logic, or building entirely new pages.

When to Use Chat vs. Visual Editing

Use visual editing when you know exactly what the visual change should be — moving an element, changing a color, editing text, adjusting spacing. It's immediate and doesn't cost credits.

Use the chat when the change involves reasoning — adding a new feature, restructuring components, fixing logic, connecting to a database, or when you need the AI to figure out how to implement something.

Giving the AI Context

The AI works better when it understands what you're referring to. Dazl provides context automatically in several ways:

• Element attachment — When you select an element in Edit mode, it appears as a chip above the prompt box (e.g., HomeHeroBlock.homeheroblock) with a Clear button. This tells the AI exactly which component you're talking about. You don't need to describe "the big button in the hero section" — select it, and the AI knows. JSX expressions can also be attached as context, just like any other component or element.
• Code analysis — Dazl's code analysis engine gives the AI an understanding of your project's structure, file organization, component hierarchy, naming conventions, and design system. The AI reads this context before making changes, which helps it produce code that fits your project.
• URL references — Share a URL in the chat and ask the AI to recreate or riff on an existing website. The AI can visit the site and use it as a reference when generating or modifying your project.
• Figma design references — Once you've connected the Figma integration, you can paste a Figma frame URL into the chat. The AI reads the design from Figma and uses it as a reference — useful for translating existing designs into working code.
• Specs — If you've written specs in the Specs panel, the AI uses them as guidelines when generating code. Well-written specs lead to better results because they give the AI a framework for decision-making.
• Skills — Skills are a special type of spec that focus the AI on a particular domain, such as brand voice or accessibility standards. They appear in the Skills section of the Specs panel and can be attached to the chat or dragged into the prompt.
• File attachments — Click the attachment button (paperclip icon) next to the prompt box to attach images, documents, data files, and more. You can also drag files and folders from the Files panel or the Add Panel directly into the chat input. Pasting large text (such as PRDs or code snippets) into the prompt also automatically attaches it as a file to keep the conversation readable.
• Active tab file — When a code editor or spec editor tab is active, the Chat panel automatically attaches that file as context. This keeps the AI focused on what you're currently working on without manual attachment.
• Project file context — In the Files panel, you can attach project files to the conversation to point the AI at specific source code.
• Media context — In the Add Panel, hover over any image and use Attach to Chat Context to give the AI a visual reference from your project.
• Inspection tools — The AI can inspect your project on its own while working: reading browser console logs, server logs, computed CSS styles, and page HTML. It also has access to your project's public URL, which means it can take screenshots of what it built and visually verify the result. You don't need to provide this information manually — if the AI needs to debug a layout issue or understand why something looks wrong, it can check these details as part of its workflow.

Discuss Mode

When you want to talk through ideas or ask questions about your project without the AI making changes, toggle the Discuss button next to the prompt box. In this mode, the AI responds conversationally — no code is generated, no files are changed. You can also ask the AI about Dazl's own capabilities and how to use specific features. Toggle it off to switch back to code generation. See Chat for details.

Writing Effective Prompts

A few patterns that work well:

• Be specific: "Change the hero headline font to the Display scale and make the subtext use the Caption scale" is better than "make the text look better"
• Reference what you see: "The pricing cards are too close together — add more horizontal spacing between them"
• Describe the outcome: "Add a sentiment analysis badge below each post showing positive, negative, or neutral with a color indicator"
• Work incrementally: Handle one change per message rather than combining many requests. This makes it easier to review and undo if something isn't right.
• Queue follow-ups: You can send additional prompts while the AI is still responding. Queued prompts run in order automatically, so you don't have to wait for one response to finish before sending the next request.
• Cancel and continue: If the AI is heading in the wrong direction, cancel the operation. All file changes made so far are preserved, so you can continue from where the AI left off or prompt differently.
• Start a new thread: Click the + button next to the thread name at the top of the Chat panel to start a fresh conversation. This is useful when you want to change direction without prior context influencing the AI. You can switch back to earlier threads any time.
• Collaborate in chat: When collaborators are working on the same project, typing indicators show who is composing a message so you can coordinate prompts.

Understanding AI Responses

Each AI response in the chat can include:

• Formatted text — explanation of what was done, with markdown formatting
• File edit cards — expandable cards showing "Updated filename.tsx" or "Created filename.ts", with an "Open file" icon to open the file in a split view alongside the Preview
• Action cards — "Read file: filename.tsx" showing what the AI inspected before making changes
• File count summary — e.g., "5 files changed" with a "Show more" toggle
• Generated and edited images — the AI can generate new images and edit existing ones in your project. Describe the changes you want and the AI applies them directly. Image generation in Chat uses Gemini 3.1 Flash by default.
• Tool usage — if you've connected integrations like Supabase or Figma, the AI can use them directly — querying a database, reading a Figma design, or performing other actions on your behalf. You can toggle individual integrations on or off using the MCP toggles button in the prompt box.
• Token cost — the credit cost of the response, shown next to the model icon

Feedback

Each response has thumbs up (Helpful) and thumbs down (Not helpful) buttons. This feedback helps improve the AI over time.

Restore and View Code

The response that represents the current state of your project shows a "Current Version" badge with a "View Code" button to see the code changes. Older responses show a "Restore" button — click it to roll back your project to that point in the conversation.

Choosing a Model

The Model selector below the prompt box lets you pick which AI model to use for each message. Different models have different strengths: some are faster and cheaper for routine changes, others handle complex reasoning better. You can switch models at any point in the conversation.

See Chat for a comparison of available models.

Voice Input

The voice input button (microphone) next to the prompt box lets you dictate prompts using speech-to-text. Voice input is currently only available on Chromium-based browsers (Chrome, Edge, Arc, etc.).

AI Buttons

For prompts you run repeatedly, AI Buttons let you save them as reusable buttons that appear in the action bar or the right-click context menu.

Define a prompt with template variables like {{elementName}} and {{currentRoute}}, and the button fills in the details automatically when you click it. Useful for workflows like generating handoff documents or running accessibility checks on selected elements.

Related Articles

• Visual Editing – direct manipulation for visual changes
• Chat – model selector and available models
• AI Buttons – save reusable AI prompts as buttons
• Skills – domain-specific AI knowledge files
• Writing Specs – guide the AI with specifications
• Understanding Changes – review what the AI modified