Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
c6ae873
docs: add ai form filler articles
ugur-vaadin Jun 1, 2026
c695ec9
Update articles/components/form-layout/ai-powered.adoc
ugur-vaadin Jun 1, 2026
b3625ad
docs: address comments
ugur-vaadin Jun 1, 2026
92f1f5a
docs: add missing form filler features
ugur-vaadin Jun 9, 2026
a0c1850
docs: add field highlighter
ugur-vaadin Jun 9, 2026
8d177f1
docs: update articles to match spring ai bump
ugur-vaadin Jun 11, 2026
4b30063
Merge branch 'main' into docs-add-ai-form-filler-articles
ugur-vaadin Jun 11, 2026
a731e52
docs: handle linter warnings
ugur-vaadin Jun 11, 2026
759da6d
Merge branch 'main' into docs-add-ai-form-filler-articles
ugur-vaadin Jun 12, 2026
3cc0380
Merge branch 'main' into docs-add-ai-form-filler-articles
ugur-vaadin Jun 12, 2026
b531ae5
Update articles/flow/ai-support/index.adoc
ugur-vaadin Jun 12, 2026
ffe76eb
Update articles/flow/ai-support/index.adoc
ugur-vaadin Jun 12, 2026
096757d
Update articles/flow/ai-support/session-context.adoc
ugur-vaadin Jun 12, 2026
1b1f01f
Update articles/components/form-layout/index.adoc
ugur-vaadin Jun 12, 2026
608f793
Update articles/components/form-layout/index.adoc
ugur-vaadin Jun 12, 2026
e70d70b
Update articles/components/form-layout/ai-powered.adoc
ugur-vaadin Jun 12, 2026
87bb9b6
Update articles/components/form-layout/ai-powered.adoc
ugur-vaadin Jun 12, 2026
f3ac475
Update articles/components/form-layout/ai-powered.adoc
ugur-vaadin Jun 12, 2026
95f54b3
Update articles/flow/ai-support/ai-powered-chart.adoc
ugur-vaadin Jun 12, 2026
27fce9b
Update articles/flow/ai-support/ai-powered-form.adoc
ugur-vaadin Jun 12, 2026
403df7e
Update articles/flow/ai-support/ai-powered-grid.adoc
ugur-vaadin Jun 12, 2026
5c0245e
Update articles/flow/ai-support/ai-powered-form.adoc
ugur-vaadin Jun 12, 2026
70babf9
Apply suggestion from @rolfsmeds
ugur-vaadin Jun 12, 2026
2f5181e
Apply suggestion from @rolfsmeds
ugur-vaadin Jun 12, 2026
8cefe78
Update articles/flow/ai-support/ai-powered-form.adoc
ugur-vaadin Jun 12, 2026
be19008
docs: address comments
ugur-vaadin Jun 12, 2026
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
11 changes: 6 additions & 5 deletions articles/building-apps/ai/quickstart-guide.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ section-nav: badge-preview badge-flow
---
= [since:com.vaadin:vaadin@V25.1]#Quick Start-Guide: Add an AI Chat Bot to a Vaadin + Spring Boot Application# [badge-flow]#Flow#

:preview-banner-content: This guide uses preview AI support features. This means that they are not yet ready for production usage and may have limitations or bugs. We encourage you to try them out and provide feedback to help us improve them.
:preview-banner-content: This guide uses preview AI integration features. This means that they are not yet ready for production usage and may have limitations or bugs. We encourage you to try them out and provide feedback to help us improve them.
include::{articles}/_preview-banner.adoc[opts=optional]

This guide shows how to connect a Large Language Model (LLM) into a Vaadin application using Spring AI, Spring Boot, and the <<{articles}/flow/ai-support#,AI support features>>. You'll build a minimal chat UI with **MessageList** and **MessageInput**, stream responses token-by-token, and keep a conversational tone in the dialog with the AI -- all without writing boilerplate wiring code.
This guide shows how to connect a Large Language Model (LLM) into a Vaadin application using Spring AI, Spring Boot, and the <<{articles}/flow/ai-support#,AI integration features>>. You'll build a minimal chat UI with **MessageList** and **MessageInput**, stream responses token-by-token, and keep a conversational tone in the dialog with the AI -- all without writing boilerplate wiring code.

image::images/chatbot-image.png[role=text-center]

Expand Down Expand Up @@ -46,7 +46,7 @@ Add the Spring AI BOM and the OpenAI starter to import the necessary dependencie
<dependency>
<groupId>org.springframework.ai</groupId>
<artifactId>spring-ai-bom</artifactId>
<version>2.0.0-M2</version><!-- use the latest stable -->
<version>2.0.0-RC2</version><!-- use the latest stable -->
<type>pom</type>
<scope>import</scope>
</dependency>
Expand Down Expand Up @@ -178,7 +178,7 @@ Start the application, open the browser, and try your first prompts.

== What You Built

* A production-ready **chat bot** using Vaadin's AI support features
* A production-ready **chat bot** using Vaadin's AI integration features
* **Token-by-token streaming** with Vaadin Push
* **Conversation memory** managed by the LLM provider

