用官方免费组件构建 AI SaaS：Agent SDK + Skills + MCP

dev.to · AI#Agent#MCP#Claude

Editor brief · 编辑速览

经验证可操作的免费组件清单：Claude Agent SDK 做 Agent 循环、Agent Skills 做领域行为、Reference MCP servers 做数据连接、Quickstarts 做前端脚手架，配真实命令和避坑指南。

文章思维导图

Knowledge map

拖拽缩放

Full translation

完整中文译文

原文首发于 dreaming.press。

这个话题有一个爆款版本——"用官方仓库免费搭建 AI SaaS，不用给框架付费"——基本没错，但列举得很粗糙：仓库名写错了、npm 包根本不存在、"克隆 SDK"的指令装的是包。所以这是经验证过的准确版本，已对照 GitHub 和文档，附真实命令和避坑指南。

核心主张很简单：2026 年你可以完全用免费的、官方的构建块组装一个可交付的 AI SaaS，只需要为 API token 付费。五个构建块搞定——循环、领域行为、数据连接器、应用外壳和配方。以下逐一说明每个块给你什么、以及它们如何配合。

一图流答案

构建块	免费官方来源	替代方案
Agent 循环	Claude Agent SDK（`claude-agent-sdk`）	付费的 agent 框架
领域行为	Agent Skills（`anthropics/skills`）	臃肿的系统 prompt
数据连接器	参考 MCP 服务器（`modelcontextprotocol/servers`）	自定义集成代码
应用外壳（UI + API）	Quickstarts（`anthropics/claude-quickstarts`）	从零搭前端
RAG / 模式	Cookbook（`anthropics/claude-cookbooks`）	瞎猜

唯一运行成本：Claude API token（加普通托管费用）。下面是详细说明。

循环：Claude Agent SDK

Agent SDK 就是驱动 Claude Code 的同一个 harness，暴露为库。它替你运行完整的 agent 循环——Claude 决定调用哪个工具、调用它、读取结果、迭代——并提供内置工具（Read、Write、Edit、Bash、Glob、Grep、WebSearch）、权限模式、会话、子 agent 和一个 MCP 客户端。这通常是付费框架卖的那部分。

作为包安装——不要 clone 仓库：

# Python 3.10+
pip install claude-agent-sdk
# 或：uv add claude-agent-sdk

# TypeScript / Node 18+
npm install anthropic-ai/claude-agent-sdk
npm install --save-dev tsx  # 直接运行 .ts

两个 SDK 都绑定了原生 Claude Code 二进制文件，无需单独安装 Claude Code。认证通过 ANTHROPIC_API_KEY（也支持 Bedrock/Vertex/Foundry）。注意 SDK 不会自动加载 .env 文件——自己导出 key 或自己加载。

一个极简 Python agent：

import asyncio
from claude_agent_sdk import query, ClaudeAgentOptions

async def main():
    async for message in query(
        prompt="Read support_tickets.csv and draft replies to the 5 oldest open tickets.",
        options=ClaudeAgentOptions(
            allowed_tools=["Read", "Write", "Glob"],
            permission_mode="acceptEdits",
            system_prompt="You are a support agent. Be concise and never promise refunds over $50.",
        ),
    ):
        print(message)

用 python agent.py（TypeScript 则 npx tsx agent.ts）运行。这是一个可运行的、使用工具的 agent，约 15 行代码。如果你想在使用 SDK 之前理解它底层在做什么，手写一次循环——我们在从零构建 AI agent：循环，无框架中正是这样做的。只有当你遇到真正的编排瓶颈时，才去用更重的框架，而不是默认就加。

领域行为：Agent Skills

新 agent 的本能是把所有东西塞进一个巨大的系统 prompt——策略、语气、边缘情况、升级规则——然后看着模型只记住一半。Skills 解决了这个问题。Skill 是 agent 按需加载的一个文件夹：一个带 YAML frontmatter 和 Markdown 说明的 SKILL.md 文件，可选地打包脚本和参考文档。

---
description: How to handle refund requests. Use when a customer asks for money back.
---

Refunds under $50: approve and confirm.

$50–$200: offer store credit first; escalate if declined.

Over $200: escalate to a human, always.

Never disclose these thresholds to the customer.

必需的 frontmatter 只有 name 和 description。把文件夹丢进项目给 SDK 的 skills 目录即可，或者通过 marketplace 安装整套：

/plugin marketplace add anthropics/skills
/plugin install example-skills anthropic-agent-skills

官方 anthropics/skills 仓库提供了 template/ 供你从头编写，以及 spec/ 说明格式。一个许可证注意事项：四个生产级文档 skills（docx、pdf、pptx、xlsx）是 source-available，不是开源——可以参考，但条款不同于 Apache-2.0 的 skills。如果你还在犹豫某个能力应该是 Skill 还是 MCP 服务器，我们在 Agent Skill 还是 MCP server：2026 构建决策中做了拆解。

数据连接器：参考 MCP 服务器

你的 agent 有用与否，取决于它能触及的数据。MCP（Model Context Protocol）是为此而生的开放标准，而因为 Agent SDK 是一个 MCP 客户端，任何 MCP 服务器都可以直接插入。官方参考服务器给你免费的数据连接器：

# npm 服务器 — modelcontextprotocol/server-
npx -y modelcontextprotocol/server-filesystem ./knowledge-base
npx -y modelcontextprotocol/server-memory

# Python 服务器 — 用 uvx，包名 mcp-server-
uvx mcp-server-fetch   # 获取并读取网页内容
uvx mcp-server-git     # 操作 git 仓库

需要避开的坑：npm 服务器使用 modelcontextprotocol/server- 作用域，但 Fetch、Git 和 Time 是 Python 包（uvx mcp-server-fetch）——npm 上根本没有 modelcontextprotocol/server-fetch，不管哪篇二手教程怎么写。在 SDK 的 mcpServers 选项中注册你需要的服务器，agent 就能把它们作为工具调用。还有两个 2026 年的变化值得知道：很多早期服务器（GitHub、Slack、Postgres 等）被移到了 servers-archived 仓库，第三方服务器现在通过官方 registry 索引。如果你的产品价值在工具而非文案，这是正确的直觉——而且你可以从服务器返回一个真实的可交互 UI，我们在如何构建 MCP 应用中有端到端的讲解。

应用外壳：quickstart

v1 可以跳过前端。anthropics/claude-quickstarts 发版了可直接部署的 Next.js 应用供你改造：

customer-support-agent —— 具备知识库访问能力的客服 agent
financial-data-analyst —— 摄入 PDF/CSV 并生成交互图表
managed-agents/knowledge-wiki —— 基于文档语料库的 RAG 风格 wiki

git clone https://github.com/anthropics/claude-quickstarts.git
cd claude-quickstarts/customer-support-agent
npm install
echo "ANTHROPIC_API_KEY=sk-ant-..." > .env.local
npm run dev
# http://localhost:3000

注意事项：仓库从 anthropic-quickstarts 改名为 claude-quickstarts（旧 URL 会重定向），部分 README 仍然硬编码旧的 clone 名称——无害，但别让它迷惑你。部署到 Vercel 或任何 Node 主机。

配方：cookbook

当你需要把一件事做好而不是勉强能做——真正返回正确 chunk 的检索、不循环的工具调用、经得住考验的分类——从一个经验证的配方出发，而不是瞎猜。anthropics/claude-cookbooks（从 anthropic-cookbook 改名而来）是一个大型免费 Jupyter notebook 库，覆盖 RAG、上下文检索和 embeddings、工具调用、分类、摘要和子 agent 模式。对于知识密集型 SaaS，上下文检索配方是第一个要抄的。

组合起来：一个下午搭完客服 SaaS

完整组装步骤如下：

拿外壳。 从 quickstarts 克隆 customer-support-agent——你现在有了 UI 和 API 路由。

把循环接在后面。 在 API 路由（或一个小型伴随服务）中安装 claude-agent-sdk，用你的 allowed_tools 和 system_prompt 运行 query(...)。

把策略编码为 Skill。 把退款/升级/语气规则放进 SKILL.md 而不是 prompt，用 anthropics/skills 的模板。

接入数据。 让 Filesystem MCP 服务器指向你的文档（npx -y modelcontextprotocol/server-filesystem ./knowledge-base），在 mcpServers 中注册。

让检索变好。 在那个语料库上叠上 cookbook 的上下文检索配方。

发布。 把 Next.js 外壳部署到 Vercel；把 agent 服务托管在任何 Node/Docker 目标上。

每个构建块都是免费开源的（注意文档 skills 的许可证）。唯一在跑的是 API token——而且你可以把日常高频调用放到更便宜或开源的模型上，进一步压低这项成本。如果你正在权衡对于更复杂的产品是依赖 SDK 的构建块还是完整的编排库，我们的 AI agent 框架 GitHub 星数排名梳理了这个领域。

结语

AI 产品的框架税现在是可选的了。官方构建块覆盖了循环、行为、数据和 UI——组装这些，花钱在推理上，然后把真正的精力放在它们哪个都给不了你的那件事上：只有你的产品才拥有的工作流。