Vaadin Copilot

Vaadin Copilot comes built into the development mode of your application; you don’t need to install anything.

See the Start a Project guide for more information. Also, see the Import to an IDE, and Run an Application documentation pages.

Once your application is running, click the button to activate or deactivate Copilot.

Brief Step-by-Step Instructions

Copilot supersedes 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 it’s deactivated.

Enable the keyboard shortcuts so you can effortlessly enter and exit Copilot while you’re developing.

The Copilot UI consists of five main parts. Referring to the numbers in the graphic that follows, 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 more.

➁ Drawers are located to the left, right, and bottom edges of the browser window, and appear when you move the mouse close enough to those edges. Drawers are where you’ll find most of the Copilot functionality tucked away by default.

Each Drawer contains ➂ Panels, with each representing a specific functionality. Each panel can be turned into a ➃ Floating Panel so that it doesn’t auto-hide with the Drawer, and can be moved, collapsed, and resized.

The ➄ Command window is a context-sensitive popup window with an input prompt. This is where you can give commands to the AI.

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.

You can rearrange components by using drag-and-drop. Drop zones appear to visualize where components can be dropped. You can also use drag-and-drop on the Outline, and drag in new components from the Palette.

You can ask Copilot to perform tasks related to view manipulation using a natural language prompt in the Command window popup. The AI does its best to fulfill your request. Think of it as a very helpful junior developer, who remembers plenty 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 already know exactly how to do them. It’s faster, though, if you need to research how to do a task, or if it involves plenty of typing.

Basically, be ready to fix minor mistakes, undo a whole change — but be prepared to be pleasantly surprised.

When you use the AI, it knows a good bit about your project and tech stack — and which components you’ve selected, if any. It tries to make use of that information when possible: such as when you refer to a button, selected components, or similar items.

To learn how to use Copilot, you might start by trying to perform some small tasks. Below are suggestions of common tasks.

Try to do the following to make a button primary:

This type of task can be slow compared to making the change, manually. However, it can be very useful when you don’t remember how to do it in the code.

Bootstrapping a new form or generating placeholder content can be very convenient. Try this:

Prompts can affect multiple components, and take context into account without being very specific in the prompt. To make those changes and addition, try these:

The AI may be able to help with UX considerations. Try these tasks:

When developing UIs, there’s a tendency to switch repeatedly between code and the browser to verify and tweak the results. You should be able to code when needed, and do changes directly in the UI when that feels more appropriate.

Vaadin Copilot integrates seamlessly into your regular development workflow. This way you can switch back and forth between the code in your IDE and Copilot, depending on which is appropriate. Copilot considers the file on disk to be the source of truth. All changes are made to the file, then hot deployed to the browser.

To get the best Copilot experience, use the Vaadin plugin for IntelliJ or Visual Studio Code. The plugin improves saving changes you made into your files and integrates with the undo-functionality (IntelliJ only).

Depending on the IDE, Vaadin plugin might display additional hints for improving development process.

Vaadin Copilot allows users to copy and paste Figma designs that are based on the Vaadin Design System, to create Hilla and Flow views. See the Figma documentation to learn more about copying Figma designs to Vaadin.

Copilot has a few additional features worth considering. They’re listed in the sub-sections here.

It’s best to know the limitations of software that you use. These are some known limitations of using Copilot with Vaadin: