因为豆包ai通过http访问，所以步骤非常简单，一个controller控制路由，一个service相关配置，一个前端页面就ok了。

        首先需要注册火山引擎账号，然后选择开通模型。

开通后，点击接入文档然后查看链接地址

选择对应模型model id，复制自己的api key

controller

@PostMapping("/ai/chat")
    public ResponseEntity<String> getAIResponse(@RequestBody String userInput) {
        try {
            String response = doubaoService.getAIResponse(userInput);
            return ResponseEntity.ok(response);  
        } catch (Exception e) {
            // 设置Content-Type为text/plain
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
                    .contentType(org.springframework.http.MediaType.TEXT_PLAIN)
                    .body("AI服务异常：" + e.getMessage());
        }
    }

    // 全局异常处理
    @ExceptionHandler(ResourceAccessException.class)
    public ResponseEntity<String> handleNetworkError(ResourceAccessException e) {
        return ResponseEntity.status(HttpStatus.SERVICE_UNAVAILABLE)
                .contentType(org.springframework.http.MediaType.TEXT_PLAIN)
                .body("网络连接失败：" + e.getMessage());
    }

service

@Service
public class DoubaoAIService {
    private final RestTemplate restTemplate = new RestTemplate();
    private final String API_KEY = "";  // 从配置文件获取
    private final String API_URL = "";  // 正确端点

    public String getAIResponse(String userInput) {
        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.APPLICATION_JSON);
        headers.set("Authorization", "Bearer " + API_KEY);

        String requestBody = String.format(
                "{\"model\":\"model-id\",\"messages\":[{\"role\":\"user\",\"content\":\"%s\"}]}",
                userInput.replace("\"", "\\\"")
        );

        try {
            ResponseEntity<String> response = restTemplate.postForEntity(
                    API_URL,
                    new HttpEntity<>(requestBody, headers),
                    String.class
            );
            return extractContent(response.getBody());
        } catch (Exception e) {
            return "AI服务连接失败：" + e.getMessage();
        }
    }

    private String extractContent(String json) {
        // 简化解析，假设响应包含choices.message.content
        return json.contains("content") ? json.split("\"content\":\"")[1].split("\"}")[0] : "无有效响应";
    }
}

html

<div class="main-content">
        <div class="chat-header">旅游智能助手</div>
        <div id="chatMessages" class="chat-messages"></div>
        <div class="chat-input">
            <input type="text" id="userInput" placeholder="输入你的问题...">
            <button onclick="sendMessage()">发送</button>
        </div>
</div>
<script>
    function sendMessage() {
        const userInput = document.getElementById('userInput').value;
        if (!userInput.trim()) return;

        // 添加用户消息到对话窗口
        addMessage(userInput, 'user');

        // 调用后端 API 获取 AI 响应
        fetch('/ai/chat', {
            method: 'POST',
            body: JSON.stringify(userInput),
            headers: {
                'Content-Type': 'application/json',
            }
        })
            .then(response => response.text())
            .then(aiResponse => {
                addMessage(aiResponse, 'ai');
                document.getElementById('userInput').value = '';
            })
            .catch(error => {
                addMessage('网络请求失败，请重试', 'ai');
                console.error('Error:', error);
            });
    }

    function addMessage(message, type) {
        const messagesDiv = document.getElementById('chatMessages');
        const messageDiv = document.createElement('div');
        messageDiv.className = `chat-message ${type}-message`;
        messageDiv.textContent = message;
        messagesDiv.appendChild(messageDiv);
        messagesDiv.scrollTop = messagesDiv.scrollHeight; // 自动滚动到底部
    }
</script>

测试一下

ok，成功调用，排版后续可以根据自己需求优化，这里只是测试功能。