Claude Code Desktop has a built-in MCP for frontend preview
— Daniel San (@dani_avila7) March 14, 2026
It activates automatically when you ask Claude to spin up a dev server
Save this thread 👇 pic.twitter.com/cbfNc53X8M
Tell Claude: "Start the server and show me the website"
— Daniel San (@dani_avila7) March 14, 2026
It automatically selects the right tool using ToolSearch:
select:mcp__Claude_Preview__preview_start pic.twitter.com/0B8ko0ZEUb
If you want to customize which server gets launched, you can do it in .claude/launch.json: pic.twitter.com/qAw52GHzZU
— Daniel San (@dani_avila7) March 14, 2026
Once the server is running, Claude has access to these tools: pic.twitter.com/We2PJyc0ms
— Daniel San (@dani_avila7) March 14, 2026
AI 中文摘要Claude 生成
Claude Code Desktop 內建整合了一個 MCP（Model Context Protocol），專門用於前端預覽。當使用者要求 Claude 啟動開發伺服器時，這個預覽功能會自動激活。使用者只需告訴 Claude「啟動伺服器並展示我網站」，系統就會自動透過 ToolSearch 選擇正確的工具來執行操作，具體指令為「select:mcp__Claude_Preview__preview_start」。
這項整合透過自動化工具選擇與預覽啟動，減少了手動配置的需求。若使用者想自訂要啟動的伺服器，可在專案的 .claude/launch.json 檔案中進行設定。伺服器啟動後，Claude 便能存取一系列相應的工具，並能自動運用這些工具來執行複雜的開發任務，使開發流程更加流暢。
此功能展現了 Claude Code Desktop 如何將人工智慧與開發工具深度整合，透過自動化流程、按需載入工具以及直接的指令互動，讓開發者能更直觀地與 AI 協作，有效減少重複的手動操作步驟，進而提升前端開發的效率。