diff --git a/articles/tools/copilot/index.adoc b/articles/tools/copilot/index.adoc index 9b66d7b64a..726dbddadc 100644 --- a/articles/tools/copilot/index.adoc +++ b/articles/tools/copilot/index.adoc @@ -7,9 +7,7 @@ order: 10 = [since:com.vaadin:vaadin@V24.4]#Vaadin Copilot# -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. +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. @@ -19,23 +17,33 @@ Vaadin Copilot is designed to work seamlessly with an IDE, and to fit into regul == 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. +Vaadin Copilot comes built into the development mode of your application; you don't need to install anything. -See how to <> for more information. Be sure to add a Hilla view. Also, see the <>, and <> documentation. +See the <> guide for more information. Also, see the <>, and <> documentation pages. Once your application is running, click the image:images/activation-button.png[Activation button,26] button to activate or deactivate Copilot. *Brief Step-by-Step Instructions* -- Go to https://start.vaadin.com/?preset=hilla[start.vaadin.com] and click _Download Project_. Be sure the platform version is at least 24.4. +- Go to https://start.vaadin.com/?preset=hilla[start.vaadin.com] and click _Download Project_. - After downloading, unzip the project. - Run `./mvnw` in the project folder. -- Once the project opens in your browser, click image:images/activation-button.png[Activation button,26] button. +- Once the project opens in your browser, click the image:images/activation-button.png[Activation button,26] button. + + +=== 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 three-day preview or by starting a 30-day trial period. == Basic Operation -Copilot supersedes previous development tools, and is activated via the same image:images/activation-button.png[Activation button,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 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. Enable the keyboard shortcuts so you can effortlessly enter and exit Copilot while you're developing. @@ -57,7 +65,7 @@ The Copilot UI consists of five main parts. Referring to the numbers in the grap *➁ 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. -image::images/overview.png[Vaadin Copilot UI overview] +image::images/overview.png[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. @@ -69,17 +77,33 @@ The *➄ Spotlight* is a context-sensitive popup window with an input prompt. Th |=== |Panel |Default Drawer |Description -|Features +|Documentation |Right -|Manage <<{articles}/flow/configuration/feature-flags#,Feature Flags>>. +|Vaadin documentation for selected component. + +|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. |Info |Right |Application information. Includes guide on how to enable HotSwap. -|Theme Editor +|Accessibility Checker (a11y) |Right -|Allows you to change style of selected component, modify the theme global properties and save your browser inspector changes into application stylesheet. +|Accessibility testing engine. Helps to identify common accessibility issues like missing page title or missing input label. Provides recommendations how to fix them. + +|UI Test Generation +|Right +|Generates Playwright UI tests for current Flow and Hilla view. _Experimental feature_. + +|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 <>. + +|Features +|Right +|Manage <<{articles}/flow/configuration/feature-flags#,Feature Flags>>. |Outline |Left @@ -93,22 +117,14 @@ The *➄ Spotlight* is a context-sensitive popup window with an input prompt. Th |Left |List of application routes with corresponding components and information about access control. +|UI Services +|Left +|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. -|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 the UI ready for localization by generating translation keys for text elements, and converting static strings in UI code to translation API calls. See <>. - -|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. - |=== @@ -123,23 +139,30 @@ Copilot uses a plugin architecture which allows additional functionality to appe *Select*:: Convenient way of selecting parent and sibling components. +*Copy*, *Paste*:: Copy and paste selected component. See +<> for more information. + +[Read more about additional Copilot features.] + *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. +*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. *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. +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. == 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. +You can ask Copilot to perform tasks related to view manipulation using a natural language prompt in the Spotlight 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. == Context & Selection @@ -153,7 +176,7 @@ To learn how to use Copilot, you might start by trying to perform some small tas Try to do the following to make a button primary: -[source,terminal] +[source] ---- > make the button primary ---- @@ -162,14 +185,14 @@ This type of task can be slow compared to making the change, manually. However, Bootstrapping a new form or generating placeholder content can be very convenient. Try this: -[source,terminal] +[source] ---- > 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: -[source,terminal] +[source] ---- > make the width of each field match the expected input @@ -178,7 +201,7 @@ Prompts can affect multiple components, and take context into account without be The AI may be able to help with UX considerations. Try these tasks: -[source,terminal] +[source] ---- > follow UX best practices for placeholders @@ -194,12 +217,67 @@ Vaadin Copilot integrates seamlessly into your regular development workflow. Thi To get the best Copilot experience, use the Vaadin plugin for link:https://plugins.jetbrains.com/plugin/23758-vaadin[IntelliJ] or link:https://marketplace.visualstudio.com/items?itemName=vaadin.vaadin-vscode[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. + + +=== Java Hot Swapping + +Vaadin IDE plugins introduce `Debug using HotSwap`. This is a run configuration that simplifies the process of running applications with a given hot swap solution. + + +== Figma to Vaadin + +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 https://www.figma.com/community/file/1430138010973103197/figma-to-vaadin[Figma documentation] to learn more about copying Figma designs to Vaadin. + + +== Additional Features[[additional-features]] + +Copilot has a few additional features worth considering. They're listed in the sub-sections here. + + +=== Selected Component Toolbar + +After selecting view component, toolbar is displayed to provide additional layout options like setting alignment, adjusting padding, or changing a gap. + + +=== Paste Image + +It's possible to paste images into a view. The image file is saved in the project resources directory. + + +=== Form from Java Bean + +Dropping the Java bean file into a view results in a form being created based on the bean's properties types. + +Below is an example of this with a Java bean: + +[source,java] +---- +public class User { + + private String name; + + private Integer age; + + private LocalDate birthday; + + // getters and setters +} +---- + == Limitations -These are some known limitations with using Copilot with Vaadin: +It's best to know the limitations of software that you use. These are some known limitations of 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. +- Code formatting is dependent on user IDE configuration. If the user has configured formatting on a file save, Vaadin IntelliJ plugin triggers it. Otherwise, running code format manually is required. + + +=== Additional Notes + +- Vaadin Copilot contains all of the functionality found previously in Development Tools. +- It's possible to disable Vaadin Copilot using `vaadin.copilot.enable=false` system property. +- It's not possible to disable explicitly any AI features of Vaadin Copilot.