Claude Arm64 Browser

🚀 面向大眾的無代碼人工智能軟件即服務構建器

本項目藉助人工智能的輔助，能讓用戶在僅價值 80 美元的硬件上構建並測試完整的軟件即服務（SaaS）應用程序。這一創新方案旨在為全球預算有限的開發者提供平等的人工智能驅動開發機會。

🚀 快速開始

零基礎入門指南

從未設置過樹莓派？ 完整設置指南 - 按步驟操作，30 分鐘內從零基礎成為 SaaS 構建者！

前提條件

# 安裝系統依賴
sudo apt update
sudo apt install chromium-browser nodejs npm python3

# 驗證 Chromium 是否正常工作
chromium-browser --version

安裝

git clone https://github.com/nfodor/claude-arm64-browser
cd claude-arm64-browser
npm install
chmod +x *.py *.sh

快速測試（單行命令）

# 安裝後立即驗證是否正常工作：
python3 -c "import sys; sys.path.append('.'); import arm64_browser; print('[OK] ARM64 Browser Works!' if 'error' not in arm64_browser.navigate('https://example.com').lower() else '[FAIL] Failed')"

預期結果：[OK] ARM64 Browser Works!

>>> 運行超棒的演示

# 快速演示，立即看到可見結果（30 秒）
python3 instant_demo.py

# 或者進行全面演示，展示所有功能（2 - 3 分鐘）
./run_demo.sh

測試設置

# 直接測試 MCP 服務器
echo '{"jsonrpc":"2.0","method":"tools/list","id":1}' | node index.js

# 測試 Python 包裝器
python3 simple_browser.py

✨ 主要特性

人工智能開發的革命

• 舊方式：企業級人工智能開發需要價值 5 萬美元以上的工作站，這使得全球 95% 的開發者被排除在外。
• 新方式：只需 480 美元的樹莓派設置，就能擁有與硅谷初創公司相同的人工智能能力。

變革的意義

• 消除資金障礙：原本需要 5 萬美元的成本，現在只需 480 美元（降低了 99%）。
• 全球可及性：在每個國家都能負擔得起，而不僅僅是硅谷。
• 無代碼革命：人工智能負責構建 SaaS，而你只需專注於客戶。
• 完全自動化：從想法到部署應用，無需手動編碼。
• 即時測試：人工智能在用戶看到之前測試每個功能。

適合全球創客運動

• 國際創業者：以本地預算使用硅谷的人工智能工具。
• 學生和教育工作者：無需負債即可學習現代人工智能開發。
• 副業愛好者：在不影響本職工作的情況下構建 SaaS 產品。
• 獨立創始人：一個價值 80 美元的設備就能成為完整的開發團隊。
• 小團隊：與獲得風險投資的初創公司競爭。
• 遠程社區：只要有互聯網，任何地方都能進行人工智能開發。

無需編碼即可構建的內容

切實可行的人工智能驅動的 SaaS 創意

• 電子商務工具：
  • 監控數千個競爭對手的價格。
  • 產品研究和市場分析。
  • 自動庫存跟蹤。
  • 從評論中進行客戶情緒分析。
• 商業智能：
  • 社交媒體監控儀表盤。
  • SEO 排名跟蹤服務。
  • 潛在客戶生成和資格評估。
  • 競爭對手分析平臺。
• 自動化服務：
  • 網站正常運行時間監控。
  • 內容驗證和合規性檢查。
  • 數據錄入和處理。
  • 表單填寫和提交服務。
• 營銷解決方案：
  • A/B 測試平臺。
  • 著陸頁優化。
  • 電子郵件營銷活動監控。
  • 社交證明收集。

神奇之處：人工智能承擔繁重工作

1. 描述你的想法：例如，“我想監控競爭對手的價格”。
2. 人工智能編寫代碼：Claude 構建抓取邏輯。
3. 人工智能測試一切：自動瀏覽器測試確保其正常工作。
4. 部署和擴展：你的 SaaS 已準備好面向客戶。
5. 盈利：專注於營銷，人工智能維護產品。

獨特之處

• 無代碼 SaaS 開發：
  • 用通俗易懂的英語描述你的應用想法。
  • 人工智能編寫、測試和部署你的應用程序。
  • 專注於客戶，而非編碼。
  • 數天內即可推出，而非數月。
• 大幅降低成本：
  • 480 美元與傳統人工智能開發的 5 萬美元以上成本相比。
  • 與硅谷初創公司擁有相同的能力。
  • 無需 recurring cloud bills 或許可費用。
  • 擁有自己的開發基礎設施。
• 全球可訪問性：
  • 只要有互聯網連接，任何地方都能使用。
  • 在每個國家和貨幣體系下都能負擔得起。
  • 無需技術背景。
  • 包含完整的教程和示例。
• 即時結果：
  • 即時查看你的 SaaS 運行情況。
  • 人工智能自動測試每個功能。
  • 無需調試或技術故障排除。
  • 當天即可部署給客戶。

📦 安裝指南

前提條件

# 安裝系統依賴
sudo apt update
sudo apt install chromium-browser nodejs npm python3

# 驗證 Chromium 是否正常工作
chromium-browser --version

安裝步驟

git clone https://github.com/nfodor/claude-arm64-browser
cd claude-arm64-browser
npm install
chmod +x *.py *.sh

💻 使用示例

基礎用法

import simple_browser

# 導航到任何網站
result = simple_browser.browser_navigate("https://example.com")
print(result)  # "Successfully navigated to https://example.com"

# 截圖
screenshot = simple_browser.browser_screenshot("homepage.png")
print(screenshot)  # "Screenshot saved to /tmp/homepage.png"

# 執行 JavaScript
title = simple_browser.browser_evaluate("document.title")
print(title)  # 網站標題

# 提取頁面內容
content = simple_browser.browser_get_content("text")
print(content[:100])  # 頁面文本的前 100 個字符

高級用法

端到端 SaaS 測試（改變遊戲規則）

# 完整用戶旅程測試 - 無需人工調試
def test_saas_signup_flow():
    # 導航到註冊頁面
    simple_browser.browser_navigate("https://yourapp.com/signup")
    
    # 填寫註冊表單
    simple_browser.browser_fill("#email", "test@example.com")
    simple_browser.browser_fill("#password", "securepass123")
    simple_browser.browser_click("#signup-btn")
    
    # 驗證註冊是否成功
    success_msg = simple_browser.browser_evaluate("document.querySelector('.success-message').textContent")
    
    # 測試儀表盤訪問
    simple_browser.browser_navigate("https://yourapp.com/dashboard")
    dashboard_loaded = simple_browser.browser_evaluate("document.querySelector('.dashboard').style.display !== 'none'")
    
    # 截圖用於視覺迴歸測試
    simple_browser.browser_screenshot("dashboard_post_signup.png")
    
    return "PASS" if success_msg and dashboard_loaded else "FAIL"

自主 API + 前端測試

# 通過前端驗證後端 API
def validate_api_through_ui():
    # 通過 UI 測試數據創建
    simple_browser.browser_navigate("https://yourapp.com/create-project")
    simple_browser.browser_fill("#project-name", "Test Project AI")
    simple_browser.browser_click("#create-btn")
    
    # 驗證數據是否出現在列表視圖中
    simple_browser.browser_navigate("https://yourapp.com/projects")
    project_exists = simple_browser.browser_evaluate("document.querySelector('[data-project=\"Test Project AI\"]') !== null")
    
    # 測試數據修改
    simple_browser.browser_click("[data-project=\"Test Project AI\"] .edit-btn")
    simple_browser.browser_fill("#project-name", "Modified by AI")
    simple_browser.browser_click("#save-btn")
    
    # 驗證後端數據持久化
    simple_browser.browser_navigate("https://yourapp.com/projects")
    updated = simple_browser.browser_evaluate("document.querySelector('[data-project=\"Modified by AI\"]') !== null")
    
    return {"api_create": project_exists, "api_update": updated}

跨瀏覽器兼容性測試（無需人工干預）

# 自動化跨平臺測試
def test_responsive_design():
    test_results = {}
    
    # 移動視圖端口
    simple_browser.browser_evaluate("window.resizeTo(375, 667)")  # iPhone 尺寸
    simple_browser.browser_navigate("https://yourapp.com")
    simple_browser.browser_screenshot("mobile_view.png")
    mobile_nav = simple_browser.browser_evaluate("document.querySelector('.mobile-nav').style.display !== 'none'")
    
    # 桌面視圖端口  
    simple_browser.browser_evaluate("window.resizeTo(1920, 1080)")
    simple_browser.browser_screenshot("desktop_view.png")
    desktop_nav = simple_browser.browser_evaluate("document.querySelector('.desktop-nav').style.display !== 'none'")
    
    return {"mobile_responsive": mobile_nav, "desktop_responsive": desktop_nav}

