We just released our official Vaadin MCP server, a standard Model Context Protocol (MCP) endpoint that lets your AI coding tools query the latest Vaadin docs right from your editor. Plug it into any MCP-compatible client and your AI assistant can pull current component APIs, theming guidance, and version details on demand. No copy-pasting and no cutoff-driven hallucinations. It’s a regular MCP server that’s simple to add.
What to expect
With the Vaadin MCP server wired in, your AI assistant stops guessing and starts checking. When it drafts code or explains an approach, it can pull exact doc passages, confirm current APIs and versions, and align with Vaadin best practices. The result is tighter suggestions and faster iteration with less back-and-forth.
- Find answers fast: semantic search across the official Vaadin docs.
- Ground your assistant’s suggestions: fetch exact passages from the docs to cut down on hallucinations.
- Use the correct, current APIs: component version awareness and references to avoid deprecated patterns.
- Build idiomatic Vaadin apps: best-practice guidance for components, layouts, and data binding.
- Keep styling consistent: theming tokens and styling guidance pulled straight from the docs.
- Get up to speed quickly: a concise Vaadin primer with practical do’s and don’ts.
Works with your existing tools
The server speaks the standard Model Context Protocol (MCP), so it works with modern coding agents and IDE extensions that support MCP. Add it once, and your AI assistant can reference Vaadin docs whenever it needs context.
Setup is straightforward. Head to the Vaadin MCP docs for client-specific steps, config snippets, and a quick test drive in under two minutes.
Before/after: why this helps
Here’s what changes when your AI assistant can read the latest Vaadin docs. Without MCP, it may guess APIs or styling and miss newer components. With the Vaadin MCP server, suggestions reference current documentation, so you get correct imports, idiomatic component usage, and fewer context switches.
We’ll look at two examples generated in VS Code using GitHub Copilot (Agent mode) with Claude Sonnet 4.5. The first runs without Vaadin MCP. The second uses the Vaadin MCP server, so the AI agent can read the latest docs. Both examples start from a clean, vanilla Vaadin 24.9.3 starter project.
Prompt used for both examples:
Add a new view with two cards:
Card 1 (landscape): title, body text, and one primary button.
Card 2 (portrait): an image, title, body text, one badge, and two buttons (primary + secondary).
Use placeholder content and labels.
Example 1: no MCP
What looks like a strong start ends up short of the goal. The agent analyzes the workspace and reports that a new view with two cards is ready. A quick look at the code shows the “cards” are plain <div>s. That works, but there’s a better option: since Vaadin 24.8, the Card component provides a more robust, reusable way to implement card elements in your app.
```java
private Div createLandscapeCard() {
var card = new Div();
card.addClassNames(
LumoUtility.Background.BASE,
LumoUtility.BorderRadius.MEDIUM,
LumoUtility.Border.ALL,
LumoUtility.BorderColor.CONTRAST_10,
LumoUtility.Padding.MEDIUM,
LumoUtility.Display.FLEX,
LumoUtility.FlexDirection.COLUMN,
LumoUtility.Gap.MEDIUM
);
card.setWidth("450px");
// Title
var title = new H3("Landscape Card");
title.addClassNames(LumoUtility.Margin.NONE);
// Body text
var bodyText = new Paragraph(
"This is a landscape card with a title, body text, and a primary action button. " +
"Perfect for displaying key information and prompting user actions."
);
bodyText.addClassNames(
LumoUtility.TextColor.SECONDARY,
LumoUtility.Margin.NONE
);
// Primary button
var primaryButton = new Button("Take Action");
primaryButton.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
primaryButton.addClickListener(e -> {
// Action handler placeholder
});
card.add(title, bodyText, primaryButton);
return card;
}
```
Example 1: code generated for the landscape card without using the MCP server
Example 1: two cards created using DIV elements
Example 2: with MCP
For the second run, the Vaadin MCP server was enabled. The agent immediately queried the Card component docs via MCP, then scaffolded the view based on those instructions.
Because it could read the latest documentation, the agent not only knew the Card component existed—it used the recommended API and patterns to implement the two cards.
```java
private Card createLandscapeCard() {
Card card = new Card();
card.addThemeVariants(
CardVariant.LUMO_OUTLINED,
CardVariant.LUMO_ELEVATED,
CardVariant.LUMO_HORIZONTAL
);
card.setWidthFull();
card.setMaxWidth("800px");
// Title
card.setTitle("Landscape Card Title");
// Body text
Paragraph bodyText = new Paragraph(
"This is a landscape card with a horizontal layout. It contains a title, " +
"body text, and a primary action button. Perfect for displaying content " +
"in a wide format."
);
card.add(bodyText);
// Primary button
Button primaryButton = new Button("Primary Action", event ->
Notification.show("Primary action clicked!"));
primaryButton.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
card.addToFooter(primaryButton);
return card;
}
```
Example 2: code generated for the landscape card, using the MCP server
Example 2: two cards created using Vaadin's built-in Card component
Aftermath
Claude Sonnet 4.5 has a January 2025 knowledge cutoff. Vaadin’s Card component arrived in 24.8 release (June 2025), so it wasn’t on the model’s radar. With the Vaadin MCP server, the agent consults the latest docs, prefers framework components over hand-rolled <div>s, and produces a cleaner, shorter view with better structure.
Our recommendation: if you use an AI assistant while building Vaadin apps, enable the Vaadin MCP server. It keeps the AI assistant current, grounds its suggestions in the official docs, and helps you ship idiomatic code with fewer detours. See the docs to get started.