豆包 MarsCode 是一個整合了AI功能的程式設計助手和雲端IDE，旨在提高開發效率和質量。它支援多種程式語言和IDE，提供智慧程式碼補全、程式碼解釋、單元測試生成和問題修復等功能，同時具備AI對話檢視和開發工具。
豆包 MarsCode
豆包 MarsCode 程式設計助手支援的 IDE: 支援Visual Studio Code 1.67.0及以上版本，以及JetBrains系列IDE，如IntelliJ IDEA、Pycharm等，版本要求為221.5080.210及以上。
豆包 MarsCode IDE 是一個雲端 AI 整合開發環境(IDE)，具備原生 AI 程式設計助手，提供程式碼補全、生成、最佳化等功能，支援多種程式語言和框架，無需本地資源，實現隨時隨地的開發。
豆包 MarsCode官方文件地址：https://docs.marscode.cn/introduction
故事起源
故事要從上週六說起。週五下班時大家都興致勃勃，衝動之下，我也顧不上帶電腦，徑直開車上高速回家，急著與家裡的丫頭玩耍。但一到家才發現，書包居然沒帶。但我手頭上還有一些未完成的開源專案工作，以及一個即將截止的徵文活動，這些都需要我儘快完成。面對家中沒有整合開發環境（IDE）的電腦，可愁死我了，正好當時我在瀏覽技術社群掘金時，偶然發現了豆包 MarsCode IDE，便立即開始使用這款線上IDE。
用的很不錯，正好把我使用的體驗感受寫一下分享給大家。
先說體驗
時間效率
在整個流程中，毫無疑問，使用豆包 IDE 比起先裝環境要快得多。程式設計師們最頭疼的就是環境安裝，特別是在老式電腦上，我甚至擔心會浪費時間。因此，使用豆包 IDE 的直觀感受是它快速而穩定。整個環境安裝再加上熟悉豆包 IDE，總共花了不到一個小時就可以正常啟動專案，其中大約30分鐘用在了配置mvn依賴上。這個過程有點坑，難怪會耽誤時間。但如果是一個正常的專案，我相信在30分鐘內就能搞定。
程式碼質量
其次，再談談我對AI功能的使用體驗。實際上，最常用的是程式碼註釋，因為大多數程式設計師包括我在內，不太喜歡寫註釋。使用雲端IDE平臺帶來的便利在於，首先無需安裝額外的程式設計助手；其次，透過AI懸掛圖示直接選中問題或程式碼段，能快速解決困擾。這樣做非常方便，而且最重要的是可以提升程式碼質量：一方面減少了對變數名的糾結，另一方面也讓程式碼註釋變得更為到位。
深度體驗豆包 MarsCode IDE
以下是整體流程的詳細描述，以確保資訊清晰和邏輯連貫，防止大家頭腦混亂：
登入豆包 MarsCode IDE 工作臺 ——> 匯入 GitHub 倉庫 ——> 選擇開發環境模板 ——> 配置專案 ——> 執行專案 ——> 體驗專案 ——> 程式碼提交
spring-ai
使用雲端 IDE 的主要優勢之一是其適用於個人開發者，而大公司通常有自己的程式碼倉庫。對於個人開發者而言，選擇雲端 IDE 編寫開源專案再合適不過，特別是豆包 IDE 提供的資源分配非常充足。這意味著不必擔心本地環境可能導致的當機、電腦當機或磁碟損壞等問題。
然而，對我來說，穩定的網路連線是最關鍵的因素。在家裡，訪問 Github 時經常面臨網路連線問題或速度極慢的情況，這對開發效率有顯著影響。因此，我決定透過編寫我的開源專案【spring-ai-demo】來深入體驗豆包 IDE 的功能和效能。
快速匯入GitHub 倉庫
請訪問豆包 MarsCode AI IDE 的官方網站：https://www.marscode.cn/dashboard
在開始之前，請登入豆包 MarsCode IDE 工作臺，並匯入我們的GitHub倉庫專案，操作步驟如下所示：
在進行 GitHub 授權後，你可以訪問自己的倉庫專案列表。在選擇要開發的專案時，系統會自動識別適用的語言模板，例如，如果你選擇的專案是 Java 的話，它會自動識別為 Java 模板。
tips：單個賬號在豆包 MarsCode IDE 上建立的專案數量不得超過 10 個
當你匯入建立專案時，速度非常快，基本可以在幾秒鐘內完成，而且還會自動識別為 Maven 專案。
依賴環境
拿到新專案後，我們的操作步驟與通常一樣，唯一的不同是無需搭建執行環境，只需下載依賴即可。更方便的是，我們可以直接從阿里雲倉庫下載依賴，無需單獨配置mvn的setting檔案，這一點特別貼心。
這一步直接報錯了。按照官方的依賴包下載的話，在阿里雲映象中是找不到的，具體如下所示：
tips：在pom中指定了repositories倉庫地址，也不會生效，可以認為只能去阿里雲倉庫
當即使指定了下載包倉庫，仍然無法成功時，我出於好奇檢視了阿里的映象，發現其不存在。進一步調查後發現，阿里雲的映象groupid已經更改。因此，我也需要相應地進行修改：
修改後，終於成功實現了正常的下載功能，但我仍不清楚是否損失了哪些功能。這可能被視為一個缺陷，因為我的專案是開源的。如果某些小公司內部依賴於私有倉庫的包，那麼他們可能會遇到問題。
啟動專案
在啟動專案時，這裡會持續提示各種配置項，只需直接啟用它們，即可順利完成啟動操作。
確保在啟動任何maven專案之前，務必確保專案已成功編譯完成，否則可能會導致出現各種檔案找不到的錯誤。
同樣地，你也可以在這裡配置適合自己習慣的操作方式：如clean install -DskipTests=true
體驗專案
啟動成功後，將會顯示相應的路徑及其所監聽的埠資訊，讓我們來檢視一下吧。
這裡是我們專案真正使用的埠監聽。如果需要詳細瞭解，請檢視專案配置檔案中的相關資訊。好的，讓我們進行訪問。
當我們檢視 web-view 時，請將輸入的路徑轉換成對應的路徑。舉例來說，如果我直接訪問 swagger-ui，那麼輸入的路徑就是 doc.html。
此外，除了這些路徑，我只需在此頁面上點選即可檢視和操作剩餘的所有路徑。
當然，如果你不希望在這裡使用webview，也可以複製路徑並在瀏覽器中開啟以訪問。總體而言，專案啟動的基本環境依賴操作通常可以在30分鐘內完成。
在這裡，不僅可以根據相應的路徑找到對應的控制器，還可以觀察到垃圾回收器的工作狀態，這使得這個檢視變得非常有用和優秀。
當滑鼠懸停在註解上時，甚至可以顯示出本類中的物件是如何被注入的。這對於研究原始碼來說也是非常有用的功能。
小操作的一項最佳化是支援檔案重新命名時，同時修改其中的類名。
編輯專案
完成了上述基本操作後，接下來我們將開始今天的主題：繼續維護我的開源專案spring-ai-demo。今天我們將深入探討函式呼叫。
大型語言模型（LLM）在訓練完成後被凍結，導致其知識陳舊，並限制了其訪問和修改外部資料的能力。
為了解決這些問題，函式呼叫機制應運而生。這種機制允許你註冊自定義函式，將大型語言模型連線到外部系統的API。這些外部系統能夠為LLM提供實時資料，並代表它執行資料處理操作。
Spring AI簡化了支援函式呼叫所需的程式碼編寫。它處理了函式呼叫的對話流程，使你能夠輕鬆地註冊函式。你只需提供函式的Bean名稱作為a，然後在提示選項中選擇該名稱以啟用該函式。此外，您還可以在單個提示中定義和引用多個函式。
- 執行聊天請求及函式定義資訊的處理，例如解釋模型何時應該呼叫函式以及函式的輸入引數模式。
- 模型決定呼叫函式時，會傳遞輸入引數給相應的函式，並將輸出結果返回給模型。
- Spring AI 管理此對話流程，將函式呼叫分發給適當的函式，並將結果傳送回模型。
- 模型可以執行多個函式呼叫以獲取所需的所有資訊。
- 一旦收集到所有必要資訊，模型將生成響應。
補全程式碼
這裡先快速寫一個入口，tab補全程式碼
報錯修復
在複製貼上過程中，IDE並不會自動新增相關的依賴包。因此，每當遇到類報錯時，如果IDE提供了快速修復選項，請優先點選執行修復操作；如果沒有快速修復選項，則建議參考AI fix的建議進行手動修復。
程式碼註釋
這個功能簡直是太讚了，我真的很喜歡它。因為有時候實在懶得打字，但線上IDE可以根據我的輸入自動理解程式碼的意圖，並且根據我的簡短提示自動生成後續的註釋。這對於我這種懶人來說簡直是福音啊！就看看它的效果吧。
AI 問答
有任何報錯，無論是來自控制檯還是其他地方，他都能夠利用智慧問答進行最佳化和解決。
同樣也有歷史記錄進行維護，這樣可以方便回顧和檢視之前的錯誤記錄。在記錄問題時，根據解決方法詳細描述，以確保下次不會再犯同樣的錯誤。
最後重新啟動專案即可。儘管已經進行了函式回撥，但由於地址傳錯，無法避免。畢竟這些API都由開發者自行管理，最初我以為是官方的問題，但詢問後發現與官方無關。
tips：這裡注意下每個路徑都是有時間限制的，所以如果長時間不重新整理，路徑也將會失效，點選重新整理即可。url路徑是不會改變的
提交變更
當你完成開發並維護相關程式碼之後，可以直接使用此介面進行Git提交，從而實現一站式的服務。
前端UI聊天互動頁面
前幾天有粉絲在評論區建議增加一個前端互動頁面，認為這會使體驗更加豐富，於是我們便安排了這個任務。我們主要探索了兩種不同的前端頁面設計：一種是採用豆包的React模版，另一種是直接使用HTML模版，還有一種特殊的Python模版。好的，言歸正傳，讓我們首先來探索React模版。
React
專案模版建立
我掌握了一些HTML、JavaScript和CSS的基本操作，對React框架幾乎沒有經驗。因此，我會使用IDE提供的模板來建立專案，而不必過多關注環境依賴，直接啟動即可成功。好的，那麼讓我們開始吧。
當你進入這個頁面時，你會發現官方提供了一份貼心的README檔案，可以幫助你快速瞭解如何啟動這個程式。
UI互動
啟動結束後，我瀏覽了一下頁面，但我對這個東西基本上一頭霧水，頁面上的元素我都不認識。好的，我想透過AI來了解一下，看看它是否能夠滿足我的需求。
tips：這裡注意下，問問題的時候，一定要選擇修改的頁面，如果選的不對，AI也是無法直接回答問題的。
生成的結果看起來確實不錯，但幸好我有一些前端基礎知識，因此能夠發現生成的屬性有問題。經過修改後，問題得以解決。
接著立即觀察生成的結果。
tips：這裡發現個問題，webview無法顯示alter彈窗資訊，不過複製出來在瀏覽器中使用即可，無傷大雅
好的，我們已經確定了基本元件。剩下的最佳化工作我們稍後再進行，先完成後最佳化師我開發的原則。接下來要做的是生成按鈕點選後要跳轉的頁面。讓AI來幫我整理一下吧。
好吧，生成的內容一直報錯，而且他們還不給修復。
那麼我們可以考慮另一種解決方案。考慮到這是一個框架，應該有專門的元件可以直接完成這項任務，特別是在當今LLM流行的環境下，聊天頁面也正迎來了蓬勃發展。
ChatSDK
找了半天，確實沒找到滿意的解決方案。於是我向各位前端大佬請教了一下，畢竟我在前端框架方面幾乎沒有經驗。他們根據我的需求推薦了一個非常強大的一站式UI解決方案——阿里的chatSDK，你可以在以下地址找到它：
https://chatbot.console.aliyun.com/ChatSDK#/sdk
這就是我想要的結果，不過在配置的過程中遇到了很多問題，因為我對此一無所知。儘管如此，我仍然堅持學習並逐步掌握。幸運的是，透過查閱官方文件，我得以解決了這些困惑，即便我的AI助手也跟我一樣陷入了困境。
Rsbuild
沒錯，就是指的rsbuild。雖然文件寫得很詳細，但我還是去看了如何設定index.html。結果發現操作很簡單，只需要簡單配置一下就行。可能是因為rsbuild並不像webpack那樣流行，所以網上關於它的配置資訊不多，我一直找不到相關的資料。
這裡來詳細介紹一下rsbuild。為什麼在React專案中選擇自動整合rsbuild，而不是像市面上流行的webpack等其他工具呢？
Rsbuild是一個基於Rspack的高效能構建工具，它不僅提供豐富的構建功能和最佳化的配置選項，還支援多種前端UI框架。Rsbuild的特點包括出色的效能表現、簡便的配置方式、豐富的外掛生態系統、穩定可靠的構建產物以及與各種前端框架的無縫相容性。與類似的工具如Vite、Create React App和Vue CLI相比，Rsbuild不僅能夠實現更高效的構建過程，而且能夠更好地融入複雜的生態系統中。
Rsbuild，由位元組跳動推出，旨在構建一個開放的技術生態系統，以積極推動前端技術的進步和發展。
因此，首先，Rsbuild 擁有更高的構建效能，能夠提供比基於 Webpack 的 Create React App 和 Vue CLI 等工具高達 5 到 10 倍的效率，同時還具備更為輕量的依賴體積。其次，Rsbuild 與豆包一樣是屬於一家公司的產品，所以成為了一個優選的選擇。
這裡唯一的不足是社群問題太少，當我遇到錯誤時，很難找到解決方法，只能自己苦苦探索，甚至要透過Google搜尋來解決。有時甚至連關鍵字【Rsbuild+問題】都無法搜尋到相關資訊。這方面值得進一步最佳化。
其實一句話即可。我們去看下去
設定成功後，我們將按照阿里提供的SDK快速開發文件進行配置，然後啟動應用程式進行測試。
可以看到，所有必要的內容已經成功新增到系統中。接下來，我們將繼續開發以實現跳轉到聊天頁面的功能。首先，我們需要完善各種路由的配置，確保一切就緒後再繼續進行跳轉功能的開發。這一步驟只需要完成一個小元件即可。
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import ChatHome from '../components/chat';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
<React.StrictMode>
<Router>
<Routes>
<Route path='/talk' element={<ChatHome />}></Route>
<Route path='/' element={<App />}></Route>
</Routes>
</Router>
</React.StrictMode>,
);
當需要新增連結時，剩下的任務就是在合適的位置插入超連結。可以簡單地使用程式碼自動補全完成這個任務。
當最後成功整合進來時，所帶來的效果如下所示：
最佳化後端
接下來，我們將繼續對接之前我們開發的spring-ai專案，以實現一個真正互動式的介面。
那麼為什麼不能直接使用record返回呢？因為前端不僅僅支援文字，還有其他方案。所以還是自己寫吧。總之，目前即便是AI也可能會出錯，即使指定返回特定格式，也不一定正確。
具體修改後如下：
@PostMapping("/ai")
ChatDataPO generationByText(@RequestParam("userInput") String userInput) {
String content = this.myChatClientWithSystem.prompt()
.user(userInput)
.call()
.content();
log.info("content: {}", content);
ChatDataPO chatDataPO = ChatDataPO.builder().code("text").data(ChildData.builder().text(content).build()).build();;
return chatDataPO;
}
在啟動後端的spring-ai-demo專案後，我們可以複製networking目錄下的URL路徑。這樣做是為了確保前後端專案能夠同時成功啟動。
接下來需要對前端傳送的 API 介面資訊進行修改和最佳化。
send: function send(msg) {
let sessionId = 'M9u913BFyxIuTdRv7O73nx9SfkWgerhk';
return {
url: 'https://jtdedyc1-kbb5pits-q02qbpq08o1p.c1.mcprev.cn/ai',
data: {
userInput: msg.content.text,
// sessionId: sessionId,
},
method: 'POST'
};
}
效果演示
前端專案啟動完成後，我們可以繼續前往演示其效果。
Python
我們再建立一個新的專案，這次以Python為模板，為了確保專案從一開始就符合我們的需求，我們需要對初始模板進行一些調整。首先，我們將刪除原有的程式碼，因為它們僅是構建一個基礎的Python HTTP服務專案的基礎，而並非我們專案所需的具體功能。
我們要以Streamlit這一強大的工具為主，Streamlit不僅以其強大的功能和易用性著稱，還能讓我們以前所未有的速度構建出具有流式打字機效果的聊天應用。、
對於那些像我一樣對複雜的前端程式碼感到畏懼的開發者來說，Streamlit無疑是一個巨大的福音。它簡化了開發流程，讓我們能夠專注於應用的核心功能和邏輯，而無需深陷前端開發。
streamlit
在這次實操中，我們將跳過那些深奧的理論知識，將全部的注意力集中在實際的操作和應用上。
首先，我們需要確保基礎環境已經搭建好。幸運的是，基礎環境的搭建工作已經順利完成，我們不需要再為此花費額外的時間和精力。接下來，我們需要做的就是安裝一些必要的開發環境即可：
pip install streamlit
在進行專案開發的過程中，我們常常會遇到需要從外部獲取各種資源和依賴的情況。豆包IDE預設已經不再是官方源了，而是國內的倉庫。、
接下來，我們將進行一個簡單的測試，以驗證我們的環境配置是否正確。首先，我們需要將示例程式碼複製到我們的開發環境中。啟動後，檢查是否能夠正常訪問，頁面是否顯示預期的內容。
import streamlit as st
import random
import time
# Streamed response emulator
def response_generator():
response = random.choice(
[
"Hello there! How can I assist you today?",
"Hi, human! Is there anything I can help you with?",
"Do you need help?",
]
)
for word in response.split():
yield word + " "
time.sleep(0.05)
st.title("Simple chat")
# Initialize chat history
if "messages" not in st.session_state:
st.session_state.messages = []
# Display chat messages from history on app rerun
for message in st.session_state.messages:
with st.chat_message(message["role"]):
st.markdown(message["content"])
# Accept user input
if prompt := st.chat_input("What is up?"):
# Add user message to chat history
st.session_state.messages.append({"role": "user", "content": prompt})
# Display user message in chat message container
with st.chat_message("user"):
st.markdown(prompt)
# Display assistant response in chat message container
with st.chat_message("assistant"):
response = st.write_stream(response_generator())
# Add assistant response to chat history
st.session_state.messages.append({"role": "assistant", "content": response})
streamlit run main.py
在啟動Streamlit專案的過程中，我們直接選擇使用命令列工具來執行，而不是依賴於圖形介面的“執行”按鈕。
後端最佳化
我們之前的文章開發過程基於對接大模型的。而這一次，我們計劃採用Spring-AI後臺進行對接，以開發實時互動聊天功能。
首先，我們需要對程式碼進行相應的修改。
@PostMapping("/ai-stream")
Flux<String> generationByStream(@RequestParam("userInput") String userInput) {
Flux<String> output = chatClient.prompt()
.user(userInput)
.stream()
.content();
return output;
}
程式碼生成
啟動成功後，我們要求AI協助生成請求程式碼。
這段程式碼拿過來後需要簡單修改一下，因為我們需要走流式回答，並不是阻塞式的呼叫。最後程式碼如下：
def response_generator(prompt):
url = 'https://fq5jh3sk-kr95txxo-prhof0hgd4fs.c1.mcprev.cn/ai-stream'
url += '?userInput=' + prompt
headers = {
'Accept': '*/*',
'Content-Type': 'application/x-www-form-urlencoded'
}
# 傳送POST請求
response = requests.get(url, headers=headers, stream=True)
# print(response.text)
# 處理流式響應
if response.status_code == 200:
# 獲取可讀流
for chunk in response.iter_content(chunk_size=1024):
if chunk:
# 在這裡處理你的業務邏輯，例如列印或者其他操作
yield chunk.decode('utf-8') # 假設伺服器返回UTF-8編碼的文字
else:
print(f"Error fetching data: {response.status_code}")
tips：這裡需要注意的是，請不要在後端呼叫其他豆包啟動的專案，因為這樣可能會被系統攔截。不像前端頁面那樣可以直接跳轉，後端如果直接呼叫 API 是行不通的。因此，我在本地啟動了一次聯調。
演示效果
Python的實現相當簡單，我們現在來看一下它的呼叫結果：
總結
豆包 MarsCode 是現代開發者的利器，其整合了強大的AI功能和雲端IDE，極大地提升了開發效率和程式碼質量。透過支援多種主流程式語言和IDE，豆包 MarsCode 不僅簡化了環境配置過程，還提供了智慧程式碼補全、單元測試生成、問題修復等多項AI驅動的功能，使開發者能夠專注於創造性工作而非繁瑣的設定。
在實際使用中，我深刻體驗到豆包 MarsCode 的便利。無論是快速匯入GitHub倉庫、自動識別專案語言模板，還是輕鬆配置和啟動專案，它都展現了出色的穩定性和高效性。與傳統的本地IDE相比，豆包 MarsCode 的雲端特性更加靈活，使我能夠隨時隨地進行開發，無需擔心硬體或網路環境的限制。
特別是在程式碼質量的提升方面，豆包 MarsCode 的AI功能展現了其獨特優勢。自動程式碼註釋、智慧問題解決建議，以及對話式AI檢視的應用，不僅簡化了日常開發中的繁瑣任務，還顯著提高了程式碼的可讀性和可維護性。這些功能不僅讓我在忙碌的開發過程中節省了大量時間，還使我的開發工作更加高效和愉悅。
總的來說，豆包 MarsCode 不僅是一個工具，更是現代軟體開發中不可或缺的助手。它的出現不僅推動了開發工具的技術進步，更為開發者們帶來了全新的開發體驗和工作方式。期待未來豆包 MarsCode 在AI驅動開發領域繼續創新，為全球開發者提供更多實用且強大的功能。
我是努力的小雨，一名 Java 服務端碼農，潛心研究著 AI 技術的奧秘。我熱愛技術交流與分享，對開源社群充滿熱情。身兼掘金優秀作者、騰訊雲內容共創官、阿里雲專家博主、華為云云享專家等多重身份。
🚀 目前，我的探索重點在於 AI Agent 智慧體應用，我對其充滿好奇，並不斷探索著其潛力與可能性。如果你也對此領域充滿熱情，歡迎與我交流分享，讓我們共同探索未知的領域！
💡 我將不吝分享我在技術道路上的個人探索與經驗，希望能為你的學習與成長帶來一些啟發與幫助。
🌟 歡迎關注努力的小雨！🌟