AI 对话应用接口开发：同步接口、SSE 流式与智能体实现

让 TravelApp 应用支持流式输出

要让接口支持流式输出，首先我们的 TravelApp 也不能使用同步的 call()+chatResponse() 方法返回 String 类型的全部内容。

需要使用到 Flux 响应式对象进行异步操作。在 TravelApp 类增加一个 StreamChat 方法：

/*
 * 与 AI 大模型流式对话接口
 * @param chatId 会话 ID
 * @param message 用户输入
 * @return AI 模型返回结果
 */
public Flux<String> streamChat(String chatId, String message){
    FunctionCallback[] mcpTools = toolCallbackProvider.getToolCallbacks();
    Flux<String> result = chatClient.prompt()
        .user(message)
        .advisors(spec -> spec
            .param(CHAT_MEMORY_CONVERSATION_ID_KEY, chatId)
            .param(CHAT_MEMORY_RETRIEVE_SIZE_KEY, 10)
        )
        .tools(aiTools)
        .tools(McpToolCallbackProxy.proxyAll(mcpTools))
        .toolContext(Map.of("chatId", chatId))
        .stream().content();
    return result;
}

实现 SSE 流式接口

实现流式接口一共有三种方式。

1. 直接返回 Flux 对象，但是必须添加 SSE 对应的 MediaType

修改 ChatWithAIController，增加方法 chatWithTravelAppSEE_Flux：

/*
 * SSE 实现方式一：使用 Flux
 * 必须设置 produces 为 MediaType.TEXT_EVENT_STREAM_VALUE
 */
