---
title: Examples
description: Example apps built with Skybridge
---

Explore real-world examples built with Skybridge. Each app demonstrates different features and integrations. Click an app to see a full-page walkthrough.

<Callout icon="rocket" color="#08F5F9">
  Want to see Skybridge in the wild? Explore the <a href="https://skybridge.tech/showcase" target="_blank">Skybridge showcase</a> to discover production MCP Apps shipped by real teams in ChatGPT and Claude.
</Callout>

## Basic

Starter examples and reference implementations for learning the core Skybridge patterns.

<CardGroup cols={2}>

<Card
  title="Starter"
  img="/images/showcase-starter.png"
  href="/examples/starter"
>
  The default app scaffolded by `npm create skybridge`. A guided onboarding tour through Skybridge's core APIs, featuring the Skybridge mascot.

  <a href="https://github.com/alpic-ai/apps-sdk-template" target="_blank" onClick={(e) => e.stopPropagation()}><Icon icon="github" iconType="brands" /> View code on GitHub</a>
</Card>

<Card
  title="Everything"
  img="/images/showcase-example.png"
  href="/examples/everything"
>
  Comprehensive playground showcasing all Skybridge hooks and features. The ultimate reference implementation.

  <a href="https://everything.skybridge.tech/try" target="_blank" onClick={(e) => e.stopPropagation()}><Icon icon="play" /> Try Demo</a>
  <br />
  <a href="https://github.com/alpic-ai/skybridge/tree/main/examples/everything" target="_blank" onClick={(e) => e.stopPropagation()}><Icon icon="github" iconType="brands" /> View code on GitHub</a>
</Card>

</CardGroup>

## Use cases

Open-source apps that show how Skybridge supports maps, commerce, travel, games, dashboards, and other rich MCP App workflows.

<CardGroup cols={2}>

<Card
  title="Capitals Explorer"
  img="/images/showcase-capitals.png"
  href="/examples/capitals"
>
  Interactive world map with geolocation, country information from Wikipedia, and dynamic capital exploration.

  <a href="https://capitals.skybridge.tech/try" target="_blank" onClick={(e) => e.stopPropagation()}><Icon icon="play" /> Try Demo</a>
  <br />
  <a href="https://github.com/alpic-ai/skybridge/tree/main/examples/capitals" target="_blank" onClick={(e) => e.stopPropagation()}><Icon icon="github" iconType="brands" /> View code on GitHub</a>
</Card>

<Card
  title="Flight Booking"
  img="/images/showcase-flight-booking.png"
  href="/examples/flight-booking"
>
  Flight search carousel with route details, pricing comparison, and external booking via Skybridge docs.

  <a href="https://flight-booking.skybridge.tech/try" target="_blank" onClick={(e) => e.stopPropagation()}><Icon icon="play" /> Try Demo</a>
  <br />
  <a href="https://github.com/alpic-ai/skybridge/tree/main/examples/flight-booking" target="_blank" onClick={(e) => e.stopPropagation()}><Icon icon="github" iconType="brands" /> View code on GitHub</a>
</Card>

<Card
  title="Ecommerce Carousel"
  img="/images/showcase-ecommerce.png"
  href="/examples/ecommerce-carousel"
>
  Product carousel with persistent cart, localization support, theme switching, and modal dialogs.

  <a href="https://ecommerce.skybridge.tech/try" target="_blank" onClick={(e) => e.stopPropagation()}><Icon icon="play" /> Try Demo</a>
  <br />
  <a href="https://github.com/alpic-ai/skybridge/tree/main/examples/ecom-carousel" target="_blank" onClick={(e) => e.stopPropagation()}><Icon icon="github" iconType="brands" /> View code on GitHub</a>
</Card>

<Card
  title="Investigation Game"
  img="/images/showcase-investigation-game.png"
  href="/examples/investigation-game"
>
  Interactive murder mystery game with multi-screen gameplay, fullscreen display mode, and dynamic story progression.

  <a href="https://investigation-game.skybridge.tech/try" target="_blank" onClick={(e) => e.stopPropagation()}><Icon icon="play" /> Try Demo</a>
  <br />
  <a href="https://github.com/alpic-ai/skybridge/tree/main/examples/investigation-game" target="_blank" onClick={(e) => e.stopPropagation()}><Icon icon="github" iconType="brands" /> View code on GitHub</a>
</Card>

<Card
  title="Productivity"
  img="/images/showcase-productivity.png"
  href="/examples/productivity"
