Docs

Documentation versions (currently viewingVaadin 24)

Vaadin Copilot

Introduction to Vaadin Copilot, a visual, AI-empowered development tool.

Vaadin Copilot is a useful tool that’s ready to assist you whenever you run an application in development mode. Copilot is a visual development tool, and it’s an AI-empowered assistant. With it, you can inspect and edit the UI, and use generative AI to help with a variety of tasks.

Vaadin Copilot contains all of the functionality found previously in Development Tools. However, starting in version 24.4, some of the new functionality is primarily available for Hilla projects.

Note
Copilot functionality that makes changes to code, including but not limited to AI functionality, requires you to 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 to fit into regular development workflow. When activated, Copilot appears in the browser, on top of your running application. You can switch between your IDE and Copilot to make changes where it’s most convenient.

Getting Started

Vaadin Copilot comes built into the development mode of your application; you don’t need to install anything. If you have an existing project, make sure it’s running Vaadin 24.4 or later.

See how to Start a Project for more information. Be sure to add a Hilla view. Also, see the Import to an IDE, and Run an Application documentation.

Once your application is running, click the

Activation button
button to activate or deactivate Copilot.

Brief Step-by-Step Instructions

  • Go to start.vaadin.com and click Download Project. Be sure the platform version is at least 24.4.

  • After downloading, unzip the project.

  • Run ./mvnw in the project folder.

  • Once the project opens in your browser, click

    Activation button
    button.

Basic Operation

Copilot supersedes previous development tools, and is activated via the same

Activation button
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.

Keyboard Shortcuts

The shortcut to enable Copilot is +CTRL+CTRL or +CMD+CMD. Meaning, hold SHIFT while pressing CTRL or CMD twice in quick succession.

You can deactivate Copilot using the same shortcut you used to activate it. When active, you can use +SPACE (i.e., while holding SHIFT, press SPACEBAR) to open the command window. Use ESC to close it again.

Vaadin Copilot UI

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.

Vaadin Copilot UI overview

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 ➄ 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. Includes guide on how to enable HotSwap.

Theme Editor

Right

Allows you to change style of selected component, modify the theme global properties and save your browser inspector changes into application stylesheet.

Outline

Left

Component/element hierarchy. Hover to highlight; click to select; and drag & drop to rearrange.

Palette

Left

A palette containing Vaadin and composite components. Drag to UI or Outline to add to the application.

Routes

Left

List of application routes with corresponding components and information about access control.

Log

Bottom

Application debug message log with a preview of Hilla endpoints requests and responses.

Accessibility (a11y)

Right

Accessibility testing engine. Helps to identify common accessibility issues like missing page title or missing input label. Provides recommendation how to fix them.

Internationalization (i18n)

Right

Make your UI ready for localization by generating translation keys for text elements.

UI Test Generation

Right

Generate Playwright tests for the current view. This feature creates .java classes for Flow views and .spec.ts files for Hilla. It also sets up the necessary dependencies and build configurations required to run the tests.

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

Your IDE opens the source file on the row where the component is created.

Select

Convenient way of selecting parent and sibling components.

Wrap with…​

Add a layout around the selected component.

Duplicate

Make a copy of the component.

Add click listener

A quick way to add a click listener stub to the source code. Your IDE will open the source file on the row where the listener has been added.

Delete

Delete the 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-and-drop on the Outline, and drag in new components from the Palette.

AI Assistant

You can ask Copilot to perform tasks using a natural language prompt in the Spotlight popup. The AI does its best to fulfill your request, but in this early phase its abilities are limited; it makes mistakes sometimes. 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.

Context & Selection

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.

Example Prompts

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:

> make the 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:

> 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. To make those changes and addition, try these:

> make the width of each field match the expected input

> add a placeholder to each field

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

> follow UX best practices for placeholders

> group fields into natural sections

IDE Integration

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).

Limitations

These are some known limitations with using Copilot with Vaadin:

  • Vaadin Flow (i.e., Java) UI editing is not supported in version 24.4.

  • Not all views or hierarchies can be edited via drag-and-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.