Skip to content

docs: Align Copilot docs to new look and feel (#5351) (CP: v25.1) #5406

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
peholmst merged 1 commit into from
Mar 27, 2026
Merged

docs: Align Copilot docs to new look and feel (#5351) (CP: v25.1) #5406

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified articles/tools/copilot/images/activate-copilot.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed articles/tools/copilot/images/activation-button.png
View file
Open in desktop
Binary file not shown.
Binary file added articles/tools/copilot/images/development-workflow.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added articles/tools/copilot/images/modes.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified articles/tools/copilot/images/overview.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added articles/tools/copilot/images/toolbar.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
120 changes: 63 additions & 57 deletions articles/tools/copilot/index.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
Vaadin Copilot is a useful tool that's ready to assist you when 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.

[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.
Copilot functionality that makes changes to code, including but not limited to AI functionality, requires you to log in using Vaadin account.

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.

Expand All @@ -21,109 +21,113 @@

See the <</getting-started/quick-start#,Quick Start>> guide for more information. Also, see the <</getting-started/dev-environment/import#, Import to an IDE>>, and <</getting-started/dev-environment/run#, Run an Application>> documentation pages.

Once your application is running, click the image:images/activation-button.png[Activation button,26] button to activate or deactivate Copilot.
Once your application is running, Copilot toolbar image:images/toolbar.png[Copilot toolbar,100] is present in bottom right of the screen.

image::images/activate-copilot.png[Activation of Vaadin Copilot]


=== Development Workflow

Vaadin Copilot helps you to set up a development environment by suggesting and guiding you through installation of an IDE plugin and enabling a Java hotswap solution. Development workflow helper is available directly from the image:images/activation-button.png[Activation,26] menu and the Info panel.


=== Copilot Trial

Vaadin Copilot provides features that are free for all users. However, features related to view manipulation and AI usage require a subscription. You may try those features for free by activating a seven-day trial.
Vaadin Copilot helps you to set up a development environment by suggesting and guiding you through installation of an IDE plugin and enabling a Java hotswap solution. Development workflow helper is available directly from the menu and the Info panel.

image:images/development-workflow.png[Development Workflow]

== Basic Operation

Copilot supersedes previous development tools, and is activated via the same image:images/activation-button.png[Activation,26] 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.
Copilot allows to switch operating modes during development of your application. We can distinguish four modes:

Check warning on line 37 in articles/tools/copilot/index.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vaadin.We] Try to avoid using first-person plural like 'We'.

Raw Output:
{"message": "[Vaadin.We] Try to avoid using first-person plural like 'We'.", "location": {"path": "articles/tools/copilot/index.adoc", "range": {"start": {"line": 37, "column": 82}}}, "severity": "WARNING"}
- Play mode - normal interaction with application
- Inspect mode - Copilot can be used to analyze structure and components of given view
- Test mode - Copilot can help you generate tests and check accessibility compliance
- Edit mode - Copilot can help you to modify your application with use of visual edition and AI tools

Enable the keyboard shortcuts so you can effortlessly enter and exit Copilot while you're developing.
image:images/modes.png[Copilot Operating Modes]

With keyboard shortcuts you can effortlessly toggle Play and recent Copilot mode while you're developing.

pass:[<!-- vale Vaadin.Abbr = NO -->]

=== Keyboard Shortcuts

The shortcut to enable Copilot is kbd:[⇧+CTRL+CTRL] or kbd:[⇧+CMD+CMD]. Meaning, hold kbd:[SHIFT] while pressing kbd:[CTRL] or kbd:[CMD] twice in quick succession.
The shortcut to toggle Copilot Play and last used mode is kbd:[⇧+CTRL+CTRL] or kbd:[⇧+CMD+CMD]. Meaning, hold kbd:[SHIFT] while pressing kbd:[CTRL] or kbd:[CMD] twice in quick succession.

Check failure on line 51 in articles/tools/copilot/index.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vale.Terms] Use 'Cmd' instead of 'CMD'.

Raw Output:
{"message": "[Vale.Terms] Use 'Cmd' instead of 'CMD'.", "location": {"path": "articles/tools/copilot/index.adoc", "range": {"start": {"line": 51, "column": 157}}}, "severity": "ERROR"}

Check failure on line 51 in articles/tools/copilot/index.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vale.Terms] Use 'Cmd' instead of 'CMD'.

Raw Output:
{"message": "[Vale.Terms] Use 'Cmd' instead of 'CMD'.", "location": {"path": "articles/tools/copilot/index.adoc", "range": {"start": {"line": 51, "column": 91}}}, "severity": "ERROR"}

Check failure on line 51 in articles/tools/copilot/index.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vale.Terms] Use 'Cmd' instead of 'CMD'.

Raw Output:
{"message": "[Vale.Terms] Use 'Cmd' instead of 'CMD'.", "location": {"path": "articles/tools/copilot/index.adoc", "range": {"start": {"line": 51, "column": 87}}}, "severity": "ERROR"}

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

pass:[<!-- vale Vaadin.Abbr = YES -->]


