mdxui

Site & App Types

Complete taxonomy of Site and App types for AI-centric autonomous businesses

Site & App Types

Sites and Apps are typed based on business model - the type determines what pages/views, sections/panels, and components are needed by default.

Business Model Archetypes

Product Businesses (Software/Data)

ModelWhat You SellRevenueSite TypeApp Type
SaaSSoftware subscriptionMRRMarketingSiteSaaSApp
APIPay-per-call/usageUsage-basedAPISiteDeveloperApp
DaaSData subscriptionMRR + UsageDataSiteDataApp
Headless SaaSAPI-only for agentsUsage-basedAPISiteHeadlessApp

Platform Businesses

ModelWhat You SellRevenueSite TypeApp Type
IaaSInfrastructureUsage-basedPlatformSiteInfraApp
PaaSDev platformUsage-basedPlatformSitePlatformApp
MarketplaceTransaction feeGMV %MarketplaceSiteMarketplaceAdmin
DirectoryListings/leadsSubscriptionDirectorySiteDirectoryAdmin

Service Businesses (AI-Delivered)

ModelWhat You SellRevenueSite TypeApp Type
AgencyCreative/dev workProject/retainerAgencySiteAgencyApp
ConsultingAdvisoryEngagementConsultingSiteConsultingApp
SupportCustomer servicePer-seat/ticketServiceSiteSupportApp
OperationsManaged servicesSLA/retainerServiceSiteOpsApp

AI-Native Businesses

ModelWhat You SellRevenueSite TypeApp Type
Agents-as-a-ServiceOn-demand AI workersPer-taskAgentSiteAgentApp
WorkflowsAutomationPer-runAutomationSiteWorkflowApp
ModelsAI model accessPer-callAPISiteStudioApp

Site Types

Content Sites

1. Marketing Site

The classic startup landing page.

Purpose: Convert visitors to signups/sales

Default Pages:

PagePathPurpose
LandingPage/Hero, Problem, Solution, Features, Pricing, CTA
AboutPage/aboutCompany story, mission, team
PricingPage/pricingPricing tiers, comparison, FAQ
ContactPage/contactContact form, locations
BlogPage/blogBlog posts
BlogPostPage/blog/[slug]Individual post

LandingPage Sections:

LandingPage
├── Hero (headline, subheadline, CTA, image/video)
├── LogoCloud (customer logos)
├── Problem (pain points, agitation)
├── Solution (how you solve it)
├── Features (feature grid/bento)
├── Benefits (outcomes, value props)
├── Steps (numbered process: 1, 2, 3)
├── HowItWorks (explanation, demo, video)
├── Testimonials (social proof)
├── Pricing (tiers comparison)
├── FAQ (accordion)
├── CTA (final conversion)
└── Newsletter (email signup)

2. Documentation Site

Technical documentation for developers.

Purpose: Educate users on how to use a product/API

Default Pages:

PagePathPurpose
DocsHomePage/docsOverview, quick start
DocsPage/docs/[...slug]Individual doc with sidebar
APIReferencePage/docs/apiAPI reference
ChangelogPage/changelogVersion history
ExamplesPage/examplesTutorials

3. Blog Site

Content-first publication.

Purpose: Publish articles, build audience

Default Pages:

PagePathPurpose
BlogPage/blogPost list, featured, categories
BlogPostPage/blog/[slug]Article
AuthorPage/blog/author/[slug]Author bio, posts
CategoryPage/blog/category/[slug]Posts by category
TagPage/blog/tag/[slug]Posts by tag

Discovery Sites

4. Directory Site

Listings and discovery (Yelp, Product Hunt style).

Purpose: Help users find things

Default Pages:

PagePathPurpose
DirectoryPage/Categories, featured, search
CategoryPage/[category]Filtered listings
ListingPage/[category]/[slug]Listing detail
SearchPage/searchSearch results
SubmitPage/submitSubmit a listing

5. Marketplace Site

Two-sided platform (Etsy, Gumroad style).

Purpose: Facilitate transactions

Default Pages:

PagePathPurpose
MarketplacePage/Featured, categories, search
CategoryPage/[category]Products by category
ProductPage/product/[slug]Product detail, buy
SellerPage/seller/[slug]Seller profile
CartPage/cartShopping cart
CheckoutPage/checkoutPayment flow

6. Community Site

Forums and discussions.

Purpose: Enable community interaction

Default Pages:

PagePathPurpose
CommunityPage/Categories, trending, recent
CategoryPage/c/[category]Threads in category
ThreadPage/t/[slug]Thread with replies
ProfilePage/u/[username]User profile
NewThreadPage/newCreate thread