競爭分析自動化

# 監控競爭對手的價格
simple_browser.browser_navigate("https://competitor.com/pricing")
simple_browser.browser_screenshot("competitor_pricing.png")
prices = simple_browser.browser_evaluate("document.querySelectorAll('.price').length")

SEO 監控

# 檢查搜索排名
simple_browser.browser_navigate("https://google.com/search?q=your+keywords")
simple_browser.browser_screenshot("serp_results.png")
rankings = simple_browser.browser_evaluate("document.querySelector('.g').textContent")

📚 詳細文檔

為什麼 ARM64 + 瀏覽器自動化是 SaaS 的黃金組合

SaaS 開發的關鍵差距

每個 SaaS 初創公司在發佈應用程序之前都必須確保其端到端正常工作。傳統方法存在以下問題：

• 手動測試：昂貴、緩慢、容易出錯且無法擴展。
• 僅支持 x86_64 的工具：Puppeteer/Playwright 在 ARM64 上因二進制文件損壞而失敗。
• 人工調試：QA 團隊需要花費數天時間調試測試失敗的問題。
• 覆蓋範圍有限：沒有龐大的團隊就無法測試每個用戶旅程。
• 迴歸盲點：更改會在未被檢測到的情況下破壞現有功能。

我們的突破：ARM64 上的自主人工智能測試

• 無需人工調試：人工智能代理自動測試完整的用戶流程。
• 24/7 持續測試：在預算有限的硬件上進行持續驗證。
• 全棧覆蓋：通過真實瀏覽器驗證前端、後端和 API。
• 視覺迴歸檢測：截圖自動捕捉 UI 破壞更改。
• 跨設備測試：移動/平板/桌面視圖端口自動化。
• 原生 ARM64：使用系統 Chromium 而不是損壞的 x86_64 二進制文件。
• 成本效益高：480 美元的設置與傳統 QA 基礎設施的 5 萬美元以上成本相比。

為什麼這將永遠改變 SaaS 開發

• 之前：手動 QA 團隊 → 昂貴 → 緩慢 → 人為錯誤 → 覆蓋範圍有限

部署 → 祈禱 → 客戶發現漏洞 → 緊急修復 → 聲譽受損

• 之後：人工智能代理 → 自主 → 快速 → 全面 → 24/7 監控

編寫代碼 → 人工智能測試一切 → 自信地部署 → 滿意的客戶

ARM64 的優勢

標準瀏覽器自動化在 ARM64 上失敗，因為 Puppeteer/Playwright 下載的 x86_64 二進制文件無法運行。我們的解決方案：

• 使用系統安裝的 Chromium（原生 ARM64）。
• 為無頭 ARM64 操作使用正確的啟動標誌。
• 符合 MCP 協議，便於與 Claude Code 集成。
• 不依賴預構建的瀏覽器二進制文件。

架構

graph TB
    A[Claude Code] --> B[MCP Protocol]
    B --> C[ARM64 Browser Server]
    C --> D[System Chromium]
    D --> E[Web Pages]
    
    F[Python Tools] --> C
    G[Direct CLI] --> C

🔧 技術細節

系統要求

• 操作系統：樹莓派操作系統（64 位）或任何 ARM64 Linux。
• 內存：最低 4GB，建議 8GB。
• 存儲：32GB 以上的快速 SD 卡（Class 10/A2）。
• 瀏覽器：Chromium（通過 apt 安裝）。
• 運行時：Node.js 18+，Python 3.8+。

瀏覽器配置

// 針對 ARM64 進行優化
{
  executablePath: '/usr/bin/chromium-browser',
  headless: true,
  args: [
    '--no-sandbox',
    '--disable-setuid-sandbox', 
    '--disable-dev-shm-usage',
    '--disable-gpu',
    '--disable-web-security',
    '--disable-features=VizDisplayCompositor'
  ]
}

📄 許可證

本項目採用 MIT 許可證，可自由用於商業項目！

貢獻

我們歡迎貢獻！本項目旨在為初創公司和創客提供平等的人工智能訪問機會。

貢獻領域

• 移動瀏覽器支持（Android/iOS 測試）
• 額外的 MCP 工具和集成
• 針對樹莓派 Zero/小型設備的性能優化
• 觸摸界面的 UI/UX 改進
• 教程內容和用例示例

開發設置

git clone https://github.com/nfodor/claude-arm64-browser
cd claude-arm64-browser
npm install
# 無需開發服務器 - 即可使用！

完整的低於 500 美元的人工智能啟動設置

構建一個完整的人工智能驅動的開發環境，成本低於高端顯卡：

你將獲得

• 便攜式人工智能工作站：4 英寸×3 英寸的體積擁有桌面級性能。
• Claude Sonnet 4 訪問權限：具有 20 萬上下文窗口的最新人工智能模型。
• 瀏覽器自動化：網頁抓取、測試、監控功能。
• 24/7 運行：始終在線的人工智能助手和自動化。
• 低功耗：系統總功耗 15W（相比傳統設置的 500W 以上）。
• 靜音運行：無風扇，完全安靜。
• 觸摸界面：通過內置顯示屏直接交互。

初創公司的投資回報率

• 自主測試：人工智能代理測試整個 SaaS 流程，無需人工調試 - 每週節省 40 多個小時。
• 持續驗證：24/7 監控確保在客戶發現漏洞之前應用程序正常工作。
• 節省 QA 成本：用自動化人工智能驗證取代昂貴的手動測試團隊。
• 更快的發佈：自信地部署，因為人工智能已經測試了所有用戶旅程。
• 零迴歸：自動化視覺和功能測試防止更改破壞現有功能。
• 市場研究：自動化競爭對手分析每週節省 20 多個小時。
• 客戶支持：人工智能驅動的響應生成和測試。
• 內容創建：自動化社交媒體監控和內容創意。
• 產品開發：人工智能輔助編碼和快速原型製作。

故障排除

MCP 連接問題

• chromium-arm64 顯示“✗ 連接失敗”

# 檢查包裝腳本是否存在且可執行
ls -la $(pwd)/mcp-wrapper.sh
chmod +x mcp-wrapper.sh

# 直接測試服務器
echo '{"jsonrpc":"2.0","method":"tools/list","id":1}' | node index.js

# 使用正確的路徑重新添加
claude mcp remove chromium-arm64
claude mcp add chromium-arm64 "$(pwd)/mcp-wrapper.sh" --scope user

# 重要：重啟 Claude
exit
claude

• Claude 嘗試使用 Playwright/Puppeteer 代替
  • 明確指定：在提示中始終提及“chromium-arm64”。
  • 檢查可用服務器：claude mcp list。
  • 如果未列出 chromium-arm64，請重啟 Claude。
• Claude 會話中顯示“未找到服務器”
  • MCP 服務器在啟動時加載。
  • 添加/修改 MCP 服務器後始終重啟 Claude。
  • 在啟動前運行 claude mcp list 進行驗證。

常見問題

• 瀏覽器無法啟動

# 檢查 Chromium 安裝情況
which chromium-browser
chromium-browser --version

# 測試無頭模式
chromium-browser --headless --disable-gpu --dump-dom https://example.com

• MCP 連接失敗

# 驗證 Claude Code MCP 設置
claude mcp list

# 手動測試服務器
echo '{"jsonrpc":"2.0","method":"tools/list","id":1}' | node index.js

• 內存問題

# 監控系統資源
htop

# 優化 Chromium 內存使用
# 添加到瀏覽器參數：'--memory-pressure-off', '--max_old_space_size=512'

鳴謝

• Anthropic 提供 Claude Code 和 MCP 協議。
• 樹莓派基金會 推動計算普及。
• Chromium 項目 提供 ARM64 瀏覽器支持。
• 開源社區 使這一切成為可能。

腳註

¹ 截至 2025 年的價格（美元，近似值）：

• 樹莓派 5 16GB：180 美元（官方建議零售價）
• 樹莓派顯示屏 2（11.9 英寸觸摸屏）：120 美元（官方配件）
• 官方 27W USB - C 電源：25 美元（樹莓派 5 推薦）
• 閃迪 Extreme 128GB A2：35 美元（高速 micro SD 卡）
• Claude Code Pro：40 美元/月（2 個月初創期）
• 外殼 + 電纜：40 美元（官方外殼 + HDMI/USB 配件）

價格可能因地區和供應情況而異。請查看官方零售商獲取當前價格。