== Vaadin Copilot UI

The Copilot UI consists of four 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.
The Copilot UI consists of two main parts. Referring to the numbers in the graphic that follows, the *➀ Toolbar* allows changing current Copilot mode. Use Toolbar menu to access Setting, Application Info, Application Logs and 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.
Floating *➁ Panels*, with each representing a specific functionality. Each panel can be dragged, resized and closed.

Check warning on line 61 in articles/tools/copilot/index.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vaadin.OxfordComma] Use the Oxford comma in 'dragged, resized and closed.'.

Raw Output:
{"message": "[Vaadin.OxfordComma] Use the Oxford comma in 'dragged, resized and closed.'.", "location": {"path": "articles/tools/copilot/index.adoc", "range": {"start": {"line": 61, "column": 89}}}, "severity": "WARNING"}

image::images/overview.png[Vaadin Copilot UI Overview]
After selecting component in the view, *➂ Component badge* is displayed. It contains set of utilities like AI prompt, sizing and padding helpers, and component properties.

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.
image::images/overview.png[Vaadin Copilot UI Overview]

== Built-In Panels

|===
|Panel |Default Drawer |Description

|Properties
|Right
|Properties editor for selected component.

|Documentation
|Right
|Vaadin documentation for selected component.
|Panel |Location |Description

|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.
|Accessibility Checker (a11y)
|Toolbar Test mode
|Accessibility testing engine. Helps to identify common accessibility issues like missing page title or missing input label. Provides recommendations how to fix them.

|Info
|Right
|App Info
|Toolbar menu
|Application information. Includes guide on how to enable HotSwap.

|Accessibility Checker (a11y)
|Right
|Accessibility testing engine. Helps to identify common accessibility issues like missing page title or missing input label. Provides recommendations how to fix them.
|App Log
|Toolbar menu
|Application debug message log with a preview of Hilla endpoints requests and responses.

|UI Test Generation
|Right
|Generates Playwright UI tests for current Flow and Hilla view. _Experimental feature_.
|Backend & Data
|Toolbar Edit mode
|Access to H2 console and project dependencies helper. Allows setting up Spring Security.

|Internationalization (i18n)
|Right
|Make the UI ready for localization by generating translation keys for text elements, and converting static strings in UI code to translation API calls. See <<i18n#, Internationalization>>.
|Components
|Toolbar Edit mode
|A palette containing Vaadin and composite components. Drag to UI or Outline to add to the application.

|Documentation
|Toolbar Edit and Inspect modes
|Vaadin documentation for selected component.

|Features
|Right
|Toolbar menu
|Manage <<{articles}/flow/configuration/feature-flags#,Feature Flags>>.

|Backend & Data
|Right
|Access to H2 console and project dependencies helper. Allows setting up Spring Security.
|Internationalization (i18n)
|Toolbar Edit mode
|Make the UI ready for localization by generating translation keys for text elements, and converting static strings in UI code to translation API calls. See <<i18n#, Internationalization>>.

|Outline
|Left
|Toolbar Edit and Inspect modes
|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.
|Properties
|Toolbar Edit and Inspect modes
|Properties editor for selected component.

|Views & Routes
|Left
|List of application routes with corresponding components and information about access control. Allows to create new views based on templates or using AI.
|Theme Editor
|Toolbar Edit mode
|Allows you to change style of selected component, modify the theme global properties and save your browser inspector changes into application stylesheet.

|UI Services
|Left
|Toolbar Edit mode
|List of Hilla services with corresponding parameters and information about access control.

|Log
|Bottom
|Application debug message log with a preview of Hilla endpoints requests and responses.
|UI Test Generation
|Toolbar Test mode
|Generates Playwright UI tests for current Flow and Hilla view.

|UI Test Recorder
|Toolbar Test mode
|Records user interactions to generate end-to-end Vaadin TestBench tests automatically. _Experimental feature_.

|Views & Routes
|Toolbar Edit mode
|List of application routes with corresponding components and information about access control. Allows to create new views based on templates or using AI.

|===

Expand All @@ -144,17 +148,19 @@

[Read more about additional Copilot features.]

*Create component*:: Create a new component of the selected type as a child of the selected component. The new component is added to the source code, and your IDE opens the source file on the row where the component is created.
*Extract to Inner component*:: Create a new component of the selected type as a child of the selected component. The new component is added to the source code, and your IDE opens the source file on the row where the component is created.

*Wrap with...*:: Wrap the selected components within a new layout. The components are placed in the layout in the same order you select them. The resulting layout is placed in the same place as the first component you select.

*Set Data...*:: Allows connecting a component to an existing data provider or to creating new one. While creating new data provider you can create entity manually or by using AI.

*Add click listener*:: A quick way to add a click listener stub to the source code. Your IDE opens the source file on the row where the listener has been added.
*Add Listener*:: A quick way to add listeners stubs to the source code. Your IDE opens the source file on the row where the listener has been added.

*Add to Components*:: Allows adding custom components to Components palette.

== Drag & Drop

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 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 Components palette.


== AI Assistant
Expand Down
Loading