>
  Interactive analytics dashboard with charts, theme adaptation, localization, fullscreen mode, and bidirectional tool calls.

  <a href="https://productivity.skybridge.tech/try" target="_blank" onClick={(e) => e.stopPropagation()}><Icon icon="play" /> Try Demo</a>
  <br />
  <a href="https://github.com/alpic-ai/skybridge/tree/main/examples/productivity" target="_blank" onClick={(e) => e.stopPropagation()}><Icon icon="github" iconType="brands" /> View code on GitHub</a>
</Card>

<Card
  title="Time's Up"
  img="/images/showcase-times-up.png"
  href="/examples/times-up"
>
  Word-guessing party game where the user sees a secret word and gives hints to the AI, which tries to guess it.

  <a href="https://times-up.skybridge.tech/try" target="_blank" onClick={(e) => e.stopPropagation()}><Icon icon="play" /> Try Demo</a>
  <br />
  <a href="https://github.com/alpic-ai/skybridge/tree/main/examples/times-up" target="_blank" onClick={(e) => e.stopPropagation()}><Icon icon="github" iconType="brands" /> View code on GitHub</a>
</Card>

</CardGroup>

## Auth

OAuth examples showing how to connect common authentication providers to Skybridge apps.

<CardGroup cols={2}>

<Card
  title="Auth - Clerk"
  img="/images/showcase-clerk.png"
  href="/examples/auth-clerk"
>
  Full OAuth authentication with Clerk and personalized coffee shop search.

  <a href="https://github.com/alpic-ai/skybridge/tree/main/examples/auth-clerk" target="_blank" onClick={(e) => e.stopPropagation()}><Icon icon="github" iconType="brands" /> View code on GitHub</a>
</Card>

<Card
  title="Auth - WorkOS AuthKit"
  img="/images/showcase-workos.png"
  href="/examples/auth-workos"
>
  Full OAuth authentication with WorkOS AuthKit and personalized coffee shop search.

  <a href="https://github.com/alpic-ai/skybridge/tree/main/examples/auth-workos" target="_blank" onClick={(e) => e.stopPropagation()}><Icon icon="github" iconType="brands" /> View code on GitHub</a>
</Card>

<Card
  title="Auth - Stytch"
  img="/images/showcase-stytch.png"
  href="/examples/auth-stytch"
>
  Full OAuth authentication with Stytch and personalized coffee shop search.

  <a href="https://github.com/alpic-ai/skybridge/tree/main/examples/auth-stytch" target="_blank" onClick={(e) => e.stopPropagation()}><Icon icon="github" iconType="brands" /> View code on GitHub</a>
</Card>

<Card
  title="Auth - Auth0"
  img="/images/showcase-auth0.png"
  href="/examples/auth-auth0"
>
  Full OAuth authentication with Auth0 and personalized coffee shop search.

  <a href="https://github.com/alpic-ai/skybridge/tree/main/examples/auth-auth0" target="_blank" onClick={(e) => e.stopPropagation()}><Icon icon="github" iconType="brands" /> View code on GitHub</a>
</Card>

</CardGroup>

## UI and component libraries

Examples for building rich interfaces and reusable components in MCP Apps.

<CardGroup cols={2}>

<Card
  title="Manifest UI"
  img="/images/showcase-manifest-ui.png"
  href="/examples/manifest-ui"
>
  Agentic component library example for rich AI-powered experiences.

  <a href="https://manifest-ui.skybridge.tech/try" target="_blank" onClick={(e) => e.stopPropagation()}><Icon icon="play" /> Try Demo</a>
  <br />
  <a href="https://github.com/alpic-ai/skybridge/tree/main/examples/manifest-ui" target="_blank" onClick={(e) => e.stopPropagation()}><Icon icon="github" iconType="brands" /> View code on GitHub</a>
</Card>

<Card
  title="Generative UI"
  img="/images/showcase-generative-ui.png"
  href="/examples/generative-ui"
>
  LLM-generated dynamic UIs with json-render and 36 pre-built shadcn/ui components. The AI composes the interface, the view renders it.

  <a href="https://generative-ui.skybridge.tech/try" target="_blank" onClick={(e) => e.stopPropagation()}><Icon icon="play" /> Try Demo</a>
  <br />
  <a href="https://github.com/alpic-ai/skybridge/tree/main/examples/generative-ui" target="_blank" onClick={(e) => e.stopPropagation()}><Icon icon="github" iconType="brands" /> View code on GitHub</a>
</Card>

</CardGroup>
