Where and how is basehub used in this repository?

Where and how is basehub used in this repository?

Perfect! Now I have a comprehensive understanding. Let me provide you with a detailed answer:

##Basehub Usage in the Repository

Basehub is used in this repository primarily in the website application (apps/website) as a CMS (Content Management System) to manage and display showcase data. Here's how it's integrated:

###Installation & Configuration

1. Dependency - Added to apps/website/package.json:

   "basehub": "^9.5.3"
   

2. Configuration - apps/website/basehub.config.ts:

   import { setGlobalConfig } from 'basehub';
   setGlobalConfig({})
   

3. Type Definitions - Auto-generated files:

   • basehub.d.ts
   • basehub-types.d.ts (1300+ lines of GraphQL type definitions)

###Main Usage Points

1. Asset Management (apps/website/basehub/index.ts)

• Fetches assets like 3D model matcaps from Basehub using GraphQL queries
• Uses fragmentOn to define reusable query fragments

2. Showcase Form Data (apps/website/components/showcase/actions.ts)

• Fetches showcase form configuration via fetchShowcaseForm()
• Sends form submissions using sendEvent() from basehub/events
• Handles MCP (Model Context Protocol) project submissions

3. MCP Cards Display (apps/website/components/showcase/cards/index.tsx)

• Fetches and displays MCP projects from Basehub via fetchMCPs()
• Renders showcase cards with project info (name, tagline, logo, repository URL, connection type)

4. Frontend Toolbar (apps/website/app/layout.tsx)

• Imports Toolbar from basehub/next-toolbar
• Provides real-time editing UI in the Next.js layout

###Development Workflow

The build scripts in apps/website/package.json show Basehub integration:

"dev": "xmcp dev & basehub dev & next dev --turbopack",
"build": "xmcp build && basehub && next build --turbopack"

The basehub dev command enables live editing during development, and basehub runs the build process for type generation and data fetching.

###Summary

Basehub serves as a content backend for the xmcp website, managing:

• Asset storage (images, logos)
• MCP showcase project listings
• Form submission pipeline for new MCP submissions
• Type-safe GraphQL queries with auto-generated TypeScript types