@GetMapping(value = "/chat/travel/sse/flux", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public Flux<String> chatWithTravelAppSEE_Flux(String chatId, String message){
    return travelApp.streamChat(chatId, message);
}

2. 返回 Flux 对象，并设置泛型为 ServerSentEvent

这种方式可省略 MediaType 的设置，但是要对 String 进行转化。

/*
 * SSE 实现方式二：使用 ServerSentEvent 泛型
 */
@GetMapping("/chat/travel/sse/generic")
public Flux<ServerSentEvent<String>> chatWithTravelAppSEE_Generic(String chatId, String message){
    return travelApp.streamChat(chatId, message)
        .map(result -> ServerSentEvent.builder(result).build());
}

3. 使用 SseEmiter 类型，通过 send 方法持续向 SseEmiter 对象发送消息

这种方式代码会稍微大一些，但是通用性和可控制性更强。

// 实现方式三使用 SseEmitter
@GetMapping("/chat/travel/sse/emitter")
public SseEmitter chatWithTravelAppSEE_Emitter(String chatId, String message){
    // 创建 SseEmitter 对象，设置超时时间为 5 分钟
    SseEmitter emitter = new SseEmitter(300000L);
    // 订阅流
    travelApp.streamChat(chatId, message).subscribe(
        result -> {
            try {
                // 发送数据
                emitter.send(result);
            } catch (Exception e) {
                emitter.completeWithError(e);
            }
        },
        // 错误处理
        error -> emitter.completeWithError(error),
        () -> emitter.complete()
    );
    return emitter;
}

AI 智能体应用接口开发

改造智能体支持流式运行

类似于 TravelApp 增加流式对话 StreamChat()，我们也需要改造智能体 BaseAgent 增加支持流式运行的 streamRun() 方法：

/*
 * 增加流式输出的运行方法
 * @param userPrompt 用户输入
 * @return SseEmitter
 */
public SseEmitter streamRun(String userPrompt){
    SseEmitter emitter = new SseEmitter(300000L);
    // 使用异步线程处理，避免线程阻塞
    CompletableFuture.runAsync(() -> {
        try{
            if (this.state != AgentState.IDLE){
                emitter.send("当前 Agent 正在运行中，请勿重复运行！");
                emitter.complete();
                return;
            }
            if (StrUtil.isBlank(userPrompt)){
                emitter.send("请输入用户提示词！");
                emitter.complete();
                return;
            }
            // 添加用户输入
            chatMemory.add(chatId, new UserMessage(userPrompt));
            this.state = AgentState.RUNNING;
            try{
                for (int i = 0; i < maxSteps && state != AgentState.FINISHED; i++) {
                    currentStep = i + 1;
                    log.info("开始执行第{}步...", currentStep);
                    String result = "Step " + currentStep + ": " + step();
                    emitter.send(result);
                }
                if(currentStep >= maxSteps){
                    state = AgentState.FINISHED;
                    emitter.send("已执行最大步骤数，任务结束！,最大步数为"+maxSteps);
                }
                // 正常完成
                emitter.complete();
            } catch (IOException e) {
                state = AgentState.ERROR;
                try{
                    emitter.send("执行出错，请检查！");
                    emitter.complete();
                } catch (IOException ex) {
                    throw new RuntimeException(ex);
                }
            }finally {
                cleanResources();
            }
        } catch (IOException e) {
            emitter.completeWithError(e);
        });
    // 设置超时回调
    emitter.onTimeout(() -> {
        this.state = AgentState.ERROR;
        this.cleanResources();
        log.warn("SSE 连接超时，会话 ID: {}", chatId);
    });
    // 设置完成回调
    emitter.onCompletion(() -> {
        if(state == AgentState.RUNNING){
            this.state = AgentState.FINISHED;
        }
        this.cleanResources();
        log.debug("SSE 连接完成，会话 ID: {}", chatId);
    });
    return emitter;
}

上述代码看上去很复杂，但是大部分都是在原有 run 方法上改造，将结果信息交给 SseEmitter 通过 send 方法推送。

添加智能体异步接口

有了异步运行的方法，我们就可以添加智能体接口了，修改 ChatWithAIController 调用 ktTravelManus 智能体的接口。

@Resource
private ToolCallback[] toolCallbacks;
@Resource
private ChatModel dashscopeChatModel;

/*
 * 流式调用智能体
 * @param message
 * @return
 */
@GetMapping("/chat/manus/sse")
public SseEmitter chatWithManus(String message){
    TravelManus travelManus = new TravelManus(toolCallbacks, dashscopeChatModel);
    travelManus.setMaxSteps(20);
    return travelManus.streamRun(message);
}

为了保证每次请求都是一个新的 TravelManus 实例，我们通过自己 new 来创建，那么构造函数必要的工具列表 aiTools 和 dashscopeChatModel 对象就需要注入进来。 当然我们也可以直接注入 TravelManus，然后 Controller 添加@Scope 注解值为 request，这样每次请求都会创建一个新的控制器，由于 KtTravelManus 的@Scope 是 prototype，也会注入一个新的 KtTravelManus 实例。

测试智能体接口

使用 API 测试工具测试。 重启 SpringBoot 项目，在 API 测试工具中新增如下接口测试。

接口链接：http://localhost:8080/api/ai/chat/manus/sse

参考参数：message=我想在长沙旅游三天预算 3000，帮我规划旅程，并安排附近公里的酒店，并生成 PDF

前端项目的生成和对接

由于我们这个项目不需要复杂的前端页面，我们可以使用 AI 编程工具来快速生成前端代码，极大提高开发效率。

创建前端项目

写这个项目需要具备前端的一些基础知识。在 vscode 打开终端，输入 npm create vite@latest 使用 vite 去创建一个最新的 vue 版本的项目。

接着我们编写提示词给 AI 编程工具

参考提示词：

你是一位专业的前端开发，请帮我根据下列信息来生成对应的前端项目代码。 #需求 1、提供主页：可以切换不同应用 (考虑页面样式美观，操作流畅) 2、页面 1:AI 旅游大师应用。页面风格为聊天室，仿 Deepseek 等 AI 聊天界面，首次运行创建新会话，每次创建新会话调用后端 newChat 接口获得新的聊天 ID，老的会话可以通过列表保留 (仅界面支持，后端暂不支持返回会话列表)。聊天室内通过 SSE 的方式调用 chatwithTravelAppsSE Flux 接口，实时显示对话内容。 3、页面 2:AI 旅游智能体应用。页面风格同页面 1，但不保留历史会话，调用 chathithManus 接口，实时显示对话内容，按 Step x:的格式分割气泡展示步骤 (x 为步骤数字值) ###技术选型 1.Vue3+ ElementPlus 布局 2.Axios 请求库

后端接口信息

接口地址前缀:http://localhost:8080/api

SpringBoot 后端接口代码

与 AI 聊天的控制器 @RestController @RequestMapping("/ai") public class ChatWithAIController { // 注入 TravelApp 实例 @Resource private TravelApp travelApp;

@Resource
private ToolCallback[] aiTools;

@Resource
private ChatModel dashscopeChatModel;

/*
 * 流式调用智能体
 * @param message
 * @return
 */
@GetMapping("/chat/manus/sse")
public SseEmitter chatWithManus(String message){
    TravelManus travelManus = new TravelManus(aiTools, dashscopeChatModel);
    travelManus.setMaxSteps(20);
    return travelManus.streamRun(message);
}

/*
 * 前端可以通过此方法获得一个 ID
 */
@GetMapping("/chat/new")
public String newChat(){
    return UUID.randomUUID().toString();
}

/*
 * SSE 实现方式一：使用 Flux
 * 必须设置 produces 为 MediaType.TEXT_EVENT_STREAM_VALUE
 */
@GetMapping(value = "/chat/travel/sse/flux", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public Flux<String> chatWithTravelAppSEE_Flux(String chatId, String message){
    return travelApp.streamChat(chatId, message);
}

然后把提示词发送给 AI 后他会根据我们提示词生成一个页面。

页面如果觉得不好看可以按照想法去修改。

但是在我们运行过程中会有一个错误返回，会话创建失败，然后我们端口控制台可以看到是一个跨域错误。

使用 CorsConfig 配置跨域

在我们后端项目的 config 包中新建 CorsConfig。

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowCredentials(true)
            .allowedOriginPatterns("*")
            .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
            .allowedHeaders("*")
            .exposedHeaders("*");
    }
}

配置完成后我们再次重启后端项目，测试是否可以正常运行了。

如下图所示，会话创建成功，并且给出了正确的回复。

优化项目展示最终结果

优化工具提示词

由于工具的使用由 AI 决定，如果它胡乱使用就可能会出现一些异常，例如原本有图片搜索工具，它却选择去使用'网页爬取工具'去爬取百度图片搜索结果，导致读取的页面数据得到大量乱码 (可能百度做了技术防护)。

另外还有一个问题，就是我们仅仅告知了最大执行步骤，并未告知大模型目前在第几步，大模型由于上下文限制，可能会忘记自己现在做到第几步了，我们也可以在提示词中再次提示它。

我们修改一下 KtTravelManus 智能体的 NEXT_STEP_PROMPT 提示词，把这两个问题一起解决一些，看下情况是否能够改善。

根据用户需求，主动选择最合适的工具或工具组合。对于复杂的任务，你可以将问题分解开来，然后分步骤使用不同的工具来解决它。你应该尽量在 %d 个步骤内完成任务，否则任务将可能提前结束，当前已经是第 %d 步。在使用每种工具之后，要清晰地说明执行结果，并提出下一步的建议。如果您想在任何时刻终止这种交互，请使用'终止'工具 / 函数调用重要的选择工具规则：搜索和爬取 1、图片搜索只能使用 searchImage 工具，不允许通过 searchWeb 和 scrapeWebContent 工具 2、如果需要搜索信息，请使用 searchWeb 工具，不允许使用 scrapeWebContent 工具 3、如果需要爬取信息，请使用 scrapeWebContent 工具，不允许使用 searchWeb 工具 4、如果需要地理位置信息，请使用高德地图相关工具 5、如果需要图文并茂的 PDF，先下载图片，并使用 Markdown 格式引用相对路径的图片地址，再传递此 Markdown 内容，使用 generatePdf 工具生成 6、如果用户要求提供文件，在最终响应时提供生成文件的下载链接（A 标签）

智能体注册全部工具

如果想要给智能体用所有工具，那么我们就需要合并本地工具和 MCP 工具提供给 KtTravelManus 的构造函数。

修改 ChatWithAIController。

// 合并工具
private ToolCallback[] mergeAiTools() {
    // 注意到进行代理，避免 MCP 工具出现 ToolContext 问题
    FunctionCallback[] mcpFunctionCallbacks = McpToolCallbackProxy.proxyAll(toolCallbackProvider.getToolCallbacks());
    // 转化为 ToolCallBack 数组
    ToolCallback[] mcpToolCallbacks = Arrays.stream(mcpFunctionCallbacks)
        .map(tool -> (ToolCallback)tool).toArray(ToolCallback[]::new);
    // 合并本地工具和 MCP 工具
    ToolCallback[] allTools = ArrayUtil.addAll(aiTools, mcpToolCallbacks);
    return allTools;
}

让最终结果展示

因为我们只发送了步骤信息，最终结果信息并没有发送，所以我们需要改造 BaseAgent，在最终完成状态时，发送最后一次的 AI 消息。

修改 BaseAgent 代码。

对应代码：

// 完成之前获取最后一次有效的 AI 响应并发送
if(state == AgentState.FINISHED){
    String finalAiResponse = getLastValidAiResponse();
    // 发送最终响应给前端
    if(StrUtil.isNotBlank(finalAiResponse)){
        emitter.send("\n=== 智能体最终响应 ===");
        emitter.send(finalAiResponse);
        emitter.send("\n=== 智能体最终响应结束 ===");
    }
}

/**
 * @return 最后一次 AI 的有效响应文本，如果没有则返回空字符串
 */
protected String getLastValidAiResponse() {
    // 获取所有消息
    List<Message> messageList = chatMemory.get(this.chatId, Integer.MAX_VALUE);
    // 如果消息为空，则最后的响应也为空
    if (messageList == null || messageList.isEmpty()) {
        return "";
    }
    // 从后往前遍历消息列表，查找最后一个助手消息
    for (int i = messageList.size() - 1; i >= 0; i--) {
        Message message = messageList.get(i);
        // 获取最后一条助手消息
        if (message instanceof AssistantMessage) {
            AssistantMessage assistantMessage = (AssistantMessage) message;
            String content = assistantMessage.getText();
            // 返回非空的助手消息内容
            if (StrUtil.isNotBlank(content)) {
                log.info("Final response: {}", content);
                return content;
            }
        }
    }
    return "智能体未返回最终响应";
}

注意后端数据发送逻辑：

• 先通过 getLastValidAiResponse() 方法获取到最后一次的助理消息
• 然后通过 emitter.send("\n=== 智能体最终响应===") 发送了响应开始标识，这需要前端代码的支持。
• 然后发送响应内容 emitter.send(finalAiResponse);
• 最后发送结束符号 emitter.send("=== 响应结束===")