The Fusion Chat panel provides several tools to aid you in creating code from your prompts and designs.
To access the Chat panel, navigate to any Fusion Project. The panel is comprised of three sections:
- The Chat panel itself can be found by clicking the Chat tab.
- The AI response section takes up the majority of the space within the Chat panel.
- The Prompt field is where you request changes from the AI.
The Chat panel itself has a few useful features:
- New Chat: clicking this button will create a new session and clear the current output in the AI response section of the panel. This new chat will not be able to reference the previous session, but has access to all configuration files typically available to the Project.
- Feedback: provide your thoughts directly to the Builder.io team.
- Toggle notifications: the bell icon in the bottom-right corner of the Chat panel will enable or disable browser notifications for Fusion.
Most of the Chat panel's space is taken up by the AI response. Here, the AI shares what it's doing, its thought process, and when it is completed.
There are several features to keep in mind when viewing the AI response.
If you wish to undo the AI's most recent action, click the Restore to this point link. This will undo all prompts and actions taking after that point.
Your prompts will appear with your Builder profile photo next to them, aligned towards the right.
For longer prompts, click the Show more arrow to view all of your prompt.
AI responds to your output underneath your prompt. By default, Fusion is configured to output what files it's working on and its thought process. Fusion will summarize its changes once it has completed your prompt.
Click the Show more arrows to display more of AI's thought process or what files were changed. For changed code, expanding the response displays an Open in Editor button which brings you to the changed code.
The response toolbar provides several utilities for interacting with the AI response:
- The Overflow (three-dot) menu opens to display how many credits were used to generate the response as well as what model was used.
- Clicking the Copy icon copies the response to your clipboard.
- The Bookmark icon, when clicked, stores this response as a bookmark. Bookmarks are accessible in the History tab.
- The thumbs-up and thumbs-down icons provides a quick way to evaluate the AI response. These responses help the Builder.io team improve Fusion's overall quality.
When making a prompt, you can adjust code output in the following ways:
- Attach files such as PDFs or images, Figma designs, or layouts copied from the Builder Chrome plugin.
- Connect Integrations, which can provide you with access to other services such as Linear, Netlify, or Zapier.
- Choose which AI model you wish to use, which affects code output and can decrease or increase the amount of Agent credits used.
When prompting within an existing Project, you have additional options:
- Select a specific element to reference as context for your prompt by clicking the target icon.
- Adjust rules and Project settings by clicking the cog icon.
When making a prompt, there are two options for how the AI processes your prompt request: Fast mode and Plan mode.
By default, Fast mode is on for all prompts. When enabled, the AI immediately implements received prompts to the best of its ability.
Fast mode works best when you know exactly what you want built and can provide clear, specific instructions. Plan mode lets you discuss and refine your ideas through back-and-forth dialogue before Fusion implements the changes.
For a more conversational experience, enable Plan mode by clicking the toggle within the prompt field and choosing the Plan option.
Plan mode develops a comprehensive plan of Fusion's proposed implementation. This process uses fewer credits than Fast mode, allowing you to refine the AI's approach before incurring additional AI credits and time spent on writing code. It is highly recommended to use Plan mode before editing large amounts of code.
Code changes are not be implemented until the Implement Plan button is pressed.
In the video below, the user selects Plan mode to discuss with the AI options on how to implement a dark mode feature. After the plan has been made, the Implement Plan button is clicked, leading to code changes.