[▲ Vercel Community](/) · [Categories](/categories) · [Latest](/latest) · [Top](/top) · [Live](/live) [Showcase](/c/showcase/41) # Using v0.dev to build open graph images (and rip off Luma) 288 views · 8 likes · 3 posts Jonoroboto (@jonoroboto) · 2024-09-03 · ♥ 3 Something that I haven't seen folks mention yet that's worth mentioning, is the ability to use v0.dev to create open graph images with [OG image generation](https://vercel.com/docs/functions/og-image-generation). We have been a huge fan of [Luma](https://lu.ma/), the events platform, for quite a while and thought we would take inspiration from their dynamic OG. We may or may not have taken a ***little too much*** inspiration from this event and the OG https://lu.ma/l08hjt6q If you want to see our version, with a colour change and just enough differentiation that it might not be classed as blatant plagiarism. https://v0.build/dNkxu6r The beauty of this, is with a little bit of prompting, you can quickly pull this into the [OG Playground](https://og-playground.vercel.app/) and test out some different content. ## Where we'll end up using this We'd love to spoil the surprise but keep your eye out on the [Roboot Studio projects](https://roboto.studio/project) in the next few weeks for the full write up. I'll leave a hint in for what we are going to do with it for any of you Sanity nerds out there - *[did you know about this little piece of metadata](https://www.sanity.io/docs/image-metadata#5bb0c7e96f42)* Pauline P. Narvas (@pawlean) · 2024-09-03 · ♥ 2 The OG image generation is probably hands down one of my favourite Vercel functionalities. It's just so good! For my personal blog which I recently added [a fresh coat of paint](https://x.com/paulienuh/status/1828871764765475114) to, it's been *so* fun to be able to create an OG image with code to match. :woman_cook: In the past, I would manually do it with Photoshop or recently Figma. Too slow. Need to ship. 🤣 https://www.pawlean.com/posts/my-community-building-mistakes Also a big fan of Luma! I like the inspiration you got from them. :slight_smile: Jonoroboto (@jonoroboto) · 2024-09-03 · ♥ 3 Man, I really like the hand-drawn fonts on that page! Also we actually got the full code up and running. Looks pretty cool. Will be sharing code when I get two seconds to actually write up a minimal reproduction as it takes some code from Sanity, some from Next.js. Also something I just found in a Github discussion that [saved me so much time with using Google Fonts](https://github.com/vercel/satori/issues/162#issuecomment-2058182646): ``` async function getTtfFont(family: string, axes: string[], value: number[]): Promise<ArrayBuffer> { const familyParam = axes.join(',') + '@' + value.join(','); // Get css style sheet with user agent Mozilla/5.0 Firefox/1.0 to ensure non-variable TTF is returned const cssCall = await fetch(`https://fonts.googleapis.com/css2?family=${family}:${familyParam}&display=swap`, { headers: { 'User-Agent': 'Mozilla/5.0 Firefox/1.0', }, }); const css = await cssCall.text(); const ttfUrl = css.match(/url\(([^)]+)\)/)?.[1]; return await fetch(ttfUrl).then(res => res.arrayBuffer()); } ``` ## The result Here's the results, it's taking dominant color, which actually looks pretty interesting on the flowers:    
