index.html•6.72 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom MCP Server on Databricks Apps</title>
<script src="https://cdn.tailwindcss.com"></script>
<!-- Highlight.js CSS and JS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
hljs.highlightAll();
});
</script>
</head>
<body class="bg-gray-900 text-gray-100 font-sans">
<!-- Hero Section -->
<div class="py-12 sm:py-16 h-screen flex items-center justify-center">
<div class="max-w-3xl mx-auto px-4 text-center">
<!-- Logos Placeholder -->
<div class="flex justify-center items-center gap-8 mb-8">
<!-- Databricks Logo -->
<div class="w-24 h-24 rounded-full flex items-center justify-center">
<img src="https://cdn.bfldr.com/9AYANS2F/at/k8bgnnxhb4bggjk88r4x9snf/databricks-symbol-color.svg?auto=webp&format=png"
alt="Databricks Logo" class="w-20 h-20">
</div>
<!-- MCP Logo -->
<div class="w-24 h-24 rounded-full flex items-center justify-center">
<img src="https://avatars.githubusercontent.com/u/182288589?s=200&v=4" alt="MCP Logo"
class="w-20 h-20 rounded-full">
</div>
</div>
<h1 class="text-4xl font-bold text-white sm:text-5xl text-balance">
Custom Model Context Protocol Server on Databricks Apps
</h1>
<p class="mt-6 text-xl text-gray-300">
Your custom model server is up and running on Databricks Apps.
</p>
<div class="mt-10">
<a href="#connect"
class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
Get Started
</a>
</div>
</div>
</div>
<!-- Connection Section -->
<div id="connect" class="py-12">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-2xl font-bold text-center text-white">Connect to the Server</h2>
<div class="mt-10 bg-gray-800 shadow overflow-hidden sm:rounded-lg">
<div class="px-4 py-5 sm:px-6">
<h3 class="text-lg leading-6 font-medium text-white">Connection Details</h3>
</div>
<div class="border-t border-gray-700 px-4 py-5 sm:p-6">
<dl class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
<div class="sm:col-span-1">
<dt class="text-sm font-medium text-gray-400">
Server URL
</dt>
<dd class="mt-1 text-sm text-gray-100">
<code
class="bg-gray-900 px-2 py-1 rounded">https://your.app.url.databricksapps.com</code>
</dd>
</div>
<div class="sm:col-span-1">
<dt class="text-sm font-medium text-gray-400">
Transport <Table></Table>
</dt>
<dd class="mt-1 text-sm text-gray-100">
<code class="bg-gray-900 px-2 py-1 rounded">
Streamable HTTP
</code>
</dd>
</div>
<div class="sm:col-span-2">
<dt class="text-sm font-medium text-gray-400">
Example Connection (Python)
</dt>
<dd class="mt-1 text-sm text-gray-100">
<pre class="bg-gray-900 p-3 rounded overflow-x-auto">
<code class="language-python">
from databricks.sdk import WorkspaceClient
from databricks_mcp import DatabricksOAuthClientProvider
from mcp.client.streamable_http import streamablehttp_client as connect
from mcp import ClientSession
client = WorkspaceClient()
async def main():
# Connect to a streamable HTTP server
app_url = "https://your.app.url.databricksapps.com/mcp/"
async with connect(app_url, auth=DatabricksOAuthClientProvider(client)) as (
read_stream,
write_stream,
_,
):
# Create a session using the client streams
async with ClientSession(read_stream, write_stream) as session:
# Initialize the connection
await session.initialize()
# Call a tool
tool_result = await session.call_tool("echo", {"message": "hello"})
</code>
</pre>
</dd>
</div>
<div class="sm:col-span-2">
<dt class="text-sm font-medium text-gray-400">
Or use your favourite tool
</dt>
<dd class="mt-1 text-sm text-gray-100">
You can also connect using tools like <strong>Claude</strong>, <strong>MCP
Inspector</strong>, or any other compatible client.
</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
<div class="py-12 bg-gray-800">
<div class="max-w-3xl mx-auto px-4 text-center">
<h2 class="text-2xl font-bold text-white mb-4">Documentation</h2>
<p class="text-lg text-gray-300 mb-6">
Learn more about MCP on Databricks Apps and how to deploy your own server.
</p>
<a href="https://github.com/databrickslabs/mcp" target="_blank" rel="noopener"
class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
View Databricks Labs MCP on GitHub
</a>
</div>
</div>
</body>
</html>