Skip to content

Clean up example templates for guidelines #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MiguelsPizza merged 1 commit into from
Nov 23, 2025
Merged

Clean up example templates for guidelines #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 0 additions & 8 deletions apps/create-webmcp-app/templates/react/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,9 @@ import { z } from 'zod';
* ```
*/
export default function App() {
// Track connection to parent window
const [isReady, setIsReady] = useState(false);
const [message, setMessage] = useState('Hello from WebMCP Template!');

// Listen for parent ready event
useEffect(() => {
const handleMessage = (event: MessageEvent) => {
if (event.data?.type === 'parent_ready') {
Expand All @@ -46,7 +44,6 @@ export default function App() {

window.addEventListener('message', handleMessage);

// Notify parent we're ready
window.parent.postMessage({ type: 'iframe_ready' }, '*');

return () => window.removeEventListener('message', handleMessage);
Expand Down Expand Up @@ -109,7 +106,6 @@ export default function App() {
},
});

// Handle UI button click
const handleUpdateClick = useCallback(() => {
const newMessage = prompt('Enter new message:');
if (newMessage) {
Expand All @@ -126,7 +122,6 @@ export default function App() {
<div className="text-center">
<h1 className="mb-4 text-3xl font-bold text-gray-900">WebMCP Template</h1>

{/* Connection status */}
<div className="mb-6">
{isReady ? (
<div className="inline-flex items-center gap-2 rounded-full bg-green-100 px-4 py-2 text-sm text-green-800">
Expand All @@ -141,12 +136,10 @@ export default function App() {
)}
</div>

{/* Current message display */}
<div className="rounded-lg bg-blue-50 p-6 mb-6">
<p className="text-xl text-gray-700">{message}</p>
</div>

{/* Action buttons */}
<div className="flex gap-4 justify-center">
<button
onClick={handleUpdateClick}
Expand All @@ -164,7 +157,6 @@ export default function App() {
</button>
</div>

{/* Info about registered tools */}
<div className="mt-8 rounded-lg bg-gray-50 p-4 text-left text-sm text-gray-600">
<h2 className="font-semibold mb-2">Registered WebMCP Tools:</h2>
<ul className="space-y-1">
Expand Down
5 changes: 1 addition & 4 deletions apps/create-webmcp-app/templates/react/src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,14 @@ import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import './index.css';

// Initialize WebMCP transport
// This sets up communication with the parent window via postMessage
initializeWebModelContext({
transport: {
tabServer: {
allowedOrigins: ['*'], // Allow any origin for iframe communication
allowedOrigins: ['*'],
},
},
});

// Mount React app
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
Expand Down
5 changes: 0 additions & 5 deletions apps/create-webmcp-app/templates/react/worker/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ export { TemplateMCP };
*/
const app = new Hono<{ Bindings: Env }>();

// Apply CORS middleware to all routes
app.use(
'/*',
cors({
Expand All @@ -22,7 +21,6 @@ app.use(
})
);

// Route SSE (Server-Sent Events) endpoints
app.all('/sse/*', async (c) => {
return await TemplateMCP.serveSSE('/sse').fetch(c.req.raw, c.env, c.executionCtx);
});
Expand All @@ -31,17 +29,14 @@ app.all('/sse', async (c) => {
return await TemplateMCP.serveSSE('/sse').fetch(c.req.raw, c.env, c.executionCtx);
});

// Route MCP protocol endpoint
app.all('/mcp', async (c) => {
return await TemplateMCP.serve('/mcp').fetch(c.req.raw, c.env, c.executionCtx);
});

// 404 handler for unmatched routes
app.notFound((c) => {
return c.json({ error: 'Not found', path: c.req.path }, 404);
});

// Error handler
app.onError((error, c) => {
console.error('Worker error:', error);
return c.json(
Expand Down
3 changes: 0 additions & 3 deletions apps/create-webmcp-app/templates/react/worker/mcpServer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,6 @@ Use this as a starting point to build your own interactive apps!`,
{},
async () => {
try {
// Construct iframe URL from environment variable
// In dev: http://localhost:8888
// In prod: https://your-worker.workers.dev
const iframeUrl = `${this.env.APP_URL}/`;

const uiResource = createUIResource({
Expand Down
16 changes: 0 additions & 16 deletions apps/create-webmcp-app/templates/vanilla/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebMCP Template - Vanilla</title>

<!-- Tailwind CSS via CDN -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- @mcp-b/global - IIFE version (no build required!) -->
<script src="https://unpkg.com/@mcp-b/global@latest/dist/index.iife.js"></script>

<style>
Expand All @@ -22,20 +20,17 @@
<div class="text-center max-w-2xl">
<h1 class="mb-4 text-3xl font-bold text-gray-900">WebMCP Template (Vanilla)</h1>

<!-- Connection status -->
<div id="status" class="mb-6">
<div class="inline-flex items-center gap-2 rounded-full bg-yellow-100 px-4 py-2 text-sm text-yellow-800">
<span class="h-2 w-2 rounded-full bg-yellow-600"></span>
Initializing...
</div>
</div>

<!-- Current message display -->
<div class="rounded-lg bg-blue-50 p-6 mb-6">
<p id="message" class="text-xl text-gray-700">Hello from WebMCP Template!</p>
</div>

<!-- Action buttons -->
<div class="flex gap-4 justify-center">
<button
id="btn-update"
Expand All @@ -51,7 +46,6 @@ <h1 class="mb-4 text-3xl font-bold text-gray-900">WebMCP Template (Vanilla)</h1>
</button>
</div>

<!-- Info about registered tools -->
<div class="mt-8 rounded-lg bg-gray-50 p-4 text-left text-sm text-gray-600 border border-gray-200">
<h2 class="font-semibold mb-2">Registered WebMCP Tools:</h2>
<ul class="space-y-1">
Expand All @@ -63,19 +57,15 @@ <h2 class="font-semibold mb-2">Registered WebMCP Tools:</h2>
</div>
</div>

<!-- Application Logic -->
<script>
// App state
let isReady = false;
let message = 'Hello from WebMCP Template!';

// DOM elements
const statusEl = document.getElementById('status');
const messageEl = document.getElementById('message');
const btnUpdate = document.getElementById('btn-update');
const btnReset = document.getElementById('btn-reset');

// Update UI based on state
function updateUI() {
messageEl.textContent = message;

Expand All @@ -100,7 +90,6 @@ <h2 class="font-semibold mb-2">Registered WebMCP Tools:</h2>
}
}

// Listen for parent ready event
window.addEventListener('message', (event) => {
if (event.data?.type === 'parent_ready') {
isReady = true;
Expand All @@ -109,10 +98,8 @@ <h2 class="font-semibold mb-2">Registered WebMCP Tools:</h2>
}
});

// Notify parent we're ready
window.parent.postMessage({ type: 'iframe_ready' }, '*');

// Button event handlers
btnUpdate.addEventListener('click', () => {
const newMessage = prompt('Enter new message:');
if (newMessage) {
Expand All @@ -126,8 +113,6 @@ <h2 class="font-semibold mb-2">Registered WebMCP Tools:</h2>
updateUI();
});

// Register WebMCP tools using the W3C API
// window.navigator.modelContext is already available via the IIFE script!
window.navigator.modelContext.provideContext({
tools: [
{
Expand Down Expand Up @@ -195,7 +180,6 @@ <h2 class="font-semibold mb-2">Registered WebMCP Tools:</h2>
]
});

// Initial UI update
updateUI();

console.log('[App] WebMCP tools registered successfully');
Expand Down
5 changes: 0 additions & 5 deletions apps/create-webmcp-app/templates/vanilla/worker/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ export { VanillaTemplateMCP };
*/
const app = new Hono<{ Bindings: Env }>();

// Apply CORS middleware to all routes
app.use(
'/*',
cors({
Expand All @@ -22,7 +21,6 @@ app.use(
})
);

// Route SSE (Server-Sent Events) endpoints
app.all('/sse/*', async (c) => {
return await VanillaTemplateMCP.serveSSE('/sse').fetch(c.req.raw, c.env, c.executionCtx);
});
Expand All @@ -31,17 +29,14 @@ app.all('/sse', async (c) => {
return await VanillaTemplateMCP.serveSSE('/sse').fetch(c.req.raw, c.env, c.executionCtx);
});

// Route MCP protocol endpoint
app.all('/mcp', async (c) => {
return await VanillaTemplateMCP.serve('/mcp').fetch(c.req.raw, c.env, c.executionCtx);
});

// 404 handler for unmatched routes
app.notFound((c) => {
return c.json({ error: 'Not found', path: c.req.path }, 404);
});

// Error handler
app.onError((error, c) => {
console.error('Worker error:', error);
return c.json(
Expand Down
1 change: 0 additions & 1 deletion apps/create-webmcp-app/templates/vanilla/worker/mcpServer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,6 @@ Perfect for learning WebMCP or building simple interactive tools!`,
{},
async () => {
try {
// Construct iframe URL from environment variable
const iframeUrl = `${this.env.APP_URL}/`;

const uiResource = createUIResource({
Expand Down
Loading