> ## 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

> Demo apps built with Skybridge

export const ChatExample = ({prompt, app, src, alt, source, demo, card, href, title, description}) => card ? <a href={href} className="sb-ex-card relative block my-2 w-full overflow-hidden rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 cursor-pointer hover:!border-primary dark:hover:!border-primary-light" style={{
  display: "flex",
  flexDirection: "column",
  textDecoration: "none"
}}>
      <style>{`
        .sb-ex-card__link { text-decoration: none !important; }
        .sb-ex-card__link:hover {
          color: inherit !important;
          border-bottom-width: 1px !important;
          box-shadow: 0 1px 0 0 rgb(0 47 255) !important;
        }
        .dark .sb-ex-card__link:hover { box-shadow: 0 1px 0 0 rgb(8 245 249) !important; }
      `}</style>
      <div style={{
  height: "200px",
  overflow: "hidden",
  display: "flex",
  flexDirection: "column",
  gap: "8px",
  padding: "16px 24px",
  background: "color-mix(in srgb, currentColor 4%, transparent)",
  borderBottom: "1px solid color-mix(in srgb, currentColor 8%, transparent)"
}}>
        <div style={{
  alignSelf: "flex-end",
  maxWidth: "85%",
  background: "color-mix(in srgb, #002FFF 7%, transparent)",
  border: "1px solid color-mix(in srgb, #002FFF 20%, transparent)",
  borderRadius: "10px 10px 2px 10px",
  padding: "5px 9px",
  fontSize: "0.7rem",
  lineHeight: 1.35
}}>
          {prompt}
        </div>
        <img src={src} alt={alt} className="not-prose" style={{
  display: "block",
  width: "100%",
  height: "auto",
  margin: 0,
  pointerEvents: "none",
  borderRadius: "8px",
  border: "1px solid color-mix(in srgb, currentColor 12%, transparent)"
}} />
      </div>
      <div style={{
  display: "flex",
  flexDirection: "column",
  padding: "20px 24px"
}}>
        <h2 className="not-prose font-semibold text-base text-gray-800 dark:text-white" style={{
  margin: 0
}}>
          {title}
        </h2>
        {description && <p className="font-normal text-base leading-6 text-gray-600 dark:text-gray-400" style={{
  margin: "4px 0 0"
}}>
            {description}
          </p>}
        {(demo || source) && <div style={{
  display: "flex",
  flexDirection: "column",
  gap: "4px",
  marginTop: "10px"
}}>
            {demo && <a className="sb-ex-card__link" href={demo} onClick={e => e.stopPropagation()} style={{
  display: "inline-flex",
  alignItems: "center",
  gap: "6px",
  width: "fit-content",
  fontSize: "16px"
}}>
                <svg width="14" height="14" viewBox="0 0 24 24" style={{
  flexShrink: 0
}}>
                  <path d="M8 5v14l11-7z" fill="currentColor" />
                </svg>
                Try Demo
              </a>}
            {source && <a className="sb-ex-card__link" href={source} onClick={e => e.stopPropagation()} style={{
  display: "inline-flex",
  alignItems: "center",
  gap: "6px",
  width: "fit-content",
  fontSize: "16px"
}}>
                <svg width="14" height="14" viewBox="0 0 24 24" style={{
  flexShrink: 0
}}>
                  <path fillRule="evenodd" clipRule="evenodd" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23a11.5 11.5 0 0 1 3.003-.404c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222 0 1.606-.014 2.898-.014 3.293 0 .322.216.694.825.576C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" fill="currentColor" />
                </svg>
                View code on GitHub
              </a>}
          </div>}
      </div>
    </a> : <div style={{
  maxWidth: "880px",
  margin: "0 auto",
  display: "flex",
  flexDirection: "column",
  gap: "16px"
}}>
      <div style={{
  display: "flex",
  flexDirection: "column",
  gap: "14px",
  padding: "20px",
  borderRadius: "20px",
  background: "color-mix(in srgb, currentColor 3%, transparent)",
  border: "1px solid color-mix(in srgb, currentColor 10%, transparent)",
  boxShadow: "0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.06)"
}}>
        <div style={{
  alignSelf: "flex-end",
  maxWidth: "75%",
  background: "color-mix(in srgb, #002FFF 7%, transparent)",
  border: "1px solid color-mix(in srgb, #002FFF 20%, transparent)",
  borderRadius: "16px 16px 4px 16px",
  padding: "10px 14px",
  fontSize: "0.95rem",
  lineHeight: 1.45
}}>
          {prompt}
        </div>
        <div style={{
  display: "flex",
  flexDirection: "column",
  gap: "8px"
}}>
          <div style={{
  display: "flex",
  alignItems: "center",
  gap: "7px",
  fontSize: "0.8rem",
  fontWeight: 600,
  opacity: 0.7
}}>
            <svg width="15" height="15" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg" style={{
  display: "block"
}}>
              <path d="M17.2704 89.9987C37.5976 24.3967 65.182 12.9084 89.9996 35.3807V84.1606C89.9996 87.3849 87.3858 89.9987 84.1615 89.9987H17.2704ZM84.1615 0C87.3858 0 89.9996 2.6139 89.9996 5.83819V30.9146C52.0566 -5.26767 14.9006 31.2366 0.000976562 57.6768V5.83819C0.00104114 2.6139 2.61486 2.23904e-08 5.83917 0H84.1615Z" fill="currentColor" />
            </svg>
            {app}
          </div>
          <img src={src} alt={alt} style={{
  display: "block",
  width: "100%",
  margin: 0,
  borderRadius: "12px",
  border: "1px solid color-mix(in srgb, currentColor 12%, transparent)"
}} />
        </div>
      </div>
      {(source || demo) && <CardGroup cols={demo && source ? 2 : 1}>
          {demo && <Card title="Try the demo" icon="play" href={demo}>
              Launch the live view.
            </Card>}
          {source && <Card title="View source" icon="github" href={source}>
              Browse the example code.
            </Card>}
        </CardGroup>}
    </div>;

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/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="Product carousel with persistent cart, localization support, theme switching, and modal dialogs." 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/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="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>

    <Card title="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="Descope" img="https://mintcdn.com/skybridge-alpic/ssApvlKgCeT5cETQ/images/descope.webp?fit=max&auto=format&n=ssApvlKgCeT5cETQ&q=85&s=0886eff38309b8ae327cd7b7d3be9355" href="/examples/auth-descope" width="1816" height="475" data-path="images/descope.webp">
      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="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="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>
  </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>
