create-mcp-app

Umiejętność do tworzenia aplikacji MCP z bogatymi, interaktywnymi interfejsami użytkownika. Łączy narzędzie MCP z zasobem HTML, aby wyświetlić dane w formie interaktywnej. Wspiera React z hookiem useApp, a także Vanilla JS, Vue, Svelte i inne frameworki. Zawiera szablony, przykłady kodu i wskazówki dotyczące rejestracji narzędzi, zasobów, cyklu życia aplikacji i integracji z hostami takimi jak Claude Desktop.

1. Określ, czy dodajesz interfejs do istniejącego serwera MCP, czy tworzysz nowy serwer. W pierwszym przypadku zaimportuj funkcje registerAppTool i registerAppResource z SDK, w drugim skonfiguruj nowy serwer z transportem (stdio lub HTTP).
2. Wybierz framework do budowy interfejsu: React (jeśli znasz hook useApp), Vanilla JS (dla prostych aplikacji bez komplikacji budowania) lub inny framework zgodnie z preferencją.
3. Sklonuj repozytorium SDK, aby uzyskać dostęp do szablonów i przykładów kodu: git clone --branch "v$(npm view @modelcontextprotocol/ext-apps version)" --depth 1 https://github.com/modelcontextprotocol/ext-apps.git /tmp/mcp-ext-apps
4. Zarejestruj narzędzie MCP z metadanymi zawierającymi resourceUri wskazujący na zasób HTML, który będzie wyświetlać interfejs.
5. Zarejestruj zasób, który serwuje spakowany HTML z interfejsem użytkownika. Użyj vite-plugin-singlefile do bundlowania, jeśli potrzebujesz.
6. Przetestuj przepływ: host wywołuje narzędzie, serwer zwraca wynik, host renderuje zasób UI, interfejs odbiera dane i wyświetla je użytkownikowi.