Select Page
v0.dev:輸入網址,即可生成相同網站前端的 AI 工具

v0.dev:輸入網址,即可生成相同網站前端的 AI 工具

v0.dev 是由 Vercel 開發的 AI 驅動工具,你只要透過簡單的文字提示,就可以快速生成前端網頁的 UI 元件程式碼,其核心特色在於用戶只需輸入需求描述,v0.dev 即可生成對應的 React、Vue 或 Svelte 組件程式碼,並可直接複製到專案中使用。

主要功能:

  • 自然語言生成 UI 元件: 用戶可透過輸入簡單的文字描述,v0.dev 會根據提示生成相應的 UI 元件程式碼,無需手動編寫。
  • 即時程式碼複製與整合: 生成的程式碼可直接複製,並整合至現有專案中,方便進行客製化調整。 
  • 支援多種前端框架: 除了 React,v0.dev 也支援 Vue 和 Svelte 等框架,滿足不同開發者的需求。 

使用方法:

  1. 訪問 v0.dev 網站: 在瀏覽器中開啟 v0.dev
  2. 輸入提示詞: 在提示框中輸入您想要複製的網址即可。 
  3. 生成並複製程式碼: v0.dev 會根據您的描述生成對應的程式碼,您可直接複製並整合至您的專案中。

參考資訊:

Windows設置LLM環境變數的幾種方法

LLMs Server 還是需要放在 Linux 環境中比較好,但開發階段常常用 Windows 在開發,多數人使用的 Shell export 就沒法使用

export OPENAI_API_KEY="sk-...".

Windows中設置LLM環境變數的幾種方法解決方法

使用命令列 CMD

set OPENAI_API_KEY=sk-...

使用 PowerShell

[Environment]::SetEnvironmentVariable("OPENAI_API_KEY", "sk-...", "User")

放在 Python 程式中

import os

# 設置環境變數
os.environ['OPENAI_API_KEY'] = 'sk-你的API密鑰'

# 之後就可以使用這個環境變數了
# 例如,當使用OpenAI的API時,就可以從環境變數中獲取API密鑰
api_key = os.environ['OPENAI_API_KEY']
print("API Key:", api_key)

檢查是否有正確設置

echo %OPENAI_API_KEY%

相關資料

Aider Chat-邊聊邊寫程式

Aider Chat-邊聊邊寫程式

Aider 是一款突破性的 AI 程式設計助理,無論是終端操作還是透過瀏覽器,都可以享受與 Aider 的互動式編程體驗

多樣化運行模式

Aider 支援兩種運行模式:

  1. 本地模式:結合 Ollama 模型,支持用戶在本地執行各種大型語言模型(LLMs)。
  2. 瀏覽器模式:無需繁瑣的安裝配置,用戶只需透過瀏覽器即可啟動對話編程,輕鬆實現即時代碼編輯。

核心功能與亮點

Git 無縫整合

Aider 深度集成本地 Git 倉庫,讓程式碼管理變得簡單高效:

  • 代碼編輯:直接使用提示詞請求代碼修改、錯誤修復或改進功能,變更將即時應用至源代碼。
  • 自動提交:所有改動將自動生成具描述性的 Git 提交記錄,便於追蹤和審核。

直觀命令操作

用戶可通過多種命令與 Aider 互動,執行各類任務:

命令說明
/add將檔案新增到聊天中,讓 GPT 可以編輯或詳細檢查這些檔案。
/ask提出與程式碼庫相關的問題,無需編輯任何檔案。
/chat-mode切換到新的聊天模式。
/clear清除聊天記錄。
/clipboard將剪貼簿中的圖片或文字新增到聊天中(可選擇提供圖片名稱)。
/code請求對程式碼進行修改。
/commit提交在聊天外進行的編輯到程式庫(提交資訊為可選)。
/diff顯示自上次訊息以來的變更差異。
/drop從聊天會話中移除檔案以釋放上下文空間。
/exit離開應用程式。
/git執行一個 Git 命令。
/help提出與 Aider 相關的問題。
/lint對提供的檔案進行 Lint 檢查並修復;若未提供檔案,則修復聊天中的檔案。
/ls列出所有已知檔案,並指出哪些檔案包含在聊天會話中。
/map輸出當前程式庫的地圖。
/map-refresh強制刷新程式庫地圖。
/model切換到新的大型語言模型。
/models搜尋可用的模型列表。
/quit離開應用程式。
/read-only將檔案新增到聊天中,僅供參考,不能編輯。
/reset刪除所有檔案並清除聊天記錄。
/run執行一個 Shell 命令,並可選擇將輸出新增到聊天中(別名:!)。
/test執行一個 Shell 命令,若退出碼非零,則將輸出新增到聊天中。
/tokens報告當前聊天上下文使用的 Token 數量。
/undo如果上次 Git 提交是由 Aider 完成的,則撤銷該提交。
/voice記錄並轉錄語音輸入。
/web擷取網頁內容,轉換為 Markdown,並新增到聊天中。

完整命令列表涵蓋從文件管理到模型切換的全方位需求。

多模型支持

Aider 支援廣泛的 LLM,包括但不限於:

  • Ollama
  • OpenAI
  • Anthropic
  • DeepSeek
  • OpenRouter

安裝與使用

基礎安裝

透過 pip 安裝 Aider:

python3 -m pip install aider-chat

運行本地 Ollama 模型

export OLLAMA_API_BASE=http://127.0.0.1:11434
aider --model ollama/mistral

# Groq
export GROQ_API_KEY=sk-xx
aider --model groq/llama3-70b-8192

# OpenRouter
export OPENROUTER_API_KEY=sk-xx
# Or any other open router model
aider --model openrouter/<provider>/<model>
# List models available from OpenRouter
aider --models openrouter/

# Web
aider --browser

# GitHub 學習用
git clone https://github.com/mewmewdevart/SnakeGame
cd SnakeGame
aider

# 请解释这个项目的功能
# 这个项目是运用了哪些技术?
# 更改蛇的颜色为绿色,食物的颜色为红色

相關資料

Aider官網

Aider GitHub

AgentK與AI的融合:打造自學能力的AGI核心技術

AgentK與AI的融合:打造自學能力的AGI核心技術

AgentK 是一個有團隊概念能自我進化的人工智能通用智能(AGI)項目,它由多個模塊化代理組成,這些代理能夠協同工作完成任務並不斷學習與改進。該系統的目標是透過最小的核心代理和工具集合,自我引導並逐步擴展其智能。

AgentK 介紹與說明

AgentK 的核心代理:

  1. Hermes:作為協調者,負責與人類互動以理解目標,管理任務的創建和分配,並協調其他代理的活動。
  2. AgentSmith:作為建築師,負責創建和維護其他代理,確保這些代理配備必要的工具並檢測其功能。
  3. ToolMaker:作為工具開發者,創建和完善代理所需的工具,確保系統保持靈活且裝備齊全。
  4. WebResearcher:作為知識收集者,執行深入的線上研究,為系統提供最新資訊,使代理能夠做出明智的決策並有效執行任務。

特點:

  • 自進化:AgentK 會隨著時間推移不斷學習和改進,建構新的代理和工具來擴展自身能力。
  • 模塊化:AgentK 由多個獨立的代理組成,每個代理負責特定的任務。
  • 協作:不同的代理之間可以相互協作,共同完成複雜的任務。

環境條件:

先註冊為 LangChain 的會員,價格可以看 https://www.langchain.com/pricing ,一開始直接選擇 Developer 即可

註冊成為 LangChain 會員之後,到 Settings -> API Keys -> Create API Key ,然後進行下一步驟

運行方式:

AgentK 在隔離的 Docker 容器中運行,需要在系統上安裝最新版的 Docker。

  • .env.template 複製到 .env
  • .env 文件中設置環境變量
  • 運行 ./agentk 或是 docker compose run –rm agentk

AgentK 基於 LangGraph 和 LangChain 框架構建,並鼓勵自我編寫測試。該項目仍在進行中,包括對異常代理和工具的檢測與修復。

更多資訊及貢獻方式可訪問其 GitHub 頁面,請看DEMO

進階功能

你可以進入原始碼中,AgengK/agents/ ,在這裡可以自訂義專屬自己的 Agents

在 AgentK/tools/ 下,則是可以自訂義 Actions,例如用google search或是產生行事曆

參考資訊

利用 Claude Dev 幫你自動化開發程式

利用 Claude Dev 幫你自動化開發程式

Claude Dev 提供了一個 AI 自動生成程式的開發工具,融合了 VS Code 的編輯器功能和強大的 Claude 3.5 Sonnet’s 模型。這套系統融合了代碼的自動生成過程,更在軟體開發的各個階段提供了全方面的支持。

特色介紹

代碼開發和文件管理的全新模式

利用 Claude 3.5 Sonnet’s 的主動式編碼能力,Claude Dev 能夠逐步處理複雜的軟件開發任務。它不僅允許創建和編輯文件,還能探索複雜項目,並在獲得使用者許可後,執行終端機命令。

以往要採用AI開發,必須在各種AI工具以及視窗中切換,有遇到錯誤也需要手動張貼錯誤訊息,提供給AI除錯,現在超越了傳統的代碼自動完成或技術支持,為開發者提供了更全面的幫助。

AI 監督並且和使用者互動

傳統的自主AI腳本通常在沙盒環境中運行,而 Claude Dev 提供了一個圖形使用者UI,可以用來監督每一個變更的文件和執行的命令。這種方式確保了操作的安全性,並使開發者能夠安全地探索主動式 AI 的潛力。你還可以將圖片貼入聊天中,利用 Claude 的視覺能力將模型轉換成功能完整的應用程序,或者用截圖修復錯誤。

深入瞭解每一步的變更

Claude Dev 允許你直接在編輯器中查看每次更改的差異,並在聊天中通過語法高亮預覽跟踪進度。終端命令也可以直接在聊天中運行,你無需自己打開終端機。此外,每次使用工具或發送信息到 API 前,都會出現許可按鈕(例如「批准終端命令」),讓你能夠控制操作。

代碼和項目管理的高效工具

Claude Dev 擁有全面性寫程式的能力:

  • 執行系統上的終端命令
  • 列出指定目錄的頂層文件路徑
  • 遞迴列出指定目錄及其子目錄中的所有文件路徑
  • 解析頂層源代碼文件以提取關鍵元素名稱,如 Class 和 Function 等。

透由這些工具的運用,結合自然語言處理的基礎,使 Claude Dev 能夠理解代碼庫的結構和意圖,從而有效地協助開發者去開發大型和複雜的項目。

高級代碼概覽和文件結構的智能分析

從項目文件結構到高級代碼概覽,Claude Dev 使用如 tree-sitter 的工具來解析源代碼,提取出 Class 、Function、 Method 等定義。這種深度分析使 Claude Dev 能夠迅速了解代碼的結構和用途,並根據任務需要閱讀最相關的文件。

實時監控AI的成本控制

Claude Dev 也能跟踪整個任務循環和個別請求的 API 使用成本,並設定在任務中允許的最大 API 請求數量。任務完成後,Claude 可以決定是否通過如

open -a "Google Chrome" index.html

的終端命令來向你展示結果,只需點擊一下即可運行。

這些高級功能證明了 Claude Dev 不僅是代碼自動生成的工具,更是一個全面的開發環境,讓開發者能夠更有效地控制和優化他們的開發流程。通过提供一個全方位的開發解決方案,Claude Dev 真正實現了零代碼開發的未來。

參考資料

https://github.com/saoudrizwan/claude-dev

下載 VSCode Extension

ANTHROPIC API