Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
68 commits
Select commit Hold shift + click to select a range
6e1757c
Feature/new vaadin font (#4461)
veerapaananen Aug 7, 2025
b3bf7e4
Use new Vaadin logo in docs project (#4463)
veerapaananen Aug 7, 2025
6196540
Update hardcoded vaadin version to 24.8.5 (#4453)
vaadin-bot Aug 7, 2025
b303510
Update vaadin version to 24.9.0-alpha3 (#4442)
vaadin-bot Aug 7, 2025
65ba99c
Update index.adoc (#4464)
peholmst Aug 7, 2025
bd94211
docs: use overlay closed event (#4470)
sissbruecker Aug 7, 2025
3ad6c2a
Update configuration.adoc (#4267)
OlliTietavainenVaadin Aug 8, 2025
7b2b044
Removed "Brief Step-by-Step" section (#4239)
MarcinVaadin Aug 8, 2025
7160931
Fix/missing or wrong length meta info (#4375)
veerapaananen Aug 8, 2025
174c71e
doc: Copilot new features update (#4392)
MarcinVaadin Aug 8, 2025
0f2df02
doc: Copilot Code Formatting (#4377)
MarcinVaadin Aug 8, 2025
baded0f
Add data retention and upgrade safety advice (#4440)
sosa-vaadin Aug 8, 2025
773841f
Explain how to install JBR manually (#4352)
peholmst Aug 8, 2025
293b2a4
fix: Complete description for Upload documentation (#4445)
fredpena Aug 8, 2025
f380856
Update hardcoded vaadin version to 24.8.6 (#4486)
vaadin-bot Aug 11, 2025
0a901ab
Update MTK Analyzer version to 2.0.24 (#4491)
szolo Aug 12, 2025
894c21f
chore: add a note about .npmrc customization (#4459)
mcollovati Aug 13, 2025
d26c924
Revert font weight back to semibold for docs headings (#4497)
veerapaananen Aug 13, 2025
d00381a
Adds V25 prerelease to versions.json (#4499)
paulroemer Aug 15, 2025
fcc4bfe
Update feature-pack.adoc (#4435)
bennewi Aug 15, 2025
d588b13
Add documentation for Custom Authorization Rules and Disabling Featur…
fredpena Aug 15, 2025
f8b720e
Update vaadin version to 24.9.0-alpha5 (#4506)
vaadin-bot Aug 15, 2025
5287b97
Add styling properties to Avatar and Charts docs (#4285)
juuso-vaadin Aug 18, 2025
7b4786f
Update vaadin version to 24.9.0-alpha6 (#4512)
vaadin-bot Aug 19, 2025
1fac7db
update supported technology for Vaadin 24.8 (#4521)
ZheSun88 Aug 21, 2025
8f75b98
Add link to Java language as it is with React and TS (#4525)
manolo Aug 25, 2025
55d82eb
Update vaadin version to 24.9.0-alpha7 (#4530)
vaadin-bot Aug 25, 2025
9125946
Copilot is not only Hilla (#4527)
Artur- Aug 25, 2025
a8f582a
Update hardcoded vaadin version to 24.8.7 (#4534)
vaadin-bot Aug 26, 2025
49ec356
docs: Copilot privacy concerns (#4325)
MarcinVaadin Aug 26, 2025
9ecadbd
Add missing elements to the Standard HTML Elements page (#4523)
HerbertsVaadin Aug 26, 2025
f92415a
Copilot feature flags update (#4037)
MarcinVaadin Aug 26, 2025
e66fed4
Update latest MTK Analyzer version to 2.0.25 (#4545)
szolo Aug 26, 2025
80ceeca
Add AI documentation: setup guides and examples for integrating LLMs …
SebastianKuehnau Aug 28, 2025
82ac712
docs: Guide on creating Custom Field in flow (#4522)
HerbertsVaadin Aug 28, 2025
71e09e0
docs: remove mentions of Map component feature flag (#4553)
web-padawan Aug 28, 2025
522666a
Update vaadin version to 24.9.0-beta1 (#4558)
vaadin-bot Aug 28, 2025
0095d00
chore: exclude observability kit from runtime (#4561) (#4562)
vaadin-bot Aug 29, 2025
24bc6b2
Update documentation for simplified skeleton (#4563)
peholmst Aug 29, 2025
18f34e7
Update vaadin version to 24.9.0-beta2 (#4564)
vaadin-bot Sep 1, 2025
cfff36d
docs: deprecate Cookie Consent (#4509)
sissbruecker Sep 1, 2025
a45803c
Replace `StreamResource` with `DownloadHandler` in Collaboration Kit …
MatthewVaadin Sep 2, 2025
4dd1839
Deploy to Fly.io Guide (#4572)
peholmst Sep 3, 2025
0845ded
Use secrets instead of command line arguments to pass license key (#4…
vaadin-bot Sep 4, 2025
27e5c2b
Update vaadin version to 24.9.0-beta3 (#4580)
vaadin-bot Sep 8, 2025
39ee262
Update hardcoded vaadin version to 24.8.8 (#4582)
vaadin-bot Sep 9, 2025
d502f86
Update vaadin version to 24.9.0-rc1 (#4586)
vaadin-bot Sep 10, 2025
50e4127
docs: Update Using Vaadin Copilot & Vaadin IDE Plugin (#4584)
MarcinVaadin Sep 11, 2025
551f01c
Update vaadin version to 24.9.0-rc2 (#4589)
vaadin-bot Sep 11, 2025
2717fd2
add missing return statement (#4588)
DarioViva42 Sep 15, 2025
365c5d4
Fix upload progress tracking link (#4583)
HerbertsVaadin Sep 15, 2025
6d7c74d
chore: Remove reference to Premium and DAU from docs (#4590)
TatuLund Sep 15, 2025
c14de10
Control center: Digital Ocean instructions (#4581)
sosa-vaadin Sep 16, 2025
d487f99
Update vaadin version to 24.9.0 (#4596)
vaadin-bot Sep 16, 2025
598abf0
Update hardcoded vaadin version to 24.9.0 (#4597)
vaadin-bot Sep 16, 2025
920cc92
update supported servlet session for JBoss EAP
ZheSun88 Sep 18, 2025
50f4bf9
fix: ensure popover does not close in React example (#4615)
web-padawan Sep 22, 2025
7f067da
chore: update package.json to remove opentelemetry (#4616)
web-padawan Sep 23, 2025
8b38aea
Skeleton example package is now called 'examplefeature' instead of 't…
peholmst Sep 23, 2025
7aa05a6
Update hardcoded vaadin version to 24.9.1 (#4629)
vaadin-bot Oct 2, 2025
bafeeae
Update vaadin version to 24.9.1 (#4628)
vaadin-bot Oct 2, 2025
1898bee
Update commercial banner for the Kits (#4631)
Oct 2, 2025
e9eeba0
Update vaadin version to 24.9.2 (#4637)
vaadin-bot Oct 3, 2025
ee72b9a
Update hardcoded vaadin version to 24.9.2 (#4638)
vaadin-bot Oct 3, 2025
e52787b
feat: document NpmPackage npm assets (#4513) (#4648)
vaadin-bot Oct 13, 2025
27a6f72
chore: move dspublisher-header stylesheets to head (#4657) (#4658)
vaadin-bot Oct 16, 2025
dd3f2e7
Improve HTML Elements for Flow documentation (#4526)
HerbertsVaadin Oct 16, 2025
e28f8ba
Add documentation for 'skip' configuration option in the vaadin maven…
jorgheymans Oct 16, 2025
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
3 changes: 3 additions & 0 deletions .github/styles/config/vocabularies/Docs/accept.txt
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ Brotli
bun
[bB]undlers?
[cC]acheable
[cC]hatbot
classpath
[cC]onfig(|uration|ure|urer|urator|map)
[cC]onformant
Expand Down Expand Up @@ -140,6 +141,7 @@ Node\.js
[nN]ullable
[nN]ullability
OAuth
Ollama
OSGi
Okta
[Oo]nboarding
Expand Down Expand Up @@ -238,6 +240,7 @@ DOM
IDE
JDK
MVC
LLMs
PWA
RPC
SPI
Expand Down
6 changes: 5 additions & 1 deletion articles/_commercial-banner.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,11 @@ ifndef::commercial-feature[]
:commercial-feature: this feature
endif::[]

ifdef::kit-trial[]
ifdef::kit-start-trial[]
:trial-link: https://vaadin.com/pro/validate-license[Start Trial^]
endif::[]

ifdef::kit-request-trial[]
:trial-link: https://pages.vaadin.com/acceleration-kit-trials[Request Trial^]
endif::[]

Expand Down
4 changes: 2 additions & 2 deletions articles/_vaadin-version.adoc
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
:vaadin-version: 24.8.3
:vaadin-flow-version: 24.8.3
:vaadin-version: 24.9.2
:vaadin-flow-version: 24.9.2
:vaadin-seven-version: 7.7.38
:vaadin-eight-version: 8.20.0
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 23 additions & 0 deletions articles/building-apps/ai/index.adoc
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
---
title: AI & LLMs
page-title: AI in Vaadin Applications
description: Leverage AI in your Vaadin applications with practical use cases and setup options that fit your project.
meta-description: Leverage AI in Vaadin. Practical use cases and setup options with Spring AI or LangChain4j, plus UI patterns for streaming chat.
order: 69
---


= AI in Vaadin Applications

In this section, you'll learn how to connect a Vaadin application to a Large Language Model (LLM) and integrate AI features into your workflows. Using common Vaadin application scenarios as examples, you'll explore typical UI patterns for AI integration. The focus is on simple, adaptable examples that you can quickly implement in your own projects.

You'll learn how to:

* connect your application to an AI client with popular Java libraries such as Spring AI and LangChain4j,
* choose Vaadin components that create intuitive, AI-powered workflows -- such as `MessageInput`, `MessageList`, and `Scroller`, and
* deliver real-time updates to users through server push.

section_outline::[]

[NOTE]
This section is a work in progress, and your feedback is welcome. If you have suggestions or find gaps, https://github.com/vaadin/docs[open an issue on GitHub].
286 changes: 286 additions & 0 deletions articles/building-apps/ai/quickstart-guide.adoc
Original file line number Diff line number Diff line change
@@ -0,0 +1,286 @@
---
title: Quick Start-Guide
page-title: Quick Start-Guide | AI Chatbot with Vaadin
description: A compact chat view with streaming, correct scrolling, and message context.
meta-description: Hands-on tutorial - connect Vaadin to an LLM with Spring, build a streaming chat UI, and apply simple, reusable patterns for prompts, memory, and UX.
order: 20
section-nav: badge-flow
---


= Quick Start-Guide: Add an AI Chat Bot to a Vaadin + Spring Boot Application [badge-flow]#Flow#

This guide shows how to connect a Large Language Model (LLM) into a Vaadin application using Spring AI and Spring Boot. You'll build a minimal chat UI with Vaadin provided components **MessageList** and **MessageInput**, stream responses token-by-token, and keep a conversational tone in the dialog with the AI.

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

**Audience & style:** This quick guide is for Java developers and Vaadin beginners, as well as AI rookies. The sample application is implemented in Spring style and explains in small, practical steps how to integrate AI into Vaadin. Code snippets are available for copy and paste.


== Prerequisites

* Java 17+
* Spring Boot 3.5+ (or newer)
* Vaadin 24.8+
* An OpenAI API key (`OPENAI_API_KEY`)


== 1. Start from a Vaadin Spring Skeleton

Download a Vaadin Spring starter from http://github.com/vaadin/skeleton-starter-flow-spring[GitHub], import it into your preferred IDE, and get it running in your environment.

**Pro Tip**: Starting the application with Hotswap Agent improves your development lifecycle.

Start with a cleaning and remove the default service `GreetService` and clear the existing UI content. You'll implement everything in `MainView`.


== 2. Add Spring AI dependencies

Add the Spring AI BOM and the OpenAI starter to import the necessary dependencies to your project. The BOM takes care of all Spring AI dependencies and provides the consistent version numbers to each sub dependency automatically.

**Maven (`pom.xml`):**

[source,xml]
----
<dependencyManagement>
...
<dependencies>
<dependency>
<groupId>org.springframework.ai</groupId>
<artifactId>spring-ai-bom</artifactId>
<version>1.0.1</version><!-- use the latest stable -->
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
...
</dependencyManagement>

<dependencies>
...
<!-- OpenAI LLM via Spring AI -->
<dependency>
<groupId>org.springframework.ai</groupId>
<artifactId>spring-ai-starter-model-openai</artifactId>
</dependency>
...
</dependencies>
----

*(Gradle users: import the Spring AI BOM and add the same starters.)*


== 3. Configure Your OpenAI Credentials

To access the API of OpenAI you need a license key. The preferred way to provide the key is through an environment variable, as this makes it available to other applications as well. After setting the environment variable on your system, refer to it from `application.properties` like this:

[source,properties]
----
spring.ai.openai.api-key=${OPENAI_API_KEY}
# Optional: pick a model; adjust to what your account supports
# spring.ai.openai.chat.options.model=gpt-5
----

**Tip:** use Spring profiles or your CI/CD's secret store for the key.


== 4. Enable Vaadin Push

To prevent end-users from sitting in front of a blank screen waiting for a response, you'll stream tokens asynchronously and update the UI live with response tokens. To do this, you need to enable server push:

[source,java]
----
// src/main/java/org/vaadin/example/Application.java

import com.vaadin.flow.component.page.AppShellConfigurator;
import com.vaadin.flow.component.page.Push;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.theme.Theme;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@Theme("my-theme")
@PageTitle("AI in Vaadin")
@SpringBootApplication
@Push
public class Application implements AppShellConfigurator {

public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}
----


== 5. Create the Chat service (Spring AI)

Create a new class called **ChatService** and annotate it with `@Service`. This service builds a `ChatClient` with a **ChatMemory** advisor in the constructor and exposes a **reactive stream** of tokens.

[source,java]
----
// src/main/java/org/vaadin/example/ChatService.java
package org.vaadin.example;

import org.springframework.ai.chat.client.ChatClient;
import org.springframework.ai.chat.client.advisor.MessageChatMemoryAdvisor;
import org.springframework.ai.chat.memory.ChatMemory;
import org.springframework.stereotype.Service;
import reactor.core.publisher.Flux;

@Service
public class ChatService {

private final ChatClient chatClient;

public ChatService(ChatClient.Builder chatClientBuilder,
ChatMemory chatMemory) {
// Add a memory advisor to the chat client
var chatMemoryAdvisor = MessageChatMemoryAdvisor
.builder(chatMemory)
.build();

// Build the chat client
chatClient = chatClientBuilder
.defaultAdvisors(chatMemoryAdvisor)
.build();
}

public Flux<String> chatStream(String userInput, String chatId) {
return chatClient.prompt()
.advisors(advisorSpec ->
advisorSpec.param(ChatMemory.CONVERSATION_ID, chatId)
)
.user(userInput)
.stream()
.content();
}
}

----

Why a chat memory? **ChatMemory** keeps context of the conversations so users don't have to repeat themselves. The `chatId` keeps the context for a specific chat and doesn't share it with other chats and users.


== 6. Build the Chat UI with Vaadin

Use `MessageList` to render the conversation as Markdown and `MessageInput` to handle the user prompts. Wrap the list in a `Scroller` so long chats don't grow the layout beyond the browser window:

[source,java]
----
// src/main/java/org/vaadin/example/MainView.java
package com.example.application.views.chatbot;

import com.example.application.services.ChatService;
import com.vaadin.flow.component.Composite;
import com.vaadin.flow.component.messages.MessageInput;
import com.vaadin.flow.component.messages.MessageList;
import com.vaadin.flow.component.messages.MessageListItem;
import com.vaadin.flow.component.orderedlayout.Scroller;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Menu;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.router.RouteAlias;
import org.vaadin.lineawesome.LineAwesomeIconUrl;

import java.time.Instant;
import java.util.UUID;

@PageTitle("Chat Bot")
@Route("")
@RouteAlias("chat-bot")
@Menu(order = 0, icon = LineAwesomeIconUrl.ROBOT_SOLID)
public class ChatBotView extends Composite<VerticalLayout> {

private final ChatService chatService;
private final MessageList messageList;
private final String chatId = UUID.randomUUID().toString();

public ChatBotView(ChatService chatService) {
this.chatService = chatService;

//Create a scrolling MessageList
messageList = new MessageList();
var scroller = new Scroller(messageList);
scroller.setHeightFull();
getContent().addAndExpand(scroller);

//create a MessageInput and set a submit-listener
var messageInput = new MessageInput();
messageInput.addSubmitListener(this::onSubmit);
messageInput.setWidthFull();

getContent().add(messageInput);
}

private void onSubmit(MessageInput.SubmitEvent submitEvent) {
//create and handle a prompt message
var promptMessage = new MessageListItem(submitEvent.getValue(), Instant.now(), "User");
promptMessage.setUserColorIndex(0);
messageList.addItem(promptMessage);

//create and handle the response message
var responseMessage = new MessageListItem("", Instant.now(), "Bot");
responseMessage.setUserColorIndex(1);
messageList.addItem(responseMessage);

//append a response message to the existing UI
var userPrompt = submitEvent.getValue();
var uiOptional = submitEvent.getSource().getUI();
var ui = uiOptional.orElse(null); //implementation via ifPresent also possible

if (ui != null) {
chatService.chatStream(userPrompt, chatId)
.subscribe(token ->
ui.access(() ->
responseMessage.appendText(token)));
}
}
}

----

**Key UI patterns used here:**

* **Dialog character:** display prompts and responses separately so the difference remains visible.
* **Streaming output:** show tokens as they arrive for perceived performance.
* **Markdown rendering:** richer answers (lists, code blocks, emojis).
* **Sticky scroll:** keep the latest answer in view.


== 7. Run & Iterate

Start the application, open the browser, and try your first prompts.


== What You Built

* A production-ready **chat bot** using Vaadin components
* **Token-by-token streaming** with Vaadin Push
* **Conversation memory** via Spring AI advisors


== Next Possible Steps

* Add a **system prompt** field to steer the assistant (e.g., tone, persona).
* Add **clear chat** and **export** actions.
* Add **feedback** to evaluate responses
* Support **attachments** and **tool calls** (retrieval, functions).
* Log prompts/responses for observability.


== Troubleshooting

* **No streaming updates?** Ensure `@Push` is present and check reverse proxy/WebSocket settings.
* **401 Exception from OpenAI?** Verify `OPENAI_API_KEY` and environment injection in your run configuration.


== Complete File List Recap

* `src/main/java/org/vaadin/example/Application.java` — Spring Boot + `@Push`
* `src/main/java/org/vaadin/example/ChatService.java` — Spring AI client + memory
* `src/main/java/org/vaadin/example/MainView.java` — Vaadin chat UI
* `src/main/resources/application.properties` — OpenAI config
* `pom.xml` — Vaadin + Spring AI dependencies

That's it — your Vaadin application now speaks AI. 🚀
43 changes: 43 additions & 0 deletions articles/building-apps/ai/technical-setup/ide/eclipse.adoc
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
---
title: Eclipse IDE
page-title: Configure API key in Eclipse IDE for Vaadin
description: Configure environment variables or VM arguments in Eclipse IDE to provide API keys for your Vaadin project.
meta-description: Configure API keys in Eclipse IDE for your Vaadin project using Run Configurations for environment variables or VM arguments.
order: 30
---


= Eclipse IDE

In Eclipse you need to set the API key explicitly in the Run Configuration.
Choose either **Environment variables** or **VM arguments**:


== Environment Variables

*Open → Run → Run Configurations → Environment → New…*
Add:

----
Name: OPENAI_API_KEY
Value: sk-your-key-here
----


== VM Arguments

*Open → Run → Run Configurations → Arguments → VM arguments*
Add:

----
-DOPENAI_API_KEY=sk-your-key-here
----

image::images/configuration_eclipse.jpg[role=text-center]

In both cases you can reference the variable in your configuration:

[source,properties]
----
spring.ai.openai.api-key=${OPENAI_API_KEY}
----
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading