惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

A
About on SuperTechFans
Y
Y Combinator Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Microsoft Security Blog
Microsoft Security Blog
aimingoo的专栏
aimingoo的专栏
I
InfoQ
C
Check Point Blog
IT之家
IT之家
MyScale Blog
MyScale Blog
Apple Machine Learning Research
Apple Machine Learning Research
Vercel News
Vercel News
Last Week in AI
Last Week in AI
GbyAI
GbyAI
P
Proofpoint News Feed
量子位
Stack Overflow Blog
Stack Overflow Blog
Microsoft Azure Blog
Microsoft Azure Blog
月光博客
月光博客
阮一峰的网络日志
阮一峰的网络日志
人人都是产品经理
人人都是产品经理
B
Blog
T
The Blog of Author Tim Ferriss
H
Help Net Security
云风的 BLOG
云风的 BLOG

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
Claude Connectors Explained: How to Give Claude Access to...
ArshTechPro · 2026-04-27 · via DEV Community

Claude is no longer just a chat window. With Connectors, you can wire it up to the tools your team actually uses. Google Drive, Gmail, GitHub, Slack, Notion, Asana, Spotify, Uber, and over 200 others.

This post covers what Connectors are, how they work under the hood, and how to build your own.


What Are Connectors?

Connectors extend Claude's capabilities by giving it access to external tools, data sources, and services. They are powered by the Model Context Protocol (MCP), an open standard created by Anthropic.

Think of it this way: Claude has a conversation with you, but mid-conversation it can reach into your Google Drive, pull a document, summarize it, and drop the result into a Slack message — all without you leaving the thread.

A real workflow example: a product manager pulls a query from Amplitude, turns it into a Canva deck, and drops the link into Asana. One conversation. Three connected apps.


How It Works: MCP in Plain English

MCP is a protocol that defines how Claude (the client) communicates with external services (the servers). The spec is open, which means anyone can build a connector for any service.

There are two things a connector can do:

1. Provide tools and data
This gives Claude the ability to take actions — read files, send emails, create issues, query databases, etc.

2. Surface UI components (MCP Apps)
Instead of just returning text, an MCP server can render interactive UI elements directly in the conversation: charts, maps, forms, booking flows, and more.


Types of Connectors

Prebuilt First-Party Integrations

Anthropic ships ready-to-use connectors for the most common services. No setup beyond logging in:

  • Google Drive, Gmail, Google Calendar
  • GitHub
  • Slack
  • Microsoft 365

These work across all Claude products immediately.

Remote MCP Servers

Third-party developers can host their own MCP servers in the cloud. Claude connects to them over HTTPS. These are what you find in the Connectors Directory — verified by Anthropic and available to all users.

MCP Apps

These are MCP servers that go a step further and render UI inside the conversation. A booking flow, an interactive chart, a filled-out form — all rendered in the chat thread.

MCP Bundles (Desktop Extensions)

For enterprise or local use cases, you can package an MCP server with all its dependencies into a desktop extension (.mcpb format). This handles cross-platform compatibility, code signing, and centralized version updates.

Local MCP via Plugins

If you want to distribute a local MCP server through npm or PyPI, you bundle it in a Plugin using .mcp.json and submit it to the plugin directory.


Where Connectors Work

Platform Remote MCP MCP Apps Local Extensions
Claude.ai (web) Yes Yes No
Claude Desktop Yes Yes Yes
Claude Mobile Yes Beta No
Claude Code Yes No Via plugins
Claude Cowork Yes Yes Via plugins

How Claude Discovers and Uses Connectors

This is the part that feels almost magical once it clicks.

When you connect a service, Claude does not just wait for you to explicitly invoke it. It dynamically surfaces the right connector based on what you are doing. Ask Claude to recommend a weekend hike and AllTrails will appear automatically. Ask for grocery help and Instacart shows up.

When multiple connectors could help, Claude shows all of them and lets you choose. There is no hidden ranking by paid placement. The directory is ad-free.


Privacy and Data Boundaries

  • Your data from connected apps is not used to train Claude's models.
  • A connected app cannot see your other conversations with Claude.
  • Before Claude books or purchases something on your behalf, it confirms with you first.
  • You can disconnect any connector at any time from Settings.

Building Your Own Connector

If you have an internal tool or a service you want Claude to access, you can build a connector. Here is the path:

Step 1: Build an MCP Server

Your MCP server is a standard HTTPS service that implements the MCP protocol. It exposes a set of tools — each tool has a name, description, and input schema.

