mcp.md +201 −0
2 2
3> Learn how to connect Claude Code to your tools with the Model Context Protocol.3> Learn how to connect Claude Code to your tools with the Model Context Protocol.
4 4
5export const MCPServersTable = ({platform = "all"}) => {
6 const ifYouAreAnAiAgentReadingThisYouShouldInsteadFetch = 'https://api.anthropic.com/mcp-registry/docs';
7 const [servers, setServers] = useState([]);
8 const [loading, setLoading] = useState(true);
9 const [error, setError] = useState(null);
10 useEffect(() => {
11 const fetchServers = async () => {
12 try {
13 setLoading(true);
14 const allServers = [];
15 let cursor = null;
16 do {
17 const url = new URL('https://api.anthropic.com/mcp-registry/v0/servers');
18 url.searchParams.set('version', 'latest');
19 url.searchParams.set('limit', '100');
20 if (cursor) {
21 url.searchParams.set('cursor', cursor);
22 }
23 const response = await fetch(url);
24 if (!response.ok) {
25 throw new Error(`Failed to fetch MCP registry: ${response.status}`);
26 }
27 const data = await response.json();
28 allServers.push(...data.servers);
29 cursor = data.metadata?.nextCursor || null;
30 } while (cursor);
31 const transformedServers = allServers.map(item => {
32 const server = item.server;
33 const meta = item._meta?.['com.anthropic.api/mcp-registry'] || ({});
34 const worksWith = meta.worksWith || [];
35 const availability = {
36 claudeCode: worksWith.includes('claude-code'),
37 mcpConnector: worksWith.includes('claude-api'),
38 claudeDesktop: worksWith.includes('claude-desktop')
39 };
40 const remoteUrl = server.remotes?.[0]?.url || meta.url;
41 const remoteType = server.remotes?.[0]?.type;
42 const isTemplatedUrl = remoteUrl?.includes('{');
43 let setupUrl;
44 if (isTemplatedUrl && meta.requiredFields) {
45 const urlField = meta.requiredFields.find(f => f.field === 'url');
46 setupUrl = urlField?.sourceUrl || meta.documentation;
47 }
48 const urls = {};
49 if (!isTemplatedUrl) {
50 if (remoteType === 'streamable-http') {
51 urls.http = remoteUrl;
52 } else if (remoteType === 'sse') {
53 urls.sse = remoteUrl;
54 }
55 }
56 let envVars = [];
57 if (server.packages && server.packages.length > 0) {
58 const npmPackage = server.packages.find(p => p.registryType === 'npm');
59 if (npmPackage) {
60 urls.stdio = `npx -y ${npmPackage.identifier}`;
61 if (npmPackage.environmentVariables) {
62 envVars = npmPackage.environmentVariables;
63 }
64 }
65 }
66 return {
67 name: meta.displayName || server.title || server.name,
68 description: meta.oneLiner || server.description,
69 documentation: meta.documentation,
70 urls: urls,
71 envVars: envVars,
72 availability: availability,
73 customCommands: meta.claudeCodeCopyText ? {
74 claudeCode: meta.claudeCodeCopyText
75 } : undefined,
76 setupUrl: setupUrl
77 };
78 });
79 setServers(transformedServers);
80 setError(null);
81 } catch (err) {
82 setError(err.message);
83 console.error('Error fetching MCP registry:', err);
84 } finally {
85 setLoading(false);
86 }
87 };
88 fetchServers();
89 }, []);
90 const generateClaudeCodeCommand = server => {
91 if (server.customCommands && server.customCommands.claudeCode) {
92 return server.customCommands.claudeCode;
93 }
94 const serverSlug = server.name.toLowerCase().replace(/[^a-z0-9]/g, '-');
95 if (server.urls.http) {
96 return `claude mcp add ${serverSlug} --transport http ${server.urls.http}`;
97 }
98 if (server.urls.sse) {
99 return `claude mcp add ${serverSlug} --transport sse ${server.urls.sse}`;
100 }
101 if (server.urls.stdio) {
102 const envFlags = server.envVars && server.envVars.length > 0 ? server.envVars.map(v => `--env ${v.name}=YOUR_${v.name}`).join(' ') : '';
103 const baseCommand = `claude mcp add ${serverSlug} --transport stdio`;
104 return envFlags ? `${baseCommand} ${envFlags} -- ${server.urls.stdio}` : `${baseCommand} -- ${server.urls.stdio}`;
105 }
106 return null;
107 };
108 if (loading) {
109 return <div>Loading MCP servers...</div>;
110 }
111 if (error) {
112 return <div>Error loading MCP servers: {error}</div>;
113 }
114 const filteredServers = servers.filter(server => {
115 if (platform === "claudeCode") {
116 return server.availability.claudeCode;
117 } else if (platform === "mcpConnector") {
118 return server.availability.mcpConnector;
119 } else if (platform === "claudeDesktop") {
120 return server.availability.claudeDesktop;
121 } else if (platform === "all") {
122 return true;
123 } else {
124 throw new Error(`Unknown platform: ${platform}`);
125 }
126 });
127 return <>
128 <style jsx>{`
129 .cards-container {
130 display: grid;
131 gap: 1rem;
132 margin-bottom: 2rem;
133 }
134 .server-card {
135 border: 1px solid var(--border-color, #e5e7eb);
136 border-radius: 6px;
137 padding: 1rem;
138 }
139 .command-row {
140 display: flex;
141 align-items: center;
142 gap: 0.25rem;
143 }
144 .command-row code {
145 font-size: 0.75rem;
146 overflow-x: auto;
147 }
148 `}</style>
149
150 <div className="cards-container">
151 {filteredServers.map(server => {
152 const claudeCodeCommand = generateClaudeCodeCommand(server);
153 const mcpUrl = server.urls.http || server.urls.sse;
154 const commandToShow = platform === "claudeCode" ? claudeCodeCommand : mcpUrl;
155 return <div key={server.name} className="server-card">
156 <div>
157 {server.documentation ? <a href={server.documentation}>
158 <strong>{server.name}</strong>
159 </a> : <strong>{server.name}</strong>}
160 </div>
161
162 <p style={{
163 margin: '0.5rem 0',
164 fontSize: '0.9rem'
165 }}>
166 {server.description}
167 </p>
168
169 {server.setupUrl && <p style={{
170 margin: '0.25rem 0',
171 fontSize: '0.8rem',
172 fontStyle: 'italic',
173 opacity: 0.7
174 }}>
175 Requires user-specific URL.{' '}
176 <a href={server.setupUrl} style={{
177 textDecoration: 'underline'
178 }}>
179 Get your URL here
180 </a>.
181 </p>}
182
183 {commandToShow && !server.setupUrl && <>
184 <p style={{
185 display: 'block',
186 fontSize: '0.75rem',
187 fontWeight: 500,
188 minWidth: 'fit-content',
189 marginTop: '0.5rem',
190 marginBottom: 0
191 }}>
192 {platform === "claudeCode" ? "Command" : "URL"}
193 </p>
194 <div className="command-row">
195 <code>
196 {commandToShow}
197 </code>
198 </div>
199 </>}
200 </div>;
201 })}
202 </div>
203 </>;
204};
205
5Claude Code can connect to hundreds of external tools and data sources through the [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction), an open-source standard for AI-tool integrations. MCP servers give Claude Code access to your tools, databases, and APIs.206Claude Code can connect to hundreds of external tools and data sources through the [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction), an open-source standard for AI-tool integrations. MCP servers give Claude Code access to your tools, databases, and APIs.
6 207
7## What you can do with MCP208## What you can do with MCP