2109dccadbRewrites the Quickstart tutorial to provide a more focused, step-by-step introduction to building MCP Apps. The guide now uses synced code fences that pull from `examples/quickstart/`, ensuring all code shown in the documentation is type-checked and tested. Key improvements: - Clearer project setup instructions with explicit commands - Streamlined explanations of the tool + resource registration pattern - Added screenshot showing the completed app - E2E test coverage validates the example works end-to-end Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
26 lines
946 B
TypeScript
26 lines
946 B
TypeScript
import { App } from "@modelcontextprotocol/ext-apps";
|
|
|
|
// Get element references
|
|
const serverTimeEl = document.getElementById("server-time")!;
|
|
const getTimeBtn = document.getElementById("get-time-btn")!;
|
|
|
|
// Create app instance
|
|
const app = new App({ name: "Get Time App", version: "1.0.0" });
|
|
|
|
// Handle tool results from the server. Set before `app.connect()` to avoid
|
|
// missing the initial tool result.
|
|
app.ontoolresult = (result) => {
|
|
const time = result.content?.find((c) => c.type === "text")?.text;
|
|
serverTimeEl.textContent = time ?? "[ERROR]";
|
|
};
|
|
|
|
// Wire up button click
|
|
getTimeBtn.addEventListener("click", async () => {
|
|
// `app.callServerTool()` lets the UI request fresh data from the server
|
|
const result = await app.callServerTool({ name: "get-time", arguments: {} });
|
|
const time = result.content?.find((c) => c.type === "text")?.text;
|
|
serverTimeEl.textContent = time ?? "[ERROR]";
|
|
});
|
|
|
|
// Connect to host
|
|
app.connect();
|