alpic-ai__skybridge/docs/examples.mdx

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

import { ChatExample } from "/components/chat-example.jsx";

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

<Tip>
  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.
</Tip>

## Basic

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

<CardGroup cols={2}>

<ChatExample
  card
  href="/examples/starter"
  title="Starter"
  prompt="Get me started with Skybridge."
  src="/images/showcase-starter.png"
  alt="Starter showcase"
  description="The default app scaffolded by npm create skybridge. A guided onboarding tour through Skybridge's core APIs, featuring the Skybridge mascot."
  source="https://github.com/alpic-ai/apps-sdk-template"
/>

<ChatExample
  card
  href="/examples/everything"
  title="Everything"
  prompt="Show me everything Skybridge can do."
  src="/images/showcase-example.png"
  alt="Everything showcase"
  description="Comprehensive playground showcasing all Skybridge hooks and features. The ultimate reference implementation."
  demo="https://everything.skybridge.tech/try"
  source="https://github.com/alpic-ai/skybridge/tree/main/examples/everything"
/>

</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}>

<ChatExample
  card
  href="/examples/capitals"
  title="Capitals Explorer"
  prompt="Show me the capital of France on a map."
  src="/images/showcase-capitals.png"
  alt="Capitals Explorer showcase"
  description="Interactive world map with geolocation, country information from Wikipedia, and dynamic capital exploration."
  demo="https://capitals.skybridge.tech/try"
  source="https://github.com/alpic-ai/skybridge/tree/main/examples/capitals"
/>

<ChatExample
  card
  href="/examples/chatgpt-files"
  title="ChatGPT Files"
  prompt="Zip this file for me."
  src="/images/showcase-chatgpt-files.png"
  alt="ChatGPT Files showcase"
  description="Handles ChatGPT file attachments end to end: compresses a file into a downloadable .zip, stores it in Cloudflare R2, and returns a presigned link. Uses the ChatGPT Apps SDK file APIs."
  source="https://github.com/alpic-ai/skybridge/tree/main/examples/chatgpt-files"
/>

<ChatExample
  card
  href="/examples/chess"
  title="Chess"
  prompt="Play a game of chess with me."
  src="/images/showcase-chess.png"
  alt="Chess showcase"
  description="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."
  demo="https://chess.skybridge.tech/try"
  source="https://github.com/alpic-ai/skybridge/tree/main/examples/chess"
/>

<ChatExample
  card
  href="/examples/ecommerce-carousel"
  title="Ecommerce Carousel"
  prompt="Show me some clothes I can buy."
  src="/images/showcase-ecommerce.png"
  alt="Ecommerce Carousel showcase"
  description="Ecommerce with a search results carousel and a fullscreen product detail. The model curates from a viewless search tool, then renders its picks."
  demo="https://ecommerce.skybridge.tech/try"
  source="https://github.com/alpic-ai/skybridge/tree/main/examples/ecom-carousel"
/>

<ChatExample
  card
  href="/examples/flight-booking"
  title="Flight Booking"
  prompt="Find me a flight from Paris to Valencia."
  src="/images/showcase-flight-booking.png"
  alt="Flight Booking showcase"
  description="Flight search carousel with route details, pricing comparison, and external booking via Skybridge docs."
  demo="https://flight-booking.skybridge.tech/try"
  source="https://github.com/alpic-ai/skybridge/tree/main/examples/flight-booking"
/>

<ChatExample
  card
  href="/examples/investigation-game"
  title="Investigation Game"
  prompt="Start a murder mystery investigation."
  src="/images/showcase-investigation-game.png"
  alt="Investigation Game showcase"
  description="Interactive murder mystery game with multi-screen gameplay, fullscreen display mode, and dynamic story progression."
  demo="https://investigation-game.skybridge.tech/try"
  source="https://github.com/alpic-ai/skybridge/tree/main/examples/investigation-game"
/>

<ChatExample
  card
  href="/examples/productivity"
  title="Productivity"
  prompt="Show me my productivity insights."
  src="/images/showcase-productivity.png"
  alt="Productivity showcase"
  description="Interactive analytics dashboard with charts, theme adaptation, localization, fullscreen mode, and bidirectional tool calls."
  demo="https://productivity.skybridge.tech/try"
  source="https://github.com/alpic-ai/skybridge/tree/main/examples/productivity"
/>

<ChatExample
  card
  href="/examples/supabase-triplog"
  title="Supabase Triplog"
  prompt="Show me my trip log."
  src="/images/showcase-supabase-triplog.png"
  alt="Supabase Triplog showcase"
  description="Personal trip log backed by Supabase, with CRUD tools, UI filtering, focused trip views, and cover image browsing."
  source="https://github.com/alpic-ai/skybridge/tree/main/examples/supabase-triplog"
/>

<ChatExample
  card
  href="/examples/times-up"
  title="Time's Up"
  prompt="Let's play a word-guessing game."
  src="/images/showcase-times-up.png"
  alt="Time's Up showcase"
  description="Word-guessing party game where the user sees a secret word and gives hints to the AI, which tries to guess it."
  demo="https://times-up.skybridge.tech/try"
  source="https://github.com/alpic-ai/skybridge/tree/main/examples/times-up"
/>

</CardGroup>

## Auth

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

<div className="auth-cards">
<CardGroup cols={2}>

<Card
  title="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>

<Card
  title="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="Descope"
  img="/images/descope.webp"
  href="/examples/auth-descope"
>
  Full OAuth authentication with Descope and personalized coffee shop search.

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

<Card
  title="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="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>

</CardGroup>
</div>

## UI and component libraries

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

<CardGroup cols={2}>

<ChatExample
  card
  href="/examples/generative-ui"
  title="Generative UI"
  prompt="Generate a feedback UI for me."
  src="/images/showcase-generative-ui.png"
  alt="Generative UI showcase"
  description="LLM-generated dynamic UIs with json-render and 36 pre-built shadcn/ui components. The AI composes the interface, the view renders it."
  demo="https://generative-ui.skybridge.tech/try"
  source="https://github.com/alpic-ai/skybridge/tree/main/examples/generative-ui"
/>

<ChatExample
  card
  href="/examples/manifest-ui"
  title="Manifest UI"
  prompt="Show me what Manifest UI can build."
  src="/images/showcase-manifest-ui.png"
  alt="Manifest UI showcase"
  description="Agentic component library example for rich AI-powered experiences."
  demo="https://manifest-ui.skybridge.tech/try"
  source="https://github.com/alpic-ai/skybridge/tree/main/examples/manifest-ui"
/>

</CardGroup>