Vaadin Copilot
Vaadin Copilot is a handy development tool that’s ready to assist you whenever you run an application in development mode. Copilot is a visual development tool and an AI-powered assistant. You can inspect and edit the UI, and use generative AI to help with a variety of tasks.
Note
| Vaadin Copilot contains all of the functionality previously found in Development Tools. However, initially in version 24.4 some of the new functionality is primarily available for Hilla projects. |
Warning
| Copilot functionality that makes changes to your code, including but not limited to AI functionality, requires that you log in and accept the terms and conditions. This functionality is available for all subscribers. |
Vaadin Copilot is designed to work seamlessly with an IDE and fit into regular development workflow. When activated, Copilot appears in the browser, on top of your running application. You can switch back and forth between your IDE and Copilot and make changes where they’re most convenient.
Get Started
Vaadin Copilot comes built-in to the development mode of your application – you do not need to install anything.
See how to Start a Project (make sure you add a Hilla view), Import to an IDE, and Run an Application.
If you have an existing project, make sure that it is running 24.4 or later.
Once up and running, click the }> button to activate or deactivate Copilot.
Quick Step-by-Step Instructions
-
Go to start.vaadin.com
-
Click “Download Project” and ensure that the platform version is at least 24.4
-
Download and unzip the project
-
Run
./mvnw
in the project folder -
Once the project opens in your browser, click }>
Basic Operation
Copilot supersedes the previous development tools, and is activated via the same }> button that appears on top of your application in development mode. When activated, Copilot takes over the browser and disables interaction with the application until Copilot is deactivated.
Enable and learn the keyboard shortcuts so that you can effortlessly enter and exit Copilot as you develop your application.
Keyboard Shortcuts
The shortcut to enable Copilot is ⇧+CTR+CTRL
or ⇧+CMD+CMD
(i.e., hold SHIFT while pressing CTRL or CMD twice in quick succession).
You can deactivate Copilot using the same shortcut. When active, you can use ⇧+SPACE
(i.e., hold SHIFT, press SPACEBAR) to open the command window. Use ESC to close it again.
Vaadin Copilot UI
The Copilot UI consists of four main parts.
The ➀ Activation Button activates and deactivates Copilot, and hosts a popup menu with some configuration options. This is the only functionality available when Copilot is not activated. Once activated, Copilot offers additional functionality.
➁ Drawers are located to the left, right, and bottom edges of the browser window, and appear when you move the mouse close enough to that edge. Drawers are where you find most of the Copilot functionality tucked away by default.
Each Drawer contains ➂ Panels, each representing a specific functionality. Each panel can be turned into a ➃ Floating Panel so that it does not auto-hide with the Drawer, and can be moved, collapsed, and resized.
➄ Spotlight is a context-sensitive popup window with an input prompt. This is where you can give commands to the AI.
Built-In Panels
Panel | Default Drawer | Description |
---|---|---|
Features | Right | Manage Feature Flags |
Info | Right | Application information |
Database | Right | Manage H2 development database instances |
Theme Editor | Right | |
Outline | Left | Component/element hierarchy. Hover to highlight, click to select, and drag & drop to rearrange. |
Palette | Left | A palette containing select Vaadin components. Drag to UI or Outline to add to the application. |
Log | Bottom | Application debug message log |
Accessibility (a11y) | Right | Accessibility check and recommendations |
Internationalization (i18n) | Right | Internationalization tool |
Plugins
Copilot uses a plugin architecture, which allows additional functionality to appear as panels. This includes tools such as Vaadin AppSec Kit, as well as third-party plugins.
Context Menu
Go to Source: Component Locator
You might have used previously the component locator
in Development Tools. The same functionality is available in Copilot: Select a component by clicking on it. The right-click to display the context menu, and choose "Go to source".
Your IDE will open the source file on the row where the component is created.
Wrap with…
You can select a component and use "Wrap with" in the context menu to add a layout around the selected component.
Drag & Drop
You can rearrange components by using drag and drop. Drop zones will appear to visualize where components can be dropped. You can also use drag & drop on the Outline, and drag in new components from the Palette.
AI Assistant
You can ask Copilot to do things for you using a natural language prompt in the Spotlight popup.
The AI will do its best to fulfill your request, but in this early phase its powers are limited, and it makes mistakes from time to time. Think of it as a very helpful junior developer, who remembers a lot about topics you might have forgotten or not looked into yet – but is still very inexperienced and needs supervision. It’s slower than you on small tasks if you remember exactly how to do it, but faster if you need to look it up, or if it involves enough typing. Be ready to fix minor mistakes, undo the whole change – or be pleasantly surprised.
Context & Selection
The AI knows a bit about your project and tech stack, and which components you have selected, if any. It tries to make use of this information when possible — for instance when you refer to the button, selected components, or similar.
Example Prompts
You can try small tasks:
make the button primary
This type of task can be slow compared to making the change manually in code but can be very useful when you don’t remember exactly how to do it in code.
Bootstrapping a new form or generating placeholder content can be very convenient:
add comprehensive fields for contact details and international shipping and billing
Prompts can affect multiple components, and take context into account without being very specific in the prompt:
make the width of each field match the expected input
add a placeholder to each field
The AI is also happy to try to help with UX considerations:
follow UX best practices for placeholders
group fields into natural sections
Undo & IDE Integration
When developing UIs we tend to switch between code and browser repeatedly to verify and tweak. You should be able to code when needed, and do changes directly in the UI when that feels more appropriate.
Vaadin Copilot aims to integrate seamlessly into your regular development workflow, so you can switch back and forth between IDE (code) and Copilot depending on which is more convenient at the time. However, this poses a problem with being able to undo when two applications are changing the same files.
To get full-fledged undo support, use the Vaadin plugin for IntelliJ. This will make all Copilot changes appear as if they were made within your IDE.
As a stop-gap when you’re not using the plugin make sure the file Copilot is changing is open in your IDE; the changes will be reloaded from disk. This adds to the undo stack so you can go back to the previous version. This approach can be difficult to manage when changing multiple files, and it’s easy to forget to open relevant files before using Copilot. Use version management (e.g., git) to revert changes. This requires you to commit often, or your undo will be very coarse-grained.
Limitations
These are some known limitations:
-
Flow (Java) UI editing is not supported in version 24.4.
-
Not all views or hierarchies can be edited via drag & drop. In particular parts of the UI created programmatically (e.g. loops) can cause problems.
-
AI makes mistakes.
-
AI is currently limited to smaller one-view tasks.