index.html•7.48 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Netlify example: Serverless functions</title>
<meta name="description" content="A 'hello world' example of using Netlify Functions to add serverless functions to your web project.">
<link rel="preload" href="https://example-styles.netlify.app/fonts/PacaembuVar-latin.woff2" as="font" type="font/woff2" />
<link rel="preload" href="https://example-styles.netlify.app/fonts/MulishVar-latin.woff2" as="font" type="font/woff2" />
<link rel="stylesheet" href="https://example-styles.netlify.app/styles.css">
</head>
<body>
<header>
<nav>
<a href="https://www.netlify.com/">
<img src="https://example-styles.netlify.app/images/logo-netlify-small-monochrome-darkmode.svg" class="nf-logo" alt="Netlify">
</a>
</nav>
<section>
<h1>MCP with Express</h1>
<p>
A starter example for using <a href="https://expressjs.com/">Express</a> with Netlify to add serverless MCP to your project.
</p>
</section>
</header>
<hr>
<main>
<section>
<h2>Model Context Protocol (MCP)</h2>
<p>
<a href="https://modelcontextprotocol.io" target="_blank">MCP</a> is a lightweight protocol built to allow AI agents/clients to interact with servers to provide dynamic content, prompting, and tool calling.
This is very important for websites wanting to provide a great <a href="https://agentexperience.ax?utm_source=hono-mcp-guide&utm_medium=web&utm_content=example-hello-functions" target="_blank">agent experience (AX)</a> through allowing agents to
work dynamically with information and capabilities on the server.
</p>
</section>
<section>
<h2>Express</h2>
<p>
<a href="https://expressjs.com/">Express</a> is a minimal and flexible Node.js web application framework that provides a robust set of features to develop web applications.
</p>
</section>
<section>
<h2>Try out this example</h2>
<h3>Using an MCP Client</h3>
<p>Provide the following configuration to your MCP client. After connecting, you will see the tools, prompts, resources, etc. available to the agent.</p>
<pre><code>{
"mcpServers": {
"express-mcp": {
"command": "npx",
"args": [
"mcp-remote@next",
"https://mcp-example-express.netlify.app/mcp"
]
}
}
}</code></pre>
<h3>Using the MCP Inspector</h3>
<p>MCP comes with an <a href="https://github.com/modelcontextprotocol/inspector">inspector tool</a> for testing the server locally or remotely. Run the following command in your terminal to use the inspector. After connecting, you will see the tools, prompts, resources, etc. available to the agent.</p>
<pre><code>npx @modelcontextprotocol/inspector npx mcp-remote@next https://mcp-example-express.netlify.app/mcp</code></pre>
</section>
<hr>
<section>
<h2>Deploy your own</h2>
<p>
A great place to start is to clone and deploy your own copy of this example. You can do that by clicking the button below.
</p>
<p>
<a href="https://app.netlify.com/start/deploy?repository=https://github.com/netlify/examples/&create_from_path=examples/mcp/express-mcp&utm_campaign=dx-examples"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify"></a>
</p>
<p><small>Clicking the button will clone <a href="https://github.com/netlify/examples/tree/main/examples/mcp/express-mcp">this example</a> from <a href="https://github.com/netlify/examples">the examples repo</a> and deploy it as a new site on <a href="https://netlify.com/?utm_campaign=dx-examples">Netlify</a></small></p>
</section>
<hr>
<section>
<h2>More information</h2>
<ul>
<li><a href="https://modelcontextprotocol.io/">Model Context Protocol (MCP)</a></li>
<li><a href="https://expressjs.com/">Express</a></li>
<li><a href="https://docs.netlify.com/functions/overview/?utm_campaign=dx-examples&utm_source=example-site&utm_medium=web&utm_content=example-mcp-express">Docs: Netlify Functions</a></li>
<li><a href="https://agentexperience.ax?utm_source=express-mcp-guide&utm_medium=web&utm_content=example-mcp-express">Agent Experience (AX)</a></li>
</ul>
</section>
</main>
<footer>
<div>
<a href="https://www.netlify.com/"><img src="https://example-styles.netlify.app/images/logo-netlify-small-monochrome-lightmode.svg" class="nf-logo" alt="Netlify logo"></a>
<div>
<!-- <a href="https://youtube.com/Netlify"><Icon name="youtube" title="YouTube" width="24" height="24" /></a>
<a href="https://x.com/Netlify"><Icon name="twitter" title="Twitter" width="24" height="24" /></a>
<a href="https://linkedin.com/company/Netlify"><Icon name="linkedin" title="LinkedIn" width="24" height="24" /></a>
<a href="https://answers.netlify.com"><Icon name="discourse" title="Forums" width="24" height="24" /></a> -->
</div>
</div>
<div class="links-container">
<section>
<h3>Developers</h3>
<ul role="list">
<li><a href="https://developers.netlify.com/">Netlify Developers</a></li>
<li><a href="https://developers.netlify.com/sdk/">Netlify SDK</a></li>
<li><a href="https://developers.netlify.com/cli/">Netlify CLI</a></li>
<li><a href="https://developers.netlify.com/feed/">Activity Feed</a></li>
<li><a href="https://docs.netlify.com">Documentation</a></li>
</ul>
</section>
<section>
<h3>Company</h3>
<ul role="list">
<li><a href="https://netlify.com/blog/">Blog</a></li>
<li><a href="https://netlify.com/about/">About</a></li>
<li><a href="https://netlify.com/careers/">Careers</a></li>
<li><a href="https://netlify.com/conference/">Compose Conference</a></li>
<li><a href="https://netlify.com/press/">Press</a></li>
<li><a href="https://swag.netlify.com/">Netlify Store</a></li>
<li><a href="https://netlify.com/sustainability/">Sustainability</a></li>
</ul>
</section>
<section>
<h3>Contact Us</h3>
<ul role="list">
<li><a id="cta-footer-sales" href="https://netlify.com/enterprise/contact/">Sales</a></li>
<li><a id="cta-footer-support" href="https://netlify.com/support/">Support</a></li>
<li><a id="cta-footer-status" href="https://netlifystatus.com/">Status</a></li>
<li><a id="cta-footer-answers" href="https://answers.netlify.com/">Forums</a></li>
<li><a id="cta-footer-agencyDirectory" href="https://netlify.com/agency-directory/">Hire an Agency</a></li>
</ul>
</section>
</div>
<small>
<ul>
<li><a href="https://netlify.com/trust-center/">Trust Center</a></li>
<li><a href="https://netlify.com/privacy/">Privacy</a></li>
<li><a href="https://netlify.com/security/">Security</a></li>
<li><a href="https://netlify.com/gdpr-ccpa/">GDPR/CCPA</a></li>
<li><a href="mailto:fraud@netlify.com?subject=Abuse%20report&body=Please%20include%20the%20site%20URL%20and%20reason%20for%20your%20report%2C%20and%20we%20will%20reply%20promptly.">Abuse</a></li>
</ul>
<div>© 2025 Netlify</div>
</small>
</footer>
</body>
</html>