Expand All @@ -188,9 +188,10 @@ Start the application, open the browser, and try your first prompts.
* Customize the **system prompt** to steer the assistant (e.g., tone, persona).
* Add **file attachments** with `UploadManager` via <<{articles}/flow/ai-support/file-attachments#,`withFileReceiver()`>>.
* Support **tool calls** via <<{articles}/flow/ai-support/tool-calling#,`withTools()`>>.
* **Persist conversation history** via <<{articles}/flow/ai-support/conversation-history#,`ResponseCompleteListener`>>.
* **Persist conversation history** via <<{articles}/flow/ai-support/conversation-history#,`ResponseListener`>>.
* Let users **populate a Grid** from your database in natural language with <<{articles}/flow/ai-support/ai-powered-grid#, AI-Powered Grid>>.
* Let users **build and update Charts** from your database in natural language with <<{articles}/flow/ai-support/ai-powered-chart#, AI-Powered Chart>>.
* Let users **fill a form** from natural-language input or attached files with <<{articles}/flow/ai-support/ai-powered-form#, AI-Powered Form>>.
* Log prompts/responses for observability.


Expand Down
42 changes: 42 additions & 0 deletions articles/components/form-layout/ai-powered.adoc
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
---
title: AI Form Filler
page-title: AI Form Filler | Vaadin components
description: Let users fill forms from natural-language input or attached files.
meta-description: Use FormAIController to let an LLM populate the fields of a Vaadin form layout from natural-language prompts or attached files.
order: 60
section-nav: badge-flow
---


= [since:com.vaadin:vaadin@V25.2]#AI-Powered Form# [badge-flow]#Flow#

AI Form Filler lets your users fill the fields of a Vaadin form by typing in natural language or attaching a document. The [classname]`FormAIController` from the <<{articles}/flow/ai-support#, AI Integration>> module connects a layout to an [classname]`AIOrchestrator` so the LLM can read the current values, look up options for combo boxes and selects, and write new values back. Each write is validated through the [classname]`Binder` or the component's built-in validators, and rejections are reported back so the model can correct them on the same turn.

[source,java]
----
TextField name = new TextField("Name");
EmailField email = new EmailField("Email");
ComboBox<String> country = new ComboBox<>("Country");
country.setItems("Finland", "Germany", "United States");
DatePicker hiredOn = new DatePicker("Hired on");

FormLayout form = new FormLayout(name, email, country, hiredOn);
MessageInput messageInput = new MessageInput();

FormAIController controller = new FormAIController(form);

AIOrchestrator.builder(provider, systemPrompt)
.withInput(messageInput)
.withController(controller)
.build();

add(messageInput, form);
----

Example prompts:

* "Fill in John Doe, john@acme.com, started in Germany on 2026-03-01."

Check warning on line 38 in articles/components/form-layout/ai-powered.adoc

View workflow job for this annotation

GitHub Actions / lint

[vale] reported by reviewdog 🐶 [Vaadin.RangeFormat] Use an en dash in a range of numbers. Raw Output: {"message": "[Vaadin.RangeFormat] Use an en dash in a range of numbers.", "location": {"path": "articles/components/form-layout/ai-powered.adoc", "range": {"start": {"line": 38, "column": 59}}}, "severity": "WARNING"}
* "Use the information in the attached resume to fill the form."
* "Clear the country and date fields."

For the full guide -- including field descriptions, options for selects and multi-selects, [classname]`Binder` integration, and field locking during a fill -- see <<{articles}/flow/ai-support/ai-powered-form#, AI-Powered Form>> in the AI Integration section. The same approach is available for tabular data via <<{articles}/flow/ai-support/ai-powered-grid#, AI-Powered Grid>> and for charts via <<{articles}/flow/ai-support/ai-powered-chart#, AI-Powered Chart>>.
5 changes: 5 additions & 0 deletions articles/components/form-layout/index.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -379,6 +379,11 @@ include::{root}/frontend/demo/component/formlayout/form-layout-colspan.ts[render

Column span is capped to the number of columns currently in the layout to prevent overflow.

== AI Form Filler

Use [classname]`FormAIController` to let users fill a Form Layout from natural-language input or attached files. See <<ai-powered#, AI Form Filler [badge-flow]#Flow#>>.


== Miscellaneous

=== Form Item Usage
Expand Down
4 changes: 2 additions & 2 deletions articles/flow/ai-support/ai-powered-chart.adoc
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: AI-Powered Chart
title: AI-Generated Charts
description: Use ChartAIController to let users build and update Highcharts visualizations from the application database using natural language.
meta-description: Learn how to configure the Vaadin ChartAIController to create and update Charts from a database via natural language prompts and persist the resulting state.
order: 70
Expand Down Expand Up @@ -70,7 +70,7 @@ if (saved != null) {
Listeners do not fire when [methodname]`restoreState()` is called. The current state is also automatically included in session serialization, so no extra save/restore code is needed for in-session persistence.


== Reconnecting After Deserialization
== Reconnecting after Deserialization

[classname]`ChartAIController` is not serializable. After session restore, create a new controller, pass it to [methodname]`reconnect()` together with the new provider, and optionally re-apply the saved state:

Expand Down
Loading
Loading