> ## Documentation Index
> Fetch the complete documentation index at: https://docs.skybridge.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# Examples

> 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="https://mintcdn.com/skybridge-alpic/nNVsx3mlajqut1bF/images/showcase-starter.png?fit=max&auto=format&n=nNVsx3mlajqut1bF&q=85&s=caa4446ada6518123be6607337aa56f3" href="/examples/starter" width="1512" height="796" data-path="images/showcase-starter.png">
    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="https://mintcdn.com/skybridge-alpic/e7Fj8WpwcOpDyXhx/images/showcase-example.png?fit=max&auto=format&n=e7Fj8WpwcOpDyXhx&q=85&s=2f5181c640ed70bee25dcc26f67a8086" href="/examples/everything" width="1284" height="454" data-path="images/showcase-example.png">
    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="https://mintcdn.com/skybridge-alpic/e7Fj8WpwcOpDyXhx/images/showcase-capitals.png?fit=max&auto=format&n=e7Fj8WpwcOpDyXhx&q=85&s=a6514457098909a22d36c275fda8372c" href="/examples/capitals" width="1274" height="778" data-path="images/showcase-capitals.png">
    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="Chess" img="https://mintcdn.com/skybridge-alpic/RtZa8OS665SGx8s1/images/showcase-chess.png?fit=max&auto=format&n=RtZa8OS665SGx8s1&q=85&s=d913b635de425e914c12fb3d7f797cbd" href="/examples/chess" width="431" height="271" data-path="images/showcase-chess.png">
    Play chess against the assistant with a picture-in-picture board. Showcases MCP Apps view-provided tools — the model plays through tools registered by the view itself.

    <a href="https://chess.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/chess" target="_blank" onClick={(e) => e.stopPropagation()}><Icon icon="github" iconType="brands" /> View code on GitHub</a>
  </Card>

  <Card title="Flight Booking" img="https://mintcdn.com/skybridge-alpic/W8UCi-DdcxLpKGkg/images/showcase-flight-booking.png?fit=max&auto=format&n=W8UCi-DdcxLpKGkg&q=85&s=a93c58890be619631800ac29216210bb" href="/examples/flight-booking" width="804" height="287" data-path="images/showcase-flight-booking.png">
    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="https://mintcdn.com/skybridge-alpic/e7Fj8WpwcOpDyXhx/images/showcase-ecommerce.png?fit=max&auto=format&n=e7Fj8WpwcOpDyXhx&q=85&s=fd2a570272772f7b3b64a96fad61ad6c" href="/examples/ecommerce-carousel" width="1296" height="806" data-path="images/showcase-ecommerce.png">
    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="https://mintcdn.com/skybridge-alpic/6Xm70x5zUUcgDPQc/images/showcase-investigation-game.png?fit=max&auto=format&n=6Xm70x5zUUcgDPQc&q=85&s=8cedce77f74d78ee393f82fe46cae268" href="/examples/investigation-game" width="748" height="352" data-path="images/showcase-investigation-game.png">
    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="https://mintcdn.com/skybridge-alpic/XI38pgajnb4znwkn/images/showcase-productivity.png?fit=max&auto=format&n=XI38pgajnb4znwkn&q=85&s=f3bb8429e1f2c66c499e3363d07f3167" href="/examples/productivity" width="951" height="436" data-path="images/showcase-productivity.png">
    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="https://mintcdn.com/skybridge-alpic/KzgU5sPyntYoNSBm/images/showcase-times-up.png?fit=max&auto=format&n=KzgU5sPyntYoNSBm&q=85&s=53c4a3569d343b5f5ac49e3c96ac1f8d" href="/examples/times-up" width="675" height="298" data-path="images/showcase-times-up.png">
    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="https://mintcdn.com/skybridge-alpic/XNQz7AgxaNm79Pip/images/showcase-clerk.png?fit=max&auto=format&n=XNQz7AgxaNm79Pip&q=85&s=409ce4156cffd96e505fc354307772ff" href="/examples/auth-clerk" width="910" height="512" data-path="images/showcase-clerk.png">
    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="https://mintcdn.com/skybridge-alpic/XNQz7AgxaNm79Pip/images/showcase-workos.png?fit=max&auto=format&n=XNQz7AgxaNm79Pip&q=85&s=bbe1fe9ffdbc1a0ce8f73c900f6127ea" href="/examples/auth-workos" width="1174" height="599" data-path="images/showcase-workos.png">
    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="https://mintcdn.com/skybridge-alpic/T6dbc9v1TOdB1AeY/images/showcase-stytch.png?fit=max&auto=format&n=T6dbc9v1TOdB1AeY&q=85&s=1feb0f2f291b881a8072be7a9b04bc63" href="/examples/auth-stytch" width="600" height="400" data-path="images/showcase-stytch.png">
    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="https://mintcdn.com/skybridge-alpic/ggyuxzNIT3RRx91h/images/showcase-auth0.png?fit=max&auto=format&n=ggyuxzNIT3RRx91h&q=85&s=683cf835ee055a4a1f6cb5686af9bb66" href="/examples/auth-auth0" width="1920" height="1080" data-path="images/showcase-auth0.png">
    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="https://mintcdn.com/skybridge-alpic/O_tXZkQ-k0kf73Ap/images/showcase-manifest-ui.png?fit=max&auto=format&n=O_tXZkQ-k0kf73Ap&q=85&s=972571e9aefcc41f096f0013e72274ac" href="/examples/manifest-ui" width="1032" height="581" data-path="images/showcase-manifest-ui.png">
    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="https://mintcdn.com/skybridge-alpic/grUqUzADywb2nWSK/images/showcase-generative-ui.png?fit=max&auto=format&n=grUqUzADywb2nWSK&q=85&s=c9a520d2a2a68a6d0e054a841e72db96" href="/examples/generative-ui" width="798" height="470" data-path="images/showcase-generative-ui.png">
    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>
