Call for beta testers: Try Vaadin Copilot Now! (again)

General
1

Hi,

Please consider trying out Vaadin Copilot during the Beta phase!

We’ve just made some updates, so now is an excellent time to (re)try.

  1. Get a 24.4 project with a Hilla view from start.vaadin.com
  2. Run the project
  3. Click }> in the bottom right

As a reminder, Vaadin Copilot is both an AI-powered assistant and a drag & drop UI editor, and edits your code directly – no special design file.

Here is a 2 minute summary of what you can expect:

Some additional notes

  • If you’re a Flow user, consider trying the Hilla version anyway; we’re actively working on Flow support, and early feedback about Copilot as a whole would be appreciated.
  • You will be asked to log in to vaadin.com and have an active subscription or trial. The trial options are quite generous, but if you’re still reluctant to start during the beta I can promise to reset it afterwards :-)
  • Copilot will get its own $25 plan, but all other plans will also include it.

We have a backlog for the beta period, Flow support, and beyond – help us prioritize and discover additional improvements by giving early feedback!

Best,
Marc

6 Likes
2

Hey Marc,
I tried copilot using the current beta3 version and it works quite well. I tried a few things you showed in the town hall meeting and can confirm they worked as expected :+1:

In addition to that I tried a few more prompts:

  • “Change the theme to dark” :white_check_mark:
  • “Change the icon of the menu item to be a light bulb” :white_check_mark:

Here are a few use cases (or prompts) I would like to use Copilot for:

  • Add a dependency for spring-boot-starter-data-jpa to my project.
  • Add a POJO called Foo with the following fields in the package com.example.application.entities to my project: id, name, email.
  • Add a Spring Data JPA repository for my entity Foo to my project.
  • Add a BrowserCallable for my entity Foo to my project.
  • Add a new view called FooView to my project.
  • Insert a AutoCrud component into my FooView using FooModel and FooService.

It would be nice, to be able to use Copilot for those kind of things. I can image, that it is quite difficult to extend Copilot to support this kind of full stack tasks.

One last thing I would like to highlight: Thank you, for making me a Vaadin employee :heart_eyes:

image
image708×1448 98.1 KB

:sweat_smile:

2 Likes
3

Welcome to the team Rene!

1 Like
4

Hey René!
Great feedback, that’s exactly the stuff we’re looking for to help use prioritize :+1: :bow:

Right now the AI is intentionally limited to just changing one file at a time, which makes it’s abilities quite limited.

The reasons include it’s slowness, and especially it’s tendency to hallucinate and make small mistakes. If it’s a bit slow, but makes a big thing that works, that’s fine as long as the end result is good and saves you time – but if it makes small mistakes in every file it’s not that useful.
This is why we decided to limit it a bit now, but we have been experimenting and there is progress on several points: Models are getting faster and better (we don’t even have to do anything about this, just wait), and we’re getting better at giving the AI the information it needs, prompting it better, and correcting potential errors.
When the AI is slow, it really does not leave us much room to do several AI calls and split the task, correct the output etc, but with faster AI we can.

So: Your use cases are exactly the sort of things we’re looking into next.
AI is fairly generic and we will probably unlock many use-cases at once – for instance, when we give it the ability to create a new file, that could be used to add a new view, a new css file, a new entity, and so on.
But it’s still essential to focus on some specific use-cases when working towards adding those capabilities, which is why it’s invaluable to hear feedback like this :+1:

Thanks again, and let us know if you have more ideas – or when you stumble on some bugs!

…and thanks for the headsup about the surprising employee property, we’ll take a look at that too – I regret to say it does not unlock any exciting extra features or easter eggs at this time, though now I kind of wish it did :wink:

1 Like
5

Wow, @rene.wilby, amazing feedback and tests! Really! :clap:

Please keep them coming as new features, and versions will be released for Copilot -and emphasizing what Marc and Joonas said in this thread- this is unbelievably helpful! Much appreciated! :bowing_man:

1 Like
6

Hey everyone :wave:,
I’d like to share some more feedback about Copilot. This time I used it to design an empty view to look like this:

image
image1542×856 25.1 KB

This view is composed using multiple nested vertical and horizontal layouts. Adding the layouts and components to the view using drag & drop works pretty well. There are a few things I’ve noticed that could perhaps be improved:

  • Sometimes there is a page reload after I added a component. I couldn’t see any pattern why it is happening, but when it is happening it is a bit annoying to go back to the right place in the Outline panel and to continue the work.
  • After I created the view using Copilot I had a look in the code and I noticed a few unnecessary tags like:
    <>
      <>
        <></>
        <VerticalLayout>
        ...
        </VerticalLayout>
      </>
    </>
  • After I created the basic layout and added to components I wanted to adjust them using theme and className attributes. Unfortunately, I couldn’t find them in the Theme Editor panel. Are they available somewhere? What is the best way to adjust them?

This was my environment during the test:

  • Hilla: 24.4.0.beta5
  • Flow: 24.4.0.beta5
  • Vaadin: 24.4.0.beta5
  • Copilot: 24.4.0.beta6
  • Copilot IDE Plugin: 1.0.4-vscode
  • Java: GraalVM Community 21.0.2
  • Java Hotswap: false
  • Frontend Hotswap: Enabled, using Vite
  • OS: x86_64 Mac OS X 14.5
  • Browser: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:126.0) Gecko/20100101 Firefox/126.0