buildmymcpserver/apps/web/app/opengraph-image.tsx

import { ImageResponse } from 'next/og';

// Edge runtime: next/og loads its assets via fileURLToPath, which throws an
// "Invalid URL" during a Node-runtime prerender. The edge runtime sidesteps
// that and is how the OG image route builds reliably.
export const runtime = 'edge';

// Sitewide Open Graph / social-share card. Monochrome to match the brand —
// flat colours only, a single indigo accent, no gradients.
export const alt = 'BuildMyMCPServer — Describe your tool. We host the MCP server.';
export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';

export default function Image() {
  return new ImageResponse(
    <div
      style={{
        width: '100%',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        backgroundColor: '#0a0a0b',
        padding: '72px',
        fontFamily: 'sans-serif',
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
        <div
          style={{
            width: '46px',
            height: '46px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            border: '2px solid #fafafa',
            borderRadius: '9px',
            color: '#fafafa',
            fontSize: '26px',
            fontWeight: 700,
          }}
        >
          M
        </div>
        <div
          style={{ color: '#fafafa', fontSize: '28px', fontWeight: 600, letterSpacing: '-0.02em' }}
        >
          BuildMyMCPServer
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <div
          style={{
            color: '#fafafa',
            fontSize: '74px',
            fontWeight: 700,
            lineHeight: 1.05,
            letterSpacing: '-0.03em',
          }}
        >
          Describe your tool.
        </div>
        <div
          style={{
            color: '#fafafa',
            fontSize: '74px',
            fontWeight: 700,
            lineHeight: 1.05,
            letterSpacing: '-0.03em',
          }}
        >
          We host the MCP server.
        </div>
        <div
          style={{
            color: '#a1a1aa',
            fontSize: '27px',
            marginTop: '26px',
            letterSpacing: '-0.01em',
          }}
        >
          Prompt to a hosted, OAuth 2.1-protected MCP server in 60 seconds.
        </div>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '11px',
            color: '#71717a',
            fontSize: '22px',
          }}
        >
          <div
            style={{ width: '9px', height: '9px', borderRadius: '9px', backgroundColor: '#6366f1' }}
          />
          OAuth 2.1 · Streamable HTTP · Docker-isolated
        </div>
        <div style={{ color: '#71717a', fontSize: '22px' }}>buildmymcpserver.com</div>
      </div>
    </div>,
    { ...size },
  );
}