Lesson 13: MCP Servers — Connecting AI to the outside world

Vibe Coding with GitHub Copilot: From Basics to Advanced

Part 4: Customize & Extend Copilot

xdev.asia

1. What is Model Context Protocol (MCP)?

MCP is a standard protocol that allows AI agents to communicate with external tools and services. Instead of writing the integration code yourself, you install MCP servers to expand Copilot's capabilities.

┌─────────────────────────────────────────────────┐
│              MCP ARCHITECTURE                    │
├─────────────────────────────────────────────────┤
│                                                  │
│  ┌──────────┐     ┌────────────┐                │
│  │ Copilot  │────▶│ MCP Server │                │
│  │ Agent    │◀────│ (Figma)    │                │
│  └──────────┘     └────────────┘                │
│       │                                          │
│       │           ┌────────────┐                │
│       └──────────▶│ MCP Server │                │
│       ◀───────────│ (Database) │                │
│                   └────────────┘                │
│       │                                          │
│       │           ┌────────────┐                │
│       └──────────▶│ MCP Server │                │
│       ◀───────────│ (GitHub)   │                │
│                   └────────────┘                │
│                                                  │
│  Copilot dùng tools từ MCP servers              │
│  như dùng built-in tools                        │
│                                                  │
└─────────────────────────────────────────────────┘

2. Install MCP Servers in VS Code

2.1. Configuration in settings.json

{
  "mcp": {
    "servers": {
      "figma": {
        "command": "npx",
        "args": ["-y", "@anthropic/mcp-server-figma"],
        "env": {
          "FIGMA_ACCESS_TOKEN": "${env:FIGMA_ACCESS_TOKEN}"
        }
      },
      "github": {
        "command": "npx",
        "args": ["-y", "@anthropic/mcp-server-github"],
        "env": {
          "GITHUB_TOKEN": "${env:GITHUB_TOKEN}"
        }
      },
      "postgres": {
        "command": "npx",
        "args": ["-y", "@anthropic/mcp-server-postgres"],
        "env": {
          "DATABASE_URL": "${env:DATABASE_URL}"
        }
      }
    }
  }
}

2.2. Per-project configuration (.vscode/mcp.json)

{
  "servers": {
    "project-db": {
      "command": "npx",
      "args": ["-y", "@anthropic/mcp-server-postgres"],
      "env": {
        "DATABASE_URL": "postgresql://dev:password@localhost:5432/myapp_dev"
      }
    }
  }
}

3. Popular MCP Servers

3.1. Figma MCP — Design to Code

Connect Figma with Copilot to convert design into code:

// Prompt ví dụ:
Look at the Figma design for the login page and create
a React component that matches it exactly.
Use TailwindCSS for styling.

March 2026: Figma MCP server possible generate design layers directly from VS Code.

3.2. GitHub MCP — Repository Operations

// Copilot có thể:
- Tìm và phân tích issues
- Đọc pull request comments
- Tạo issues từ code analysis
- Review PR changes

3.3. Database MCP — Query and Schema

// Prompt ví dụ:
Show me the schema of the users table and write a query
to find all users who registered in the last 30 days
but haven't made any purchases.

3.4. Other MCP servers

MCP Server	Function
Filesystem	Read/write files outside the workspace
Brave Search	Web search from within Copilot
Puppeteer	Browser automation and screenshots
Slack	Send messages, create issues from Slack
Memory	Persistent memory for conversations
GitKraken	Advanced Git operations

4. Create Custom MCP Server

You can create a separate MCP server for internal tools:

// custom-mcp-server/index.ts
import { Server } from '@modelcontextprotocol/sdk/server/index.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';

const server = new Server({
  name: 'internal-api',
  version: '1.0.0',
}, {
  capabilities: {
    tools: {},
  },
});

// Register tool
server.setRequestHandler('tools/list', async () => ({
  tools: [{
    name: 'get_customer',
    description: 'Lấy thông tin khách hàng từ CRM',
    inputSchema: {
      type: 'object',
      properties: {
        customerId: { type: 'string', description: 'Customer ID' },
      },
      required: ['customerId'],
    },
  }],
}));

server.setRequestHandler('tools/call', async (request) => {
  if (request.params.name === 'get_customer') {
    const { customerId } = request.params.arguments;
    // Call internal API
    const customer = await fetchCustomer(customerId);
    return { content: [{ type: 'text', text: JSON.stringify(customer) }] };
  }
});

const transport = new StdioServerTransport();
await server.connect(transport);

5. Copilot Hooks — Automation at lifecycle events

Hooks allow running custom commands at specific events:

{
  "github.copilot.chat.hooks": {
    "postSave": [
      {
        "command": "npm run lint:fix",
        "pattern": "**/*.{ts,tsx}"
      }
    ],
    "postCreate": [
      {
        "command": "npx prettier --write",
        "pattern": "**/*.{ts,tsx,css}"
      }
    ]
  }
}

Hooks ensure AI code is always generated format and lint automatically.

6. Security Considerations

⚠️ MCP servers have strong access rights:

• Database MCP: can read/write database → only used with dev database
• Filesystem MCP: can access files outside the workspace
• MCP API: can call external APIs with your credentials

Best practices:

• Use environment variables for secrets, not hardcode
• Limit scope: only grant necessary permissions to the MCP server
• Review MCP source: check MCP server code before installing
• Separate environments: dev database is different from production database
• Audit logs: monitor MCP server activity

7. Summary

MCP Servers turn Copilot from code generator into full development assistant Can interact with design tools, databases, APIs, and external services.

MCP Server	Vibe Coding Use Case
Figma	"Build this design" → code
Database	"Create API for this schema" → full CRUD
GitHub	"Fix issues assigned to me" → auto-implement
Custom	"Integrate with our CRM" → domain-specific tools

From Part 5, we will apply all the knowledge we have learned real combat project — build a complete full-stack app using Vibe Coding.