mirror of
https://github.com/PrefectHQ/fastmcp.git
synced 2026-09-01 12:03:19 +02:00
df932e1bcb
- Create working PyScript demos using actual FastMCP patterns (not mocks)
- Add browser-compatible MCP server with DOM access and session tools
- Include comprehensive integration guide and test suite
- Enable web applications to provide LLM context through MCP
🤖 Generated with Claude Code
Co-authored-by: William Easton <strawgate@users.noreply.github.com>
183 lines
No EOL
5.9 KiB
HTML
183 lines
No EOL
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>FastMCP Browser Demo with PyScript</title>
|
|
<link rel="stylesheet" href="https://pyscript.net/releases/2025.8.1/core.css">
|
|
<script type="module" src="https://pyscript.net/releases/2025.8.1/core.js"></script>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.container {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
margin-bottom: 20px;
|
|
}
|
|
.demo-section {
|
|
margin: 20px 0;
|
|
padding: 15px;
|
|
background: #f8f9fa;
|
|
border-left: 4px solid #007bff;
|
|
}
|
|
pre {
|
|
background: #f1f1f1;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
overflow-x: auto;
|
|
}
|
|
.output {
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
background: #e8f5e8;
|
|
border-radius: 4px;
|
|
border-left: 4px solid #28a745;
|
|
}
|
|
button {
|
|
background: #007bff;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
}
|
|
button:hover {
|
|
background: #0056b3;
|
|
}
|
|
.status {
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
border-radius: 4px;
|
|
}
|
|
.status.loading {
|
|
background: #fff3cd;
|
|
border: 1px solid #ffeaa7;
|
|
}
|
|
.status.success {
|
|
background: #d4edda;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
.status.error {
|
|
background: #f8d7da;
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🚀 FastMCP Browser Demo with PyScript</h1>
|
|
<p>This demo shows how to use <strong>real FastMCP</strong> with PyScript for web-based MCP servers.</p>
|
|
|
|
<div class="demo-section">
|
|
<h3>📝 Page Content Analyzer</h3>
|
|
<p>Extract and analyze content from the current web page for LLM context.</p>
|
|
<button onclick="analyzePageContent()">Analyze Page Content</button>
|
|
<div id="content-output" class="output" style="display:none;"></div>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h3>🔧 DOM Manipulation Tools</h3>
|
|
<p>Tools that can interact with web page elements.</p>
|
|
<button onclick="getDOMInfo()">Get DOM Info</button>
|
|
<button onclick="getUserContext()">Get User Context</button>
|
|
<div id="dom-output" class="output" style="display:none;"></div>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h3>🌐 Browser-Specific Tools</h3>
|
|
<p>Tools that leverage browser APIs for MCP functionality.</p>
|
|
<button onclick="getSessionInfo()">Get Session Info</button>
|
|
<button onclick="testLocalStorage()">Test Local Storage</button>
|
|
<div id="browser-output" class="output" style="display:none;"></div>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h3>📊 MCP Server Status</h3>
|
|
<div id="status-output">
|
|
<div class="status loading">Initializing FastMCP server...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<py-config>
|
|
packages = [
|
|
"pydantic",
|
|
"typing-extensions",
|
|
"json",
|
|
"datetime"
|
|
]
|
|
</py-config>
|
|
|
|
<script type="py" src="browser_mcp_server.py"></script>
|
|
|
|
<script>
|
|
function analyzePageContent() {
|
|
showOutput('content-output');
|
|
pyodide.runPython(`
|
|
try:
|
|
result = mcp_tools.analyze_page_content()
|
|
display_result('content-output', result)
|
|
except Exception as e:
|
|
display_error('content-output', str(e))
|
|
`);
|
|
}
|
|
|
|
function getDOMInfo() {
|
|
showOutput('dom-output');
|
|
pyodide.runPython(`
|
|
try:
|
|
result = mcp_tools.get_dom_info()
|
|
display_result('dom-output', result)
|
|
except Exception as e:
|
|
display_error('dom-output', str(e))
|
|
`);
|
|
}
|
|
|
|
function getUserContext() {
|
|
showOutput('dom-output');
|
|
pyodide.runPython(`
|
|
try:
|
|
result = mcp_tools.get_user_context()
|
|
display_result('dom-output', result)
|
|
except Exception as e:
|
|
display_error('dom-output', str(e))
|
|
`);
|
|
}
|
|
|
|
function getSessionInfo() {
|
|
showOutput('browser-output');
|
|
pyodide.runPython(`
|
|
try:
|
|
result = mcp_tools.get_session_info()
|
|
display_result('browser-output', result)
|
|
except Exception as e:
|
|
display_error('browser-output', str(e))
|
|
`);
|
|
}
|
|
|
|
function testLocalStorage() {
|
|
showOutput('browser-output');
|
|
pyodide.runPython(`
|
|
try:
|
|
result = mcp_tools.test_local_storage()
|
|
display_result('browser-output', result)
|
|
except Exception as e:
|
|
display_error('browser-output', str(e))
|
|
`);
|
|
}
|
|
|
|
function showOutput(elementId) {
|
|
document.getElementById(elementId).style.display = 'block';
|
|
document.getElementById(elementId).innerHTML = '<div class="status loading">Processing...</div>';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |