Skip to content
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

Jump to bottom

docs: Copilot 24.5 docs update #3836

Open
wants to merge 8 commits into
base: latest
Choose a base branch
from
Open

docs: Copilot 24.5 docs update #3836

Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a4184ef
Copilot 24.5 docs update
MarcinVaadin Oct 22, 2024
b170328
3-day preview and 30-day trial
MarcinVaadin Oct 22, 2024
047becb
toolbar
MarcinVaadin Oct 22, 2024
409cf90
Additional Notes
MarcinVaadin Oct 22, 2024
eb60654
do not use "terminal"
MarcinVaadin Oct 23, 2024
d65d70d
Merge branch 'latest' into docs/copilot-24-5-updates
russelljtdyer Oct 28, 2024
82b4c3e
Edited only changed and added text, plus Vale fixes.
russelljtdyer Oct 28, 2024
41fd5f0
Few more edits.
russelljtdyer Oct 28, 2024
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
103 changes: 82 additions & 21 deletions articles/tools/copilot/index.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

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 contains all the functionality found previously in Development Tools. However, starting in version 24.4, some of the new functionality has been available for Hilla projects and in version 24.5 for Flow projects.
MarcinVaadin marked this conversation as resolved.
Show resolved Hide resolved

[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.
Expand All @@ -21,17 +21,25 @@

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 <</getting-started/project#, Start a Project>> for more information. Be sure to add a Hilla view. Also, see the <</getting-started/import#, Import to an IDE>>, and <</getting-started/run#, Run an Application>> documentation.
See how to <</getting-started/project#, Start a Project>> for more information. Also, see the <</getting-started/import#, Import to an IDE>>, and <</getting-started/run#, Run an Application>> documentation.

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.

=== Development workflow

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

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vaadin.HeadingCase] 'Development workflow' should be in title case.

Raw Output:
{"message": "[Vaadin.HeadingCase] 'Development workflow' should be in title case.", "location": {"path": "articles/tools/copilot/index.adoc", "range": {"start": {"line": 35, "column": 5}}}, "severity": "WARNING"}

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

=== Trying Copilot

Vaadin Copilot provides features that are free for all users, and features that require subscription. All features related to view manipulation and AI usage require subscription. Copilot gives opportunity to try those features for free by activating 3-day preview or starting 30-day trial period.

== Basic Operation

Expand Down Expand Up @@ -69,17 +77,33 @@
|===
|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 recommendation 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 <<i18n#, Internationalization>>.

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

|Outline
|Left
Expand All @@ -93,22 +117,14 @@
|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 <<i18n#, Internationalization>>.

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

|===


Expand All @@ -123,6 +139,11 @@

*Select*:: Convenient way of selecting parent and sibling components.

*Copy*, *Paste*:: Copy and paste selected component. See
<<additional-features,Additional Features>> 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.
Expand All @@ -139,7 +160,7 @@

== 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
Expand Down Expand Up @@ -194,12 +215,52 @@

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` run configuration that simplifies process of running applications with given hot swap solution.

== Figma to Vaadin

Vaadin Copilot allows users to copy and paste Figma designs that are based on Vaadin Design System to create Hilla and Flow views. https://www.figma.com/community/file/1430138010973103197/figma-to-vaadin[Read more about Figma to Vaadin].

== Additional Features[[additional-features]]

=== Selected Component Toolbar

After selecting view component, toolbar is being displayed providing additional layouting options like setting alignment, padding or gap.

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

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vale.Spelling] Did you really mean 'layouting'?

Raw Output:
{"message": "[Vale.Spelling] Did you really mean 'layouting'?", "location": {"path": "articles/tools/copilot/index.adoc", "range": {"start": {"line": 232, "column": 81}}}, "severity": "ERROR"}

Check warning on line 232 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 'alignment, padding or gap.'.

Raw Output:
{"message": "[Vaadin.OxfordComma] Use the Oxford comma in 'alignment, padding or gap.'.", "location": {"path": "articles/tools/copilot/index.adoc", "range": {"start": {"line": 232, "column": 112}}}, "severity": "WARNING"}

=== Paste Image

It is possible to paste images into view. Image file will be saved in project resources directory automatically.

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

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vaadin.Will] Avoid using 'will'.

Raw Output:
{"message": "[Vaadin.Will] Avoid using 'will'.", "location": {"path": "articles/tools/copilot/index.adoc", "range": {"start": {"line": 236, "column": 54}}}, "severity": "WARNING"}

=== Form from Java bean

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

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vaadin.HeadingCase] 'Form from Java bean' should be in title case.

Raw Output:
{"message": "[Vaadin.HeadingCase] 'Form from Java bean' should be in title case.", "location": {"path": "articles/tools/copilot/index.adoc", "range": {"start": {"line": 238, "column": 5}}}, "severity": "WARNING"}

Dropping Java bean file into view will result in form created based on bean properties types.

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

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vaadin.Will] Avoid using 'will'.

Raw Output:
{"message": "[Vaadin.Will] Avoid using 'will'.", "location": {"path": "articles/tools/copilot/index.adoc", "range": {"start": {"line": 240, "column": 35}}}, "severity": "WARNING"}

Try with example 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:

- Vaadin Flow (i.e., Java) UI editing is not supported in version 24.4.
- Vaadin Flow (i.e., Java) UI editing is supported since version 24.5.
MarcinVaadin marked this conversation as resolved.
Show resolved Hide resolved
- 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 user has configured formatting on file save Vaadin IntelliJ plugin will trigger it, otherwise running code format manually is required.

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

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vaadin.Will] Avoid using 'will'.

Raw Output:
{"message": "[Vaadin.Will] Avoid using 'will'.", "location": {"path": "articles/tools/copilot/index.adoc", "range": {"start": {"line": 266, "column": 129}}}, "severity": "WARNING"}
Loading