MCP & Vibe Coding

#AI 

General MCP work flow

!Image Description

MCP in IDE

歡迎凱大跟子勤!

IDE

  1. Claude https://www.cursor.com/
  2. Windsurf https://windsurf.com/pricing
  3. TRAE https://www.trae.ai/
  4. FireStudio https://firestudio.space/

LLM Model

  1. Claude-3.7
  2. GPT-4o
  3. DeepSeek-V3
  4. Gemini-2.5 pro

!Image Description

Flow - IDE with LLM

!Image Description

Flow - IDE with LLM and MCP

!Image Description

Config example for get doc content

https://github.com/modelcontextprotocol/servers

{
“mcpServers”: {
“LarkDocs”: {
“command”: “npx”,
“args”: [
“-y”,
“–registry”,
“http://bnpm.byted.org/”,
“@byted/mcp-lark-docs@latest”
],
“env”: {
“LARK_APP_ID”: “ididid”,
“LARK_APP_SECRET”: “secret”,
“AUTH_CALLBACK_PORT”: “”,
“AUTH_CALLBACK_ENDPOINT”: ""
}
}
}
}

[Read more]

What is Agents?

AI Agents are programs where LLM outputs control the workflow. People often describes a solution as “AI Solution” that involves any of the following:

  1. Multiple LLM calls
  2. LLMs with ability to use Tools
  3. An environment where LLMs interact with each other
  4. A planner to coordinate activities
  5. Autonomy

Difference between Workflow and Agents

  1. Workflow - Systems where LLMs and tools are orchestrated through pre-defined code paths
  2. Agents - Systems where LLM dynamically direct their own processes and tool usage, maintaining control over how they accomplish tasks

Workflow Design Patterns

  1. Prompt Chaining
    Use cases: Flows that could be divided. For example, split a long story into four episode and then translate them into different languages.

!Image Description

[Read more]

an open-source orchestration library that helps developers connection LLMs for building complex applications_

![[Pasted image 202509117.png.webp]]

It provides a standard interface for various components and abstractions:

  • LLMs: The backbone of LangChain, LLMs like OpenAI’s GPT-3 or GPT-4 provide the core capabilities for understanding and generating language. They are trained on vast datasets to produce coherent and contextually relevant text.
  • Prompt Templates: These templates structure the input to LLMs, maximizing their effectiveness in understanding and responding to queries. By designing effective prompts, developers can guide the LLMs to produce desired outputs.
  • Output Parsers: These components refine the language generated by LLMs into formats that are useful and relevant to specific tasks, enhancing the overall user experience.
  • Vector Store: This component handles the embedding of words or phrases into numerical vectors, which is essential for tasks involving semantic analysis and understanding language nuances.
  • Agents: Agents are decision-making components that determine the best course of action based on input, context, and available resources. They enable LLMs to interact intelligently with their environment.

Chain

Chain of Thought (CoT), the implementation on minimum manageable steps

[Read more]

Introduction - CrewAI

!Image Description 不同的版本:

  1. CrewAI Enterprise
  2. CrewAI UI Studio
  3. CrewAI Open-Source Framework
    1. CrewAI Crews - Autonomous solutions with AI teams of Agents with different roles.
      1. Choose Crews when you need autonomous problem-solving, creative collaboration, or exploratory tasks.
    2. CrewAI Flows - Structured automations by dividing complex tasks into precise workflows.
      1. Choose Flows when you require deterministic outcomes, auditability, or precise control over execution._

Core concepts

  1. Agent
  2. Task
  3. Crew
  4. Tools
  5. Context

YAML Configuration to define agent

[Read more]

一、前言

自2021年GitHub Copilot問世以來，生成式AI與大型語言模型（LLM）應用經歷了爆炸性成長。這份報告從Copilot作為開端，系統梳理LLM及其應用的重大突破、代表性產品、技術演進、產業事件與收購案，涵蓋2021至2025年間的關鍵里程碑，並特別補充LLM驅動的搜尋與知識問答新服務、ComfyUI等工具定位、產業收購案與最新動態。

二、重大產品、突破性功能與應用年表

2021：AI編程革命起點

  • GitHub Copilot
  • 發布：2021
  • 開發單位：GitHub（與OpenAI合作）
  • 特色：首個大規模AI程式碼自動補全工具，整合於VS Code等IDE，支援多語言、自然語言描述轉程式碼，開啟AI輔助編程新時代。
  • 影響：開發者生產力顯著提升，AI編程助手成為主流。

2022：ChatGPT引爆生成式AI熱潮

  • ChatGPT（OpenAI）
  • 發布：2022年11月
  • 特色：對話式AI，能自然流暢地與人互動，推動LLM應用普及。
  • BLOOM（BigScience）
  • 發布：2022
  • 特色：多語言開源LLM，推動AI民主化。
  • Warp
  • 發布：2022
  • 特色：AI驅動的現代終端機，支援指令建議與錯誤修正。

2023：多元LLM與開源生態崛起

  • GPT-4（OpenAI）
  • 發布：2023
  • 特色：多模態（文字+圖片）、推理能力大幅提升，支援更長上下文。
  • LLaMA（Meta）
  • 發布：2023
  • 特色：多規模開源模型，推動開源LLM生態。
  • Claude（Anthropic）
  • 發布：2023
  • 特色：強調AI安全與可控性，對話體驗自然。
  • TRAE
  • 發布：2023
  • 特色：AI驅動的程式碼生成與重構工具，支援多種IDE。

2023-2024：ChatGPT文生圖與「吉卜力之亂」

  • ChatGPT整合DALL-E 3（文生圖）

  • 發布：2023年10月（ChatGPT Plus/Enterprise用戶）

  • 特色：用戶可直接在ChatGPT內以文字生成高品質圖片，無需複雜提示詞，支援多輪對話式調整。

  • 影響：大幅降低AI繪圖門檻，推動AI藝術創作普及。

  • 代表事件：「吉卜力之亂」

  • 時間：2024年初

  • 內容：用戶大量生成吉卜力風格圖片，引發網路瘋傳與爭議。導演宮崎駿公開批評AI藝術，社群討論AI對藝術創作與版權的衝擊，OpenAI雖設有限制但仍難完全防堵。

  • 意義：凸顯AI生成藝術的倫理、法律與產業衝擊，成為全球AI藝術討論焦點。

2024-2025：多模態與影片生成AI時代

  • OpenAI Sora（文生影片）
  • 發布：2024年12月（ChatGPT Plus/Pro用戶）
  • 特色：首個大規模商用的文生影片模型，支援20秒（一般用戶）至1分鐘（專業用戶）1080p影片生成，支援多種比例、複雜場景、角色互動、時間延展、影片編輯（Remix、Recut、Storyboard等）。
  • 影響：徹底改變內容創作、行銷、教育、娛樂等產業，讓影片製作門檻大幅降低，並引發深偽（deepfake）、版權等新型倫理與監管挑戰。

2024-2025：AI IDE與虛擬分身百家爭鳴

  • Cursor、Claude Code、Amazon Kiro、Gemini CLI、Warp等AI IDE
  • 特色：AI原生IDE、命令列AI助手、規格驅動開發、即時多檔案操作、社群驅動快速迭代，推動開發者生產力革命。
  • Grok Avatar（xAI）
  • 發布：2025年7月
  • 特色：3D動畫虛擬分身（如Ani、Rudy），支援語音互動、情感模式、遊戲化進程，搶攻虛擬陪伴與娛樂市場。

2023-2025：專業創意與多模態應用

  • Canva Magic Studio
  • 特色：AI設計工具集成，支援文字生成圖片、影片、圖形，自動去背、擴圖、物件移除。
  • Adobe Photoshop（Firefly）
  • 特色：生成式AI（Firefly）整合，支援Generative Fill/Expand、AI物件偵測與編輯，成為專業創意產業標竿。
  • ComfyUI
  • 定位：ComfyUI並非LLM模型，而是一個開源的圖形化AI工作流工具，主要用於影像生成（如Stable Diffusion），支援自訂節點、流程設計與多模型整合，廣受AI藝術家與創作者歡迎。

2024-2025：LLM驅動的搜尋與知識問答新服務

這一時期，LLM驅動的搜尋與知識問答服務百花齊放，以下為主要代表：

[Read more]