Personal Sites

7. Portfolio Site

Showcase work (designers, developers, agencies).

Purpose: Showcase work, get clients

Default Pages:

PagePathPurpose
PortfolioPage/Work grid, about, contact
ProjectPage/work/[slug]Case study
AboutPage/aboutBio, skills
ContactPage/contactContact form

8. Personal Site

Individual presence (bio + blog + links).

Purpose: Personal brand

Default Pages:

PagePathPurpose
PersonalPage/Bio, links, recent posts
AboutPage/aboutExtended bio
BlogPage/blogPersonal blog
NowPage/nowWhat I'm doing now
UsesPage/usesTools and setup

Event Sites

9. Event Site

Single event or conference.

Purpose: Promote event, drive registrations

Default Pages:

PagePathPurpose
EventPage/Event landing, register
SchedulePage/scheduleAgenda, sessions
SpeakersPage/speakersSpeaker lineup
SpeakerPage/speakers/[slug]Speaker bio
VenuePage/venueLocation, map
SponsorsPage/sponsorsSponsor tiers
RegisterPage/registerRegistration

10. Story Site

Narrative-driven (StoryBrand framework).

Purpose: Tell brand story

Default Pages:

PagePathPurpose
StoryPage/Full narrative flow
ChapterPage/[chapter]Story section

StoryPage Sections:

