前端转型 Agent 开发 04：MCP 与 Skill，赋予 Agent 更广泛的工作能力

英文标题：前端转型 Agent 开发 04 之 MCP 与 Skill（赋予 Agent 更广工作能力）

本文介绍了 MCP（Model Context Protocol）的 Client/Server 架构，以及 Tools、Resources、Prompts 三类核心能力。文章通过 LangChain 与文件系统 MCP Server 的示例，说明 Agent 如何发现、加载并统一调度远程工具，同时覆盖资源读取、提示模板、认证、错误处理与断线重连。文中强调，MCP 将跨进程、跨网络的工具调用标准化，使 Agent 可以在不大幅修改应用代码的情况下扩展能力。针对 Skill 插件系统，文章进一步说明其作为面向 LLM 的指令文档，通过分类与渐进式披露机制降低上下文负担并提升可管理性。

3.2 KB 589 B 24.1 KB 6.7 KB

┌────────────────┐         ┌────────────────┐
│  MCP Client    │ <-----> │  MCP Server    │
│ (在你的 Agent  │  JSON-  │ (独立进程，    │
│  应用中)       │  RPC    │  暴露 tools)   │
└────────────────┘         └────────────────┘

import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js';
import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js';
import { ChatAnthropic } from '@langchain/anthropic';
import { createAgent } from '@langchain/langgraph';



const transport = new StdioClientTransport({
  command: 'npx',
  args: ['-y', '@modelcontextprotocol/server-filesystem', '/workspace'],
});

const mcpClient = new Client(
  { name: 'agent-mcp-client', version: '1.0.0' },
  { capabilities: {} },
);
await mcpClient.connect(transport);


const { tools: mcpTools } = await mcpClient.listTools();
console.log('MCP Server 暴露的工具:', mcpTools.map(t => t.name));




import { loadMcpTools } from '@langchain/mcp-adapters';
const tools = await loadMcpTools(mcpClient);


const agent = createAgent({
  llm: new ChatAnthropic({ model: 'claude-sonnet-4-20250514' }),
  tools, 
  prompt: '你可以通过 MCP 访问 /workspace 目录下的文件。',
});

const result = await agent.invoke({
  messages: [
    { role: 'user', content: '列出 /workspace 下所有文件，然后读 README.md 给我看' },
  ],
});


console.log(result.messages.at(-1).content);


await mcpClient.close();

import { Client } from '@modelcontextprotocol/sdk/client/index.js';

const mcpClient = new Client();


const { resources } = await mcpClient.listResources();
console.log(resources.map(r => ({
  uri: r.uri,        
  name: r.name,      
  mimeType: r.mimeType,
})));






const content = await mcpClient.readResource({
  uri: 'file:///docs/api.md',
});
console.log(content.contents[0].text);

const { prompts } = await mcpClient.listPrompts();
console.log(prompts.map(p => ({ name: p.name, description: p.description })));






const rendered = await mcpClient.getPrompt('code_review', {
  language: 'typescript',
  snippet: `function add(a: number, b: number) { return a + b }`,
});


for (const msg of rendered.messages) {
  console.log(`[${msg.role}] ${msg.content}`);
}









const result = await model.invoke(rendered.messages);

async function connectWithRetry(url: string, maxAttempts = 5) {
  for (let attempt = 1; attempt <= maxAttempts; attempt++) {
    try {
      const transport = new StreamableHTTPClientTransport(new URL(url));
      const client = new Client();
      await client.connect(transport);
      console.log(`✅ MCP 连接成功（attempt ${attempt}）`);
      return client;
    } catch (err: any) {
      
      const retryable =
        err.code === 'ECONNREFUSED' || 
        err.code === 'ETIMEDOUT' ||    
        err.code === 'ECONNRESET';     

      if (!retryable) throw err; 

      
      const delay = Math.min(1000 * Math.pow(2, attempt - 1), 16_000);
      console.warn(`MCP 连接失败（attempt ${attempt}），${delay}ms 后重试:`, err.message);
      await new Promise(r => setTimeout(r, delay));
    }
  }
  throw new Error(`MCP 连接失败（${maxAttempts} 次重试后仍不成功）`);
}


client.on('disconnect', async () => {
  console.warn('MCP 连接断开，尝试重连...');
  await connectWithRetry(serverUrl);
});

import { Client } from '@modelcontextprotocol/sdk/client/index.js';


const client1 = new Client(
  { name: 'agent-mcp-client', version: '1.0.0' },
  {
    capabilities: {},
    auth: {
      type: 'bearer',
      token: process.env.MCP_API_TOKEN,
    },
  },
);


const client2 = new Client(
  { name: 'agent-mcp-client', version: '1.0.0' },
  {
    capabilities: {},
    auth: {
      type: 'oauth2',
      clientId: process.env.MCP_CLIENT_ID,
      clientSecret: process.env.MCP_CLIENT_SECRET,
      tokenEndpoint: 'https://auth.example.com/oauth/token',
      scopes: ['read', 'write'],
    },
  },
);


