Component Showcase
Demonstration of Fumadocs interactive components for data.gv.at MCP Server documentation
This page demonstrates all interactive components used throughout data.gv.at MCP Server documentation.
Progressive Disclosure with Tabs
Basic Dataset Search
Simple text search for datasets:
const results = await mcp.callTool('search_datasets', {
query: 'Bevölkerung Wien'
});
console.log(`Found ${results.count} datasets`);This returns up to 20 datasets matching "Bevölkerung Wien".
Advanced Search with Filters
Search with faceted filtering and quality boost:
const results = await mcp.callTool('search_datasets', {
query: 'Bevölkerung Wien',
filters: {
organization: 'Stadt Wien',
tags: ['Bevölkerung', 'Statistik'],
license: 'cc-by'
},
limit: 50,
boost_quality: true
});
// Access facets for filter UI
console.log('Available orgs:', results.facets.organization);Quality boost re-ranks results by metadata completeness.
Tab behavior verification:
- Switch tabs → selection persists across page reload (localStorage)
groupId="search-complexity"→ same selection on other pages with same groupId- Mobile responsive → tabs stack vertically on narrow screens
Scannable Reference with Accordion
Accordion behavior verification:
- Only one accordion open at a time (
type="single") - URL hash
#search-datasetsauto-expands correct accordion - Keyboard navigation: Tab/Enter to expand, Escape to collapse
- Mobile responsive → full-width on narrow screens
Workflow Visualization with Mermaid
Mermaid diagram verification:
- Renders correctly in light/dark mode (theme-aware)
- Syntax highlighting for node labels
- No hydration errors (client-side rendering)
- Mobile responsive → diagram scales to fit viewport
Component Integration Test Results
After loading this page:
-
Tabs Component (COMP-01)
- Switches between Basic/Advanced
- Selection persists after page reload
- Mobile responsive (stacks on <768px)
-
Accordion Component (COMP-05)
- Only one accordion open at a time
- URL hash navigation works (#search-datasets)
- Keyboard accessible (Tab/Enter/Escape)
-
Mermaid Component (COMP-06)
- Diagram renders without errors
- Theme switches (light/dark) correctly
- Mobile responsive (scales to viewport)
-
TypeTable Component (COMP-03)
- Parameter tables render with types
- Default values shown
- Descriptions formatted correctly
All components should work without JavaScript errors in browser console.
How is this guide?
Last updated on