A minimal Node.js example:

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";

const server = new McpServer({
  name: "my-tool-server",
  version: "1.0.0"
});

server.tool(
  "get_user_data",
  { userId: z.string() },
  async ({ userId }) => {
    const data = await fetchFromYourDB(userId);
    return {
      content: [{ type: "text", text: JSON.stringify(data) }]
    };
  }
);

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

Enter fullscreen mode Exit fullscreen mode

For a remote server, you swap StdioServerTransport for an HTTP/SSE transport and deploy it like any other API.

Step 2: Connect it in Claude Desktop

In your claude_desktop_config.json:

{
  "mcpServers": {
    "my-tool-server": {
      "command": "node",
      "args": ["/path/to/your/server.js"]
    }
  }
}

Enter fullscreen mode Exit fullscreen mode

For a remote server:

{
  "mcpServers": {
    "my-remote-server": {
      "url": "https://your-mcp-server.com/sse"
    }
  }
}

Enter fullscreen mode Exit fullscreen mode

Restart Claude Desktop and your tools are immediately available.

Step 3 (Optional): Add UI with MCP Apps

If you want to render interactive UI inside the conversation, your MCP server can return HTML-based components that Claude will render inline. See the MCP Apps design guidelines for what you can render and how.

Step 4 (Optional): Submit to the Directory

If your connector would be useful to other Claude users, you can submit it to the Connectors Directory. Anthropic reviews submissions and, if approved, your connector becomes available to all users across Claude products.

Submit at: claude.com/docs/connectors/building/submission


Using Connectors in the Anthropic API (for Artifact Builders)

If you are building Claude-powered apps via the API, you can pass MCP servers directly in your API call. Claude will use them during the conversation to take actions on behalf of the user.

const response = await fetch("https://api.anthropic.com/v1/messages", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    model: "claude-sonnet-4-20250514",
    max_tokens: 1000,
    messages: [
      { role: "user", content: "Create a task in Asana for reviewing the Q3 report" }
    ],
    mcp_servers: [
      {
        type: "url",
        url: "https://mcp.asana.com/sse",
        name: "asana-mcp"
      }
    ]
  })
});

Enter fullscreen mode Exit fullscreen mode

Claude will discover the tools exposed by that MCP server and use them automatically to complete the task.

You can combine multiple MCP servers in a single call:

mcp_servers: [
  { type: "url", url: "https://mcp.asana.com/sse", name: "asana-mcp" },
  { type: "url", url: "https://gmailmcp.googleapis.com/mcp/v1", name: "gmail-mcp" }
]

Enter fullscreen mode Exit fullscreen mode

You can also add web search alongside MCP:

tools: [
  { type: "web_search_20250305", name: "web_search" }
],
mcp_servers: [
  { type: "url", url: "https://mcp.asana.com/sse", name: "asana-mcp" }
]

Enter fullscreen mode Exit fullscreen mode


Handling MCP Responses in Your Code

When Claude uses an MCP tool, the response content array contains multiple block types. Do not assume ordering — filter by type:

const data = await response.json();

// Get tool results (the actual data returned from your MCP server)
const toolResults = data.content
  .filter(item => item.type === "mcp_tool_result")
  .map(item => item.content?.[0]?.text || "")
  .join("\n");

// Get Claude's natural language response
const claudeText = data.content
  .filter(item => item.type === "text")
  .map(item => item.text)
  .join("\n");

// See what tools were called and with what inputs
const toolCalls = data.content
  .filter(item => item.type === "mcp_tool_use")
  .map(item => ({ name: item.name, input: item.input }));

Enter fullscreen mode Exit fullscreen mode


Quick Reference

What you want How to do it
Use a prebuilt connector Go to claude.ai Settings, connect the service
Browse available connectors claude.ai/directory/connectors
Connect a remote MCP server Add URL to claude_desktop_config.json or Settings
Build your own MCP server Use the MCP SDK, implement tools, expose via HTTPS
Submit to the directory claude.com/docs/connectors/building/submission
Use MCP in the API Pass mcp_servers array in your API request
Add UI to your connector Implement MCP Apps using the design guidelines

Resources


The Connectors Directory launched in July 2025 and already has over 200 integrations. The new consumer connectors (Uber, Spotify, Instacart, TripAdvisor, Resy, Audible, AllTrails, and others) were added in April 2026 and are available on all plans, with mobile in beta.

If you build something useful, submit it. The protocol is open and the directory is growing.