Make Website Changes Using Natural Language with the AI Companion
The AI Companion feature on CodeDesign Builder makes editing your website easier than ever. With the power of natural language commands, you can now make real-time changes to your projects directly on the canvas—no need to dive into manual edits or complex configurations. Whether you're changing an image, tweaking copy, or refining layout elements, the AI Companion brings a whole new level of accessibility and convenience to your workflow.
We've put together this video that runs through the exact workflow. Feel free to switch to video if you prefer video guides over article.
Here’s a quick walkthrough on how to get started and make the most of this new feature.
Getting Started with AI Companion
To begin, select a template and generate your website as usual. In this example, we’re creating a site for a music production house based in Helsinki.
Enter Your Prompt: Describe the type of website you want and select your preferred language.
Confirm Key Details: Ensure the business name and location are accurate.
Click Generate: The platform will build a full website based on your inputs and the selected template.
Once the site is generated, you’ll be taken to the preview playground.
Choose Your Editing Mode
From the preview screen:
Click on the Edit Website button.
You’ll now be able to choose between the Drag and Drop Builder or the AI Companion.
Select AI Companion to enable the natural language editing interface.
A brief setup will follow, and then the AI Companion will be live on your canvas.
Navigating the AI Companion Interface
Once the AI Companion is active, you’ll notice a compact and flexible tool interface on your screen:
Move & Minimize: Click and drag the companion to reposition it, or minimize it using the icon in the corner. You can reopen it by clicking the AI Companion button at the bottom right of the canvas.
Prompt Suggestions: The companion provides built-in suggestions for quick edits.
Input Box: Type in your own instructions directly in the chatbox.
Key Features of the AI Companion
Here’s a breakdown of the main tools and toggles within the interface:
Edit Mode Toggle: Switch between AI editing and manual editing with a simple toggle.
Add Attachment: Include images or files to give the AI more context for your edits.
Selection Tool:
Use it to highlight specific elements (like images or text) you want to modify.
Selected items show up as tags, and you can remove them by clicking the close icon.
Disable the tool if you want to freely navigate the canvas without making selections.
AI Model Selection:
Choose between Fast (for light edits like phrasing changes) and Autonomous (for complex edits). The Fast model consumes fewer credits and is ideal for quick tasks.
Making Edits with AI
To make an edit:
Select the element (e.g., an image) from the canvas.
Type in your instruction—for example, “Replace this with a close-up image of the device.”
Click the submit button to send your command.
The AI Companion will analyze the code, identify the element, and perform the requested change—even if there are minor typos in your instruction.
What’s Next?
That’s a quick look at how the AI Companion works. In upcoming guides, we’ll explore more use cases—from text replacements to full section redesigns—so you can unlock the full potential of this feature.
Have questions or need help while using AI Companion? Reach out to us anytime—our team is here to support you!