ros/n8n-mcp
1
0
Fork 0
mirror of https://github.com/czlonkowski/n8n-mcp.git synced 2026-03-03 17:13:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: use official ext-apps useApp hook to fix blank MCP App rendering (#578)

Browse Source 
The custom useToolData hook had lifecycle issues that prevented the UI
from rendering in Claude Desktop/web: no appInfo in App constructor,
unhandled connect() Promise, app.close() on unmount conflicting with
React Strict Mode. Switched to the official useApp hook from
@modelcontextprotocol/ext-apps/react which handles initialization
handshake, handler registration, and cleanup correctly.

Conceived by Romuald Członkowski - https://www.aiadvisors.pl/en

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Romuald Członkowski
2026-02-07 16:25:27 +01:00
committed by GitHub
parent 38aa70261a
commit a57b400bd0
5 changed files with 54 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
ui-apps/src/apps/validation-summary/App.tsx
View File

@@ -5,10 +5,18 @@ import { useToolData } from '@shared/hooks/useToolData';
import type { ValidationSummaryData } from '@shared/types';
export default function App() {
const data = useToolData<ValidationSummaryData>();
const { data, error, isConnected } = useToolData<ValidationSummaryData>();
if (error) {
return <div style={{ padding: '16px', color: '#ef4444' }}>Error: {error}</div>;
}
if (!isConnected) {
return <div style={{ padding: '16px', color: '#9ca3af' }}>Connecting...</div>;
}
if (!data) {
return <div style={{ padding: '16px', color: 'var(--n8n-text-muted)' }}>Loading...</div>;
return <div style={{ padding: '16px', color: '#9ca3af' }}>Waiting for data...</div>;
}
return (