Chat Agent UI，类似 ChatGPT 的聊天界面，Spring AI 应用的测试工具

本文介绍一个本人开发的开源项目 Chat Agent UI。它的功能是为 AI 应用的后端程序提供一个简易的测试界面，对 Spring AI 提供了更简单的集成方式。

开发动机

目前的很多 AI 应用，提供的是类似 ChatGPT 的聊天机器人界面。后端开发人员进行 API 的开发，再与前端进行集成。在后端 API 的开发过程中，能够进行测试是非常重要的。我之前的做法一般是使用 springdoc 来提供 Swagger UI。使用 Swagger UI 来测试 REST API。这种方式比使用 Postman 要更方便一些，毕竟有一个界面，但是仍然不够直观。

考虑到大部分聊天机器人在界面上都是相似的，我开发了一个独立的界面，可以直接与 API 交互。界面资源打包成 webjar 格式。只需要在项目中添加相关的依赖，就可以使用该界面。

界面开发使用的是 assistant-ui 库。这是目前比较流行的开发 AI 助手的前端界面库。对于常用的功能都提供了内置的支持。

Spring AI

下面介绍一下如何在 Spring AI 应用中使用这个界面库。

首先需要添加两个库的依赖。

chat-agent-ui 是前端的界面库，里面只包含前端资源，本质上是一个 webjar。目前版本是 0.15.0。

xml 复制代码

<dependency>  <groupId>com.javaaidev.chatagentui</groupId>  <artifactId>chat-agent-ui</artifactId>  <version>${chat-agent-ui.version}</version></dependency>

spring-ai-adapter 是专门为 Spring AI 提供的模型转换库。目前版本是 0.5.0。

xml 复制代码

<dependency>  <groupId>com.javaaidev.llmagentspec</groupId>  <artifactId>spring-ai-adapter</artifactId>  <version>${llm-agent-spec.version}</version></dependency>

这是因为前端界面对于后端 API 提供的请求和响应格式有自己的要求。这是 assistant-ui 定义的请求和响应的格式。后台 API 需要满足这个格式要求。这个模型转换库把 Spring AI 的 Message 和 ChatResponse 转换为前端界面所要求的格式。

在后端 API 的实现中，需要提供 REST API，路径是 /chat 。请求和响应的格式使用预定义的对象。分成非流式和流式两种。推荐使用流式响应。

不管是流式还是非流式，REST API 的请求类型是 ChatAgentRequest，返回值类型是 Flux<ServerSentEvent<ChatAgentResponse>>。可以看到，返回值实际上是 SSE 流。流中的每个元素都是 ChatAgentResponse 对象，以 JSON 的格式发送。当使用非流式时，SSE 流中只会包含一个元素。

下面是 REST API 的标准实现方式。通过 ModelAdapter 来进行格式的转换。fromRequest 方法把 ChatAgentRequest 转换为 Spring AI 的 Message。toStreamingResponse 方法把 Spring AI 的 Flux<ChatResponse> 转换为 Flux<ServerSentEvent<ChatAgentResponse>>。

java 复制代码

@RestController@RequestMapping("/chat")public class ChatAgentStreamingController {
  private final ChatClient chatClient;
  public ChatAgentStreamingController(ChatClient.Builder builder) {    chatClient = builder.build();  }
  @PostMapping(produces = MediaType.TEXT_EVENT_STREAM_VALUE)  public Flux<ServerSentEvent<ChatAgentResponse>> chatStreaming(      @RequestBody ChatAgentRequest request) {    return ModelAdapter.toStreamingResponse(        chatClient.prompt()            .system(SYSTEM_TEXT)            .messages(ModelAdapter.fromRequest(request).toArray(new Message[0]))            .stream()            .chatResponse());  }}

添加了 REST API 之后，启动应用，可以访问界面来测试。界面的地址是：http://localhost:8080/webjars/chat-agent-ui/index.html。

这是一个标准的 AI 助手界面，可以发送消息，查看结果。支持会话历史记录，可以创建多个会话。

功能展示

前端界面提供了对下面这些功能的支持：

文本的输入和输出。支持 Markdown 格式和代码的高亮显式。

输出大模型的推理过程。只对推理模型有效，并且模型服务对外提供该信息。下图使用的是本地运行的 qwen 模型。

用户上传图片和文本文件。下图使用大模型提取上传的图片文件的文本内容。

源代码在 GitHub 上（JavaAIDev/chat-agent-ui）。如果你进行 Spring AI 的后端开发，可以用这个工具进行测试，也可以快速展示后端的能力。