const client3 = new Client(
  { name: 'agent-mcp-client', version: '1.0.0' },
  {
    capabilities: {},
    headers: {
      'X-API-Key': process.env.MCP_API_KEY,
      'X-Tenant': 'tenant-123',
    },
  },
);

┌─────────────────────────────────────────────────────────────────┐
│  ① 加载：SKILL.md (磁盘)  →  Skill[] 内存对象                      │
│     loadSkills()  [engine/skills.ts:117]                         │
│     合并 builtin(BUILTIN_SKILLS 常量) + userData/skills

┌────────────────┐         ┌────────────────┐
│  MCP Client    │ <-----> │  MCP Server    │
│ (在你的 Agent  │  JSON-  │ (独立进程，    │
│  应用中)       │  RPC    │  暴露 tools)   │
└────────────────┘         └────────────────┘

import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js';
import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js';
import { ChatAnthropic } from '@langchain/anthropic';
import { createAgent } from '@langchain/langgraph';



const transport = new StdioClientTransport({
  command: 'npx',
  args: ['-y', '@modelcontextprotocol/server-filesystem', '/workspace'],
});

const mcpClient = new Client(
  { name: 'agent-mcp-client', version: '1.0.0' },
  { capabilities: {} },
);
await mcpClient.connect(transport);


const { tools: mcpTools } = await mcpClient.listTools();
console.log('MCP Server 暴露的工具:', mcpTools.map(t => t.name));




import { loadMcpTools } from '@langchain/mcp-adapters';
const tools = await loadMcpTools(mcpClient);


const agent = createAgent({
  llm: new ChatAnthropic({ model: 'claude-sonnet-4-20250514' }),
  tools, 
  prompt: '你可以通过 MCP 访问 /workspace 目录下的文件。',
});

const result = await agent.invoke({
  messages: [
    { role: 'user', content: '列出 /workspace 下所有文件，然后读 README.md 给我看' },
  ],
});


console.log(result.messages.at(-1).content);


await mcpClient.close();

import { Client } from '@modelcontextprotocol/sdk/client/index.js';

const mcpClient = new Client();


const { resources } = await mcpClient.listResources();
console.log(resources.map(r => ({
  uri: r.uri,        
  name: r.name,      
  mimeType: r.mimeType,
})));






const content = await mcpClient.readResource({
  uri: 'file:///docs/api.md',
});
console.log(content.contents[0].text);

const { prompts } = await mcpClient.listPrompts();
console.log(prompts.map(p => ({ name: p.name, description: p.description })));






const rendered = await mcpClient.getPrompt('code_review', {
  language: 'typescript',
  snippet: `function add(a: number, b: number) { return a + b }`,
});


for (const msg of rendered.messages) {
  console.log(`[${msg.role}] ${msg.content}`);
}








const result = await model.invoke(rendered.messages);

async function connectWithRetry(url: string, maxAttempts = 5) {
  for (let attempt = 1; attempt <= maxAttempts; attempt++) {
    try {
      const transport = new StreamableHTTPClientTransport(new URL(url));
      const client = new Client();
      await client.connect(transport);
      console.log(`✅ MCP 连接成功（attempt ${attempt}）`);
      return client;
    } catch (err: any) {
      
      const retryable =
        err.code === 'ECONNREFUSED' || 
        err.code === 'ETIMEDOUT' ||    
        err.code === 'ECONNRESET';     

      if (!retryable) throw err; 

      
      const delay = Math.min(1000 * Math.pow(2, attempt - 1), 16_000);
      console.warn(`MCP 连接失败（attempt ${attempt}），${delay}ms 后重试:`, err.message);
      await new Promise(r => setTimeout(r, delay));
    }
  }
  throw new Error(`MCP 连接失败（${maxAttempts} 次重试后仍不成功）`);
}


client.on('disconnect', async () => {
  console.warn('MCP 连接断开，尝试重连...');
  await connectWithRetry(serverUrl);
});

import { Client } from '@modelcontextprotocol/sdk/client/index.js';


const client1 = new Client(
  { name: 'agent-mcp-client', version: '1.0.0' },
  {
    capabilities: {},
    auth: {
      type: 'bearer',
      token: process.env.MCP_API_TOKEN,
    },
  },
);


const client2 = new Client(
  { name: 'agent-mcp-client', version: '1.0.0' },
  {
    capabilities: {},
    auth: {
      type: 'oauth2',
      clientId: process.env.MCP_CLIENT_ID,
      clientSecret: process.env.MCP_CLIENT_SECRET,
      tokenEndpoint: 'https://auth.example.com/oauth/token',
      scopes: ['read', 'write'],
    },
  },
);


const client3 = new Client(
  { name: 'agent-mcp-client', version: '1.0.0' },
  {
    capabilities: {},
    headers: {
      'X-API-Key': process.env.MCP_API_KEY,
      'X-Tenant': 'tenant-123',
    },
  },
);

┌─────────────────────────────────────────────────────────────────┐
│  ① 加载：SKILL.md (磁盘)  →  Skill[] 内存对象                      │
│     loadSkills()  [engine/skills.ts:117]                         │
│     合并 builtin(BUILTIN_SKILLS 常量) + userData/skills