StoryPage
├── StoryHero (the hook)
├── Problem (the villain/pain)
├── Guide (you as the guide)
├── Plan (the path forward)
├── CallToAction (the first step)
├── Success (the vision)
├── Failure (what's at stake)
└── Transformation (the journey)

Product Sites

11. API Site

API-first documentation + playground.

Purpose: API adoption

Default Pages:

PagePathPurpose
APILandingPage/Hero, features, quick start
DocsPage/docsGetting started
ReferencePage/referenceAPI reference
PlaygroundPage/playgroundInteractive tester
SDKsPage/sdksLanguage SDKs
StatusPage/statusAPI status

12. Agent Site

Agent catalog + playground.

Purpose: Agent adoption

Default Pages:

PagePathPurpose
AgentLandingPage/Hero, agent showcase
AgentsPage/agentsAgent catalog
AgentPage/agents/[slug]Agent detail, try it
PlaygroundPage/playgroundChat with agents
PricingPage/pricingUsage pricing
DocsPage/docsIntegration guide

Service Sites

13. Agency Site

Portfolio + services + process.

Purpose: Win clients

Default Pages:

PagePathPurpose
AgencyLandingPage/Hero, services, work
ServicesPage/servicesService offerings
ServicePage/services/[slug]Service detail
WorkPage/workPortfolio/case studies
CaseStudyPage/work/[slug]Project detail
ProcessPage/processHow we work
ContactPage/contactStart a project

14. Platform Site

IaaS/PaaS marketing + status + docs.

Purpose: Platform adoption

Default Pages:

PagePathPurpose
PlatformLandingPage/Hero, features, pricing
ProductsPage/productsProduct catalog
ProductPage/products/[slug]Product detail
DocsPage/docsDocumentation
StatusPage/statusSystem status
PricingPage/pricingUsage calculator

App Types

Analytics Apps

1. Dashboard App

Analytics and overview.

Purpose: Visualize metrics

Default Views:

ViewPathPurpose
DashboardView/Metrics, charts, activity
AnalyticsView/analyticsDeep dive charts
ReportsView/reportsGenerated reports
SettingsView/settingsConfiguration

Developer Apps

2. Developer App

API/SDK product management.

Purpose: Manage API access

Default Views:

ViewPathPurpose
OverviewView/Usage summary
APIKeysView/keysKey management
WebhooksView/webhooksWebhook endpoints
UsageView/usageRequest logs, limits
LogsView/logsDetailed logs
DocsView/docsInline API reference

Admin Apps

3. Admin App

Internal backoffice.

Purpose: Manage data

Default Views:

ViewPathPurpose
AdminDashboard/Stats, activity
CollectionView/[collection]Table of records
RecordView/[collection]/[id]Edit record
CreateView/[collection]/newCreate form
UsersView/usersUser management
SettingsView/settingsSystem config

Product Apps

4. SaaS App

Full SaaS product + account management.

Purpose: Core product + account

Default Views:

ViewPathPurpose
DashboardView/Product-specific home
[ProductViews]/...Varies by product
TeamView/teamTeam members
BillingView/billingSubscription, invoices
SettingsView/settingsAccount settings

5. Data App

DaaS dashboard.

Purpose: Manage datasets

Default Views:

ViewPathPurpose
DataDashboard/Revenue, downloads
DatasetsView/datasetsAll datasets
DatasetView/datasets/[id]Dataset detail
SourcesView/sourcesData pipelines
AccessView/accessPermissions, keys
UsageView/usageDownloads, queries

6. Headless App

API-only for agents (no human UI).

Purpose: Agent-facing product

Default Views:

ViewPathPurpose
HeadlessDashboard/Agent usage
MCPView/mcpTools, prompts
AgentKeysView/agentsAgent credentials
UsageView/usagePer-agent usage
LogsView/logsRequest logs

Service Apps

7. CRM App

Customer relationship management.

Purpose: Manage relationships

Default Views:

ViewPathPurpose
CRMDashboard/Pipeline, tasks
ContactsView/contactsContact list
ContactView/contacts/[id]Contact detail
DealsView/dealsDeal pipeline
ActivitiesView/activitiesActivity timeline

8. Booking App

Appointments and reservations.

Purpose: Schedule appointments

Default Views:

ViewPathPurpose
BookingDashboard/Today's bookings
CalendarView/calendarCalendar grid
BookingsView/bookingsBooking list
AvailabilityView/availabilitySet availability
ServicesView/servicesManage services

9. Support App

Help desk.

Purpose: Handle tickets

Default Views:

ViewPathPurpose
InboxView/Ticket queue
TicketView/tickets/[id]Conversation
KnowledgeBaseView/kbHelp articles
ReportsView/reportsSupport metrics

10. Agency App

Agency operations.

Purpose: Manage projects + clients

Default Views:

ViewPathPurpose
AgencyDashboard/Active projects
ClientsView/clientsClient list
ProjectsView/projectsProject pipeline
DeliverablesView/deliverablesOutputs
BillingView/billingInvoices

11. Ops App

Managed services operations.

Purpose: Deliver managed services

Default Views:

ViewPathPurpose
OpsDashboard/SLA health
ClientsView/clientsClient list
TasksView/tasksTask queue
IncidentsView/incidentsIncident management
SLAsView/slasSLA tracking
RunbooksView/runbooksSOPs

AI Apps

12. Agent App

Agents-as-a-Service management.

Purpose: Manage agents + tasks

Default Views:

ViewPathPurpose
AgentDashboard/Fleet overview
AgentsView/agentsAgent catalog
AgentView/agents/[id]Agent config
TasksView/tasksTask queue
ToolsView/toolsTool registry
CostsView/costsToken usage

13. Workflow App

Automation.

Purpose: Manage workflows

Default Views:

ViewPathPurpose
WorkflowDashboard/Recent runs
WorkflowsView/workflowsWorkflow list
WorkflowView/workflows/[id]Flow editor
RunsView/runsExecution history
TriggersView/triggersWebhooks, schedules

Infrastructure Apps

14. Infra App

IaaS dashboard.

Purpose: Manage infrastructure

Default Views:

ViewPathPurpose
InfraDashboard/Resource overview
ComputeView/computeServers, VMs
StorageView/storageVolumes, buckets
NetworkView/networkVPCs, DNS
DatabasesView/databasesManaged DBs
MonitoringView/monitoringMetrics, logs

15. Platform App

PaaS dashboard.

Purpose: Manage platform

Default Views:

ViewPathPurpose
PlatformDashboard/Deployments
AppsView/appsApplications
DeploysView/deploysDeployments
EnvsView/envsEnvironments
BuildsView/buildsBuild history
LogsView/logsApplication logs

Portal Apps

16. Client Portal

Customer self-service.

Purpose: Customer dashboard

Default Views:

ViewPathPurpose
PortalDashboard/Account overview
ProjectsView/projectsTheir projects
InvoicesView/invoicesBilling
SupportView/supportTickets
DocumentsView/documentsShared docs
SettingsView/settingsAccount settings

Builder Apps

17. VibeCode App

AI-native builder for Sites and Apps via conversation.

Purpose: Build Sites/Apps by describing what you want

Pattern: Chat + Preview + Code (the "Vibe" pattern)

┌─────────────────────────────────────────────────────────────┐
│  VibeCode                                                   │
│  ┌─────────────────┬─────────────────┬─────────────────┐   │
│  │   CHAT          │   PREVIEW       │   CODE          │   │
│  │   (Agent)       │   (Live Site)   │   (MDX/TSX)     │   │
│  │                 │                 │                 │   │
│  │  "Add a hero    │  ┌───────────┐  │  <Hero          │   │
│  │   section with  │  │   Hero    │  │    title="..."  │   │
│  │   gradient"     │  │  Section  │  │    gradient     │   │
│  │                 │  └───────────┘  │  />             │   │
│  └─────────────────┴─────────────────┴─────────────────┘   │
└─────────────────────────────────────────────────────────────┘

Default Views:

ViewPathPurpose
EditorView/Main vibe interface (Chat + Preview + Code)
PagesView/pagesPage management
ComponentsView/componentsComponent library
AssetsView/assetsMedia library
ThemeView/themeTheme/styling
SettingsView/settingsSite settings
DeployView/deployDeployment
HistoryView/historyVersion history

EditorView Panels:

EditorView
├── ChatPanel (AI agent conversation)
│   ├── Voice input (SuperWhisper-style)
│   ├── Text input
│   └── Message history
├── PreviewPanel (live site preview)
│   ├── Device switcher (mobile/tablet/desktop)
│   ├── Component selection overlay
│   └── Responsive frame
├── CodePanel (optional, toggleable)
│   ├── MDX source
│   ├── Component tree
│   └── Props inspector
└── ContextPanel (selected element context)
    ├── Props editor
    ├── Style editor
    └── Actions

What VibeCode Builds:

  • Marketing Sites
  • Documentation Sites
  • Blog Sites
  • Landing Pages
  • Any Site type in the taxonomy

The Vibe Pattern:

VibeCode embodies the "vibe coding" paradigm coined by Andrej Karpathy:

  1. Describe what you want in natural language
  2. AI generates the components/code
  3. See live preview immediately
  4. Iterate by describing changes
  5. Optionally view/edit code directly
  6. Deploy with one click

Universal Pages

Every Site includes these by default:

PagePathPurpose
PrivacyPage/privacyPrivacy policy
TermsPage/termsTerms of service
NotFoundPage/*404 page
MaintenancePage-Maintenance mode

Type Summary

All Site Types (14)

TypeBusiness ModelPrimary Purpose
MarketingSaaSConvert visitors
DocsSaaS/APIEducate users
BlogContentBuild audience
DirectoryDirectoryDiscover listings
MarketplaceMarketplaceBuy/sell
CommunityCommunityDiscussion
PortfolioAgencyShowcase work
PersonalPersonal brandIndividual presence
EventEventsPromote event
StoryAnyTell narrative
APIAPI/DaaSAPI-first docs
AgentAgents-as-a-ServiceAgent catalog
AgencyAgency servicesServices + portfolio
PlatformIaaS/PaaSPlatform marketing

All App Types (17)

TypeBusiness ModelPrimary Purpose
DashboardAnyVisualize metrics
DeveloperAPIManage API access
AdminAnyManage data
SaaSSaaSProduct + account
DataDaaSManage datasets
HeadlessHeadless SaaSAPI-only admin
CRMServicesManage relationships
BookingServicesSchedule appointments
SupportSupportHandle tickets
AgencyAgencyProjects + clients
OpsManaged servicesOperations + SLAs
AgentAgents-as-a-ServiceManage agents
WorkflowAutomationManage workflows
InfraIaaSManage infrastructure
PlatformPaaSManage platform
ClientPortalAny B2BCustomer self-service
VibeCodeBuilderBuild Sites/Apps via conversation

Rendering System

How Things become Components at every level

Actors

Understanding the four actor types - ServiceAccount, Model, Agent, and Human

On this page

Site & App TypesBusiness Model ArchetypesProduct Businesses (Software/Data)Platform BusinessesService Businesses (AI-Delivered)AI-Native BusinessesSite TypesContent Sites1. Marketing Site2. Documentation Site3. Blog SiteDiscovery Sites4. Directory Site5. Marketplace Site6. Community SitePersonal Sites7. Portfolio Site8. Personal SiteEvent Sites9. Event Site10. Story SiteProduct Sites11. API Site12. Agent SiteService Sites13. Agency Site14. Platform SiteApp TypesAnalytics Apps1. Dashboard AppDeveloper Apps2. Developer AppAdmin Apps3. Admin AppProduct Apps4. SaaS App5. Data App6. Headless AppService Apps7. CRM App8. Booking App9. Support App10. Agency App11. Ops AppAI Apps12. Agent App13. Workflow AppInfrastructure Apps14. Infra App15. Platform AppPortal Apps16. Client PortalBuilder Apps17. VibeCode AppUniversal PagesType SummaryAll Site Types (14)All App Types (17)