For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
0
Sponsor

Profile

A personal / portfolio Open Graph image with a circular avatar beside a name, role, bio, and website pill.

AL
Ada Lovelace
Founder & Engineer
Building tools for the open web. Writing about design systems, performance, and shipping fast.
ada.dev

Installation

$ pnpm dlx shadcn@latest add https://ogimagecn.vercel.app/r/profile.json

Usage

import { ImageResponse } from "next/og";
 
import { Profile } from "@/components/og/profile";
 
export function GET() {
  return new ImageResponse(
    <Profile
      name="Ada Lovelace"
      role="Founder & Engineer"
      website="ada.dev"
      avatar="https://example.com/avatar.png"
    />,
    { width: 1200, height: 630 }
  );
}

API Reference

Profile

PropTypeDefault
namestring-
rolestring-
biostring-
avatarstring-
websitestring-
accentstring-