开始使用

本节介绍如何将可用的 AI 聊天放入应用程序:启用服务器推送、连接模型,并添加组件。

前提条件

按照 安装 中的说明安装该扩展组件。

启用服务端推送

AI 回答的答案是从其他线程逐个 token 传递而来,因此应用程序必须启用服务端推送。在应用程序类上添加 @Push:

@Push
@SpringBootApplication
public class AiChatEx1Application implements AppShellConfigurator {

如果不添加,组件仍会渲染,但答案产生的任何内容都不会到达浏览器。

连接模型

聊天本身不与模型通信,而是向应用程序请求一个函数:给定请求,以文本流的形式返回答案。该函数就是 LLMProvider,配置了 provider 之后聊天才能回答问题。

本示例使用 Ollama 在本地运行模型,不需要 API 密钥。首先添加 Spring AI starter:

implementation 'org.springframework.ai:spring-ai-starter-model-ollama'

并在 application.properties 中配置:

spring.ai.model.chat=ollama
spring.ai.ollama.base-url=${OLLAMA_BASE_URL:http://localhost:11434}
spring.ai.ollama.chat.model=${OLLAMA_CHAT_MODEL:qwen3:8b}
spring.ai.ollama.init.pull-model-strategy=never

然后为聊天提供一个 provider。Spring AI 会自动配置一个 ChatClient.Builder,在视图中可以用这个 builder 构建自己的 AI 客户端:

@Autowired
private ChatClient.Builder chatClientBuilder;

private ChatClient chatClient;

@Subscribe
public void onInit(final InitEvent event) {
    chatClient = chatClientBuilder.build();
}

@Install(to = "chat", subject = "llmProvider")
private Flux<String> llmProvider(final LLMProvider.LLMRequest request) {
    return chatClient.prompt()
            .user(request.userMessage())
            .stream()
            .content();
}

示例使用 @Install 声明 provider,这是视图中的常用方式。如需以编程方式创建聊天,请使用 setLlmProvider(…​) 实现。

LLMProvider 来自 com.vaadin.flow.component.ai.provider,而不是 Jmix 包。

请求中携带的内容不仅包含用户输入的文本,还包含系统提示词和任何添加的附件。provider 决定其中哪些内容会到达模型。未读取的内容不会被发送。上面的方法只转发消息,这对于不需要系统提示词和附件的聊天来说已经足够。参考 系统提示词 和 将文件发送到模型。

除了 starter 和配置之外,上面的内容都不是 Ollama 独有的。也就是说,如需使用 OpenAI、Anthropic、Azure OpenAI 或任何其他 Spring AI 模型,只需替换 starter 和配置即可,provider 方法保持不变。

添加聊天

在视图描述符中声明该组件。为其指定宽度和高度,如未指定则聊天会根据内容调整自身大小(在视图的根布局中显示狭窄的列):

<aichat:aiChat id="chat" width="100%" height="100%"/>

这就是全部配置。聊天将对话保存在内存中,渲染答案,不需要其他任何配置即可工作:

可用的聊天

当没有可访问的模型时,应用程序也能正常启动,视图也会照常打开。但发送第一条消息就会失败,表现为聊天中的生成失败,而不是启动错误。

后续步骤

上面的聊天将对话保存在内存中,因此当视图关闭时对话就会消失。参考 aiChat,了解如何将聊天绑定到自定义的消息实体、持久化对话、控制生成,以及配置聊天的各个部分。

聊天中的组件也可以单独使用:aiMessageList 用于显示对话或自行驱动对话,aiMessageInput 用于输入消息,aiCodeBlock 用于在应用程序的任何位置显示代码。