{"passport":{"unfragile":{"@version":"1.0","version":"2026-05","artifact":{"id":"npm_npm-data360mcp-ui","slug":"npm-data360mcp-ui","name":"@data360/mcp-ui","type":"mcp","url":"https://www.npmjs.com/package/@data360/mcp-ui","page_url":"https://unfragile.ai/npm-data360mcp-ui","categories":["mcp-servers"],"tags":["data360","mcp","world-bank","vega-lite","search"],"pricing":{"model":"open_source","free":true,"starting_price":null},"status":"active","verified":false},"capabilities":[{"id":"npm_npm-data360mcp-ui__cap_0","uri":"capability://image.visual.mcp.native.chart.visualization.with.vega.lite.rendering","name":"mcp-native chart visualization with vega-lite rendering","description":"Renders tabular data outputs from Data360 MCP tools as interactive charts using Vega-Lite specifications. The framework accepts structured data from MCP protocol messages, transforms them into Vega-Lite JSON schemas, and mounts React components that handle responsive rendering, interactivity (filtering, zooming), and export capabilities. Built as a thin React wrapper around Vega-Lite's declarative grammar, enabling World Bank datasets and statistical outputs to be visualized without custom charting logic.","intents":["Display economic indicators and development metrics from World Bank data as interactive charts within an MCP client","Render time-series data, comparisons, and distributions from Data360 tool outputs without writing custom D3 or Canvas code","Enable end-users to explore data interactively (hover tooltips, legend toggling, axis scaling) in a standardized UI surface"],"best_for":["Teams building MCP clients that consume Data360 tools and need standardized data visualization","Developers integrating World Bank datasets into LLM agent interfaces","Non-technical users exploring economic data through AI-powered query interfaces"],"limitations":["Limited to Vega-Lite's declarative specification — complex custom interactions or animations require Vega-Lite extension or wrapper code","No built-in support for 3D visualizations, geographic maps, or network graphs — only 2D statistical charts","Performance degrades with datasets >100k rows without data aggregation or sampling upstream in the MCP tool"],"requires":["React 16.8+ (hooks support)","Vega-Lite 5.x or higher","MCP server providing structured tabular output","Node.js 14+ for build tooling"],"input_types":["JSON (MCP tool output with tabular data structure)","Vega-Lite specification objects","CSV or structured arrays from Data360 endpoints"],"output_types":["SVG (exportable chart image)","Interactive HTML canvas with event handlers","PNG/PDF via Vega-Lite export plugins"],"categories":["image-visual","data-processing-analysis"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm_npm-data360mcp-ui__cap_1","uri":"capability://search.retrieval.search.results.card.ui.component.with.mcp.integration","name":"search results card ui component with mcp integration","description":"Provides a pre-built React card component that formats and displays search results returned from Data360 MCP search tools. The component handles result ranking, snippet generation, metadata display (source, relevance score, date), and click-through tracking. It abstracts away the styling and layout logic for presenting search hits in a consistent, accessible format compatible with MCP tool output schemas.","intents":["Display search results from Data360 tools in a standardized card layout within an MCP client UI","Show relevance scores, source attribution, and preview snippets for economic datasets or World Bank publications","Enable users to quickly scan and select relevant results without custom result-rendering code"],"best_for":["MCP client developers building search interfaces over World Bank or economic data","Teams integrating Data360 search tools into LLM agent chat interfaces","Developers needing accessible, mobile-responsive result cards without design work"],"limitations":["No built-in pagination or infinite scroll — requires parent component to manage result sets and load more logic","Limited customization of card layout and styling without forking component code","No native support for faceted search filters or result refinement — only displays pre-filtered results from MCP tool"],"requires":["React 16.8+","@data360/mcp-ui package installed","MCP server returning search results in Data360 schema format","CSS-in-JS or CSS modules for styling (component uses CSS classes)"],"input_types":["JSON (MCP search tool output with result array)","Objects with title, snippet, source, relevance_score, url fields"],"output_types":["React component (JSX)","HTML with semantic markup and ARIA labels","Click event handlers with result metadata"],"categories":["search-retrieval","text-generation-language"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm_npm-data360mcp-ui__cap_2","uri":"capability://tool.use.integration.mcp.tool.output.surface.abstraction.and.routing","name":"mcp tool output surface abstraction and routing","description":"Provides a framework-level abstraction that routes different MCP tool output types (charts, search results, tables, future surfaces) to appropriate React UI components. The framework inspects the MCP message schema or tool metadata, determines the output type, and mounts the corresponding pre-built surface component. This enables MCP clients to handle multiple tool types with a single integration point rather than conditional rendering logic scattered throughout the application.","intents":["Route different Data360 MCP tool outputs (chart tools, search tools, table tools) to the correct UI surface automatically","Add new output surface types (e.g., map visualizations, timeline views) without modifying client code that consumes the framework","Standardize how MCP tool outputs are presented across an entire application or agent interface"],"best_for":["MCP client developers building multi-tool interfaces that need consistent output handling","Teams building LLM agent UIs that call multiple Data360 tools with different output types","Developers wanting to decouple tool output rendering from business logic"],"limitations":["Routing logic is opinionated — may not match all custom MCP tool output schemas without extending the framework","No built-in support for custom output types — requires forking or extending the framework to add new surface types","Limited error handling for malformed MCP outputs — relies on parent component for validation and fallback UI"],"requires":["React 16.8+","@data360/mcp-ui package","MCP tools returning outputs in Data360 schema format","TypeScript 4.0+ (recommended for type safety)"],"input_types":["MCP tool output objects (JSON)","Tool metadata with output_type field","Vega-Lite specs, search result arrays, or table data"],"output_types":["React component (JSX)","Mounted UI surface matching output type","Error boundary fallback UI"],"categories":["tool-use-integration","image-visual"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm_npm-data360mcp-ui__cap_3","uri":"capability://image.visual.responsive.card.based.layout.system.for.mcp.outputs","name":"responsive card-based layout system for mcp outputs","description":"Provides a responsive grid/card layout system that automatically arranges chart cards, search result cards, and other output surfaces across different screen sizes. The system uses CSS Grid or Flexbox under the hood, with breakpoints for mobile, tablet, and desktop viewports. Cards are self-contained, scrollable, and maintain aspect ratios for charts, enabling MCP client UIs to work seamlessly on mobile devices and large displays without custom media query logic.","intents":["Display multiple MCP tool outputs (charts, search results) in a responsive grid that adapts to mobile, tablet, and desktop screens","Ensure chart cards maintain proper aspect ratios and readability across different viewport sizes","Build mobile-friendly MCP client interfaces without writing custom responsive CSS"],"best_for":["Teams building responsive MCP client web applications","Developers creating mobile-first LLM agent interfaces with Data360 tools","Non-technical designers needing pre-built responsive layouts"],"limitations":["Limited customization of grid behavior — breakpoints and column counts are fixed or require CSS override","No built-in support for drag-and-drop card reordering or custom layout modes","Performance may degrade with >20 cards on screen simultaneously without virtualization"],"requires":["React 16.8+","@data360/mcp-ui package","CSS support (CSS Grid or Flexbox)","Modern browser (Chrome 57+, Firefox 52+, Safari 10.1+)"],"input_types":["React components (chart cards, search result cards)","Array of output objects to render"],"output_types":["Responsive HTML layout (CSS Grid or Flexbox)","Mobile-optimized viewport","Scrollable card containers"],"categories":["image-visual","automation-workflow"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm_npm-data360mcp-ui__cap_4","uri":"capability://data.processing.analysis.data360.schema.validation.and.transformation","name":"data360 schema validation and transformation","description":"Validates incoming MCP tool outputs against Data360 schema specifications and transforms them into component-ready formats. The framework checks for required fields (title, data, metadata), type-checks values, and normalizes data structures before passing them to UI components. This prevents runtime errors from malformed MCP outputs and ensures consistent data shapes across different tool implementations.","intents":["Validate MCP tool outputs conform to Data360 schema before rendering UI components","Transform raw MCP outputs into normalized formats expected by chart and search result components","Catch schema mismatches early and provide developer-friendly error messages"],"best_for":["Teams building MCP clients that need to handle outputs from multiple Data360 tool implementations","Developers wanting to catch schema errors at the framework level rather than in components","Integrators validating third-party MCP tool outputs"],"limitations":["Validation is synchronous — no async validation for external schema sources","Limited error recovery — invalid outputs are rejected rather than partially recovered","Schema definitions are hard-coded in the framework — no dynamic schema loading from external sources"],"requires":["React 16.8+","@data360/mcp-ui package","MCP tool outputs in Data360 schema format","TypeScript 4.0+ (recommended for type definitions)"],"input_types":["JSON (raw MCP tool output)","Objects with Data360 schema structure"],"output_types":["Validated and transformed data objects","Validation error objects with field-level details","Normalized component-ready data structures"],"categories":["data-processing-analysis","safety-moderation"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm_npm-data360mcp-ui__cap_5","uri":"capability://safety.moderation.accessible.ui.components.with.aria.labels.and.semantic.html","name":"accessible ui components with aria labels and semantic html","description":"All card components and surfaces include built-in accessibility features: ARIA labels for interactive elements, semantic HTML (nav, article, section tags), keyboard navigation support, and color contrast compliance. The framework ensures that charts, search results, and other outputs are navigable via keyboard and screen readers, meeting WCAG 2.1 AA standards without requiring additional accessibility work from integrators.","intents":["Build accessible MCP client interfaces that work with screen readers and keyboard navigation","Ensure charts and search results are usable by users with visual or motor impairments","Meet accessibility compliance requirements (WCAG 2.1 AA) without custom accessibility implementation"],"best_for":["Teams building public-facing MCP clients with accessibility requirements","Organizations subject to accessibility compliance mandates (government, enterprise)","Developers wanting to avoid accessibility work by using pre-built accessible components"],"limitations":["Accessibility features are fixed — limited customization of ARIA labels or keyboard shortcuts","Chart interactivity (hover tooltips, zooming) may not be fully accessible to keyboard-only users without additional work","No built-in support for alternative text descriptions of charts — requires manual alt text provision"],"requires":["React 16.8+","@data360/mcp-ui package","Modern browser with ARIA support (all modern browsers)","Screen reader for testing (NVDA, JAWS, VoiceOver)"],"input_types":["React components with accessibility props","Chart data and metadata"],"output_types":["Semantic HTML with ARIA labels","Keyboard-navigable UI","Screen reader-friendly output"],"categories":["safety-moderation","image-visual"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm_npm-data360mcp-ui__cap_6","uri":"capability://data.processing.analysis.export.and.download.functionality.for.chart.and.data.outputs","name":"export and download functionality for chart and data outputs","description":"Provides built-in export capabilities for chart cards and search results: charts can be exported as SVG, PNG, or PDF; search results can be exported as CSV or JSON. The framework integrates with Vega-Lite's export plugins for charts and uses standard browser APIs (Blob, download) for data exports. Users can trigger exports via UI buttons, and the framework handles file naming, format conversion, and browser compatibility.","intents":["Allow users to download charts as images (PNG, SVG) or PDFs for reports and presentations","Export search results and data tables as CSV or JSON for further analysis in spreadsheets or data tools","Enable offline access to MCP tool outputs without requiring repeated API calls"],"best_for":["MCP clients serving analysts and researchers who need to export data for reports","Teams building data exploration interfaces where users need to save findings","Applications requiring audit trails or data archival of tool outputs"],"limitations":["Large datasets (>50k rows) may be slow to export or cause browser memory issues without streaming","PDF export requires additional dependencies (e.g., jsPDF) not included in the framework","No built-in support for batch exports or scheduled exports — only on-demand user-triggered exports"],"requires":["React 16.8+","@data360/mcp-ui package","Vega-Lite 5.x+ (for chart exports)","Modern browser with Blob and download support"],"input_types":["Chart data (Vega-Lite specs)","Search result arrays or table data"],"output_types":["PNG, SVG, PDF (charts)","CSV, JSON (data)","Blob objects for browser download"],"categories":["data-processing-analysis","automation-workflow"],"confidence":0.5,"matches":0,"success_rate":0}],"trust":{"score":32,"verified":false,"data_access_risk":"moderate","permissions":["React 16.8+ (hooks support)","Vega-Lite 5.x or higher","MCP server providing structured tabular output","Node.js 14+ for build tooling","React 16.8+","@data360/mcp-ui package installed","MCP server returning search results in Data360 schema format","CSS-in-JS or CSS modules for styling (component uses CSS classes)","@data360/mcp-ui package","MCP tools returning outputs in Data360 schema format"],"failure_modes":["Limited to Vega-Lite's declarative specification — complex custom interactions or animations require Vega-Lite extension or wrapper code","No built-in support for 3D visualizations, geographic maps, or network graphs — only 2D statistical charts","Performance degrades with datasets >100k rows without data aggregation or sampling upstream in the MCP tool","No built-in pagination or infinite scroll — requires parent component to manage result sets and load more logic","Limited customization of card layout and styling without forking component code","No native support for faceted search filters or result refinement — only displays pre-filtered results from MCP tool","Routing logic is opinionated — may not match all custom MCP tool output schemas without extending the framework","No built-in support for custom output types — requires forking or extending the framework to add new surface types","Limited error handling for malformed MCP outputs — relies on parent component for validation and fallback UI","Limited customization of grid behavior — breakpoints and column counts are fixed or require CSS override","builder identity is not verified yet","no observed match outcomes yet"],"rank_breakdown":{"adoption":0.05,"quality":0.39,"ecosystem":0.45,"match_graph":0.25,"freshness":0.75,"weights":{"adoption":0.25,"quality":0.25,"ecosystem":0.15,"match_graph":0.23,"freshness":0.12}},"observed_outcomes":{"matches":0,"success_rate":0,"avg_confidence":0,"top_intents":[],"last_matched_at":null},"maintenance":{"status":"active","updated_at":"2026-05-24T12:16:23.903Z","last_scraped_at":"2026-05-03T14:23:59.617Z","last_commit":null},"community":{"stars":null,"forks":null,"weekly_downloads":null,"model_downloads":null,"model_likes":null}},"distribution":{"claim_url":"https://unfragile.ai/submit?claim=npm-data360mcp-ui","compare_url":"https://unfragile.ai/compare?artifact=npm-data360mcp-ui"}},"signature":"RXqvur9kh/JAxya6i8UtvTcpafOyE9M3qohnQPVKA/vZ8aXa27QAPEMCI516B11Yt0fK/QCkjI6LUC14SX7eBw==","signedAt":"2026-06-22T05:25:33.377Z","signedBy":"unfragile.ai","version":1},"_links":{"self":"https://unfragile.ai/api/v1/passport/npm-data360mcp-ui","artifact":"https://unfragile.ai/npm-data360mcp-ui","verify":"https://unfragile.ai/api/v1/verify?slug=npm-data360mcp-ui","publicKey":"https://unfragile.ai/api/v1/trust-passport-public-key","spec":"https://unfragile.ai/trust","schema":"https://unfragile.ai/schema.json","docs":"https://unfragile.ai/docs"}}