Vaadin 24.4: Introducing the code-first AI-powered UI editor and React seamlessly integrated into the Vaadin platform

Meet Vaadin Copilot.

Your AI-powered UI Development Assistant for Java Developers

Seamlessly integrate visual editing and coding with AI assistance for Vaadin projects.

What is Vaadin Copilot?

Vaadin Copilot is an innovative tool designed to revolutionize the way developers work on
Vaadin-based projects. With its advanced visual editing tools, AI-powered features, and seamless integration with your IDE, Copilot makes UI development faster,
smarter, and more intuitive. Whether you're working with Hilla+React or looking forward to Flow support, Copilot is your go-to tool for efficient UI development.

Features at a Glance

Vaadin Copilot is currently available for views made with Hilla/React. Stay tuned for Flow/Java support.

Visual Editing

Drag & drop components, rearrange layouts, and change captions and labels – right in the application you are building.

Hierarchical overview

Use the Outline to get a clear overview of the UI structure, without extra cruft – no need to use brain cycles to do manual code<->UI mapping.

AI assistance

Ask your trusty AI assistant to do a boring task, generate some mock data, or create the first draft of a new feature.

Code-first editing

Changes you make with Copilot, with or without AI assistance, appear instantly in your IDE. Your codebase is the source of truth, and Copilot is specifically engineered to support switching back and forth between browser and IDE – just like you do anyway, but now the browser has superpowers. It's a bit like low-code, but also the opposite.

Theme Editor

Change the look of components, globally or individually, by adjusting properties using this visual tool. Minimize guesswork and the need to hop back and forth between CSS and browser – no need to awkwardly copy and paste from the browser inspector.

Your feature goes here

Vaadin Copilot is a brand-new tool with some novel ideas. Join in as an early adopter and help us make Copilot the best AI assistant you can wish for—your assistant.

Pre-installed and project aware

No need to install a separate tool, Vaadin Copilot lives in your project and comes out of the box with Vaadin 24.4+ – just start using it when needed. This also means Copilot works directly in your project, with your components and custom dependencies. No intermediate format, no version mismatches, no what-you-see-is-approximately-what-you-get. It’s better than a 1:1 representation – it’s the real thing. Your project. Your application.

Designed for Your Workflow

Vaadin Copilot is engineered to blend into your development process. When the application is running in development mode, Copilot is ready to spring into action whenever you view the live application. Just a shortcut away whenever you need it, and just as quick to hide when not needed.

AI-Powered UI Design - A Future of Possibilities

At the heart of Vaadin Copilot lies its AI capabilities. Ask our generative AI to modify the UI, explore new design possibilities, and streamline your workflow. Although in its early stages, this feature is set to redefine the boundaries of UI development.

Ready to enhance your Vaadin project development?

Make sure your project is on 24.4 or later (or get one from Start),
Click the }> button to activate Copilot