{data.sign} daily
{data.overview}
Lucky {data.luckyNumber}, color {data.luckyColor}Could not load horoscope
; return ({data.sign}
{data.overview}
Lucky {data.luckyNumber}Loading...
; return ( <>{data.overview}
Lucky number {data.luckyNumber} ); } ``` **Tip: This is also how you build an **embeddable widget**. Add CORS headers (`Access-Control-Allow-Origin: *`) to the Route Handler response and other websites can iframe or fetch it. They use your quota, you control the brand.** ## Pattern 4: render the response with RoxyAPI UI Patterns 1 to 3 fetch the data. They leave you hand-building the markup. For charts, tables, and reading cards, render the response with [`@roxyapi/ui-react`](/ui), the official component library. The Server Component fetches with the SDK and the secret key, then passes the unwrapped `data` to a small client component that renders the matching component. The key never crosses the network. ```bash npm install @roxyapi/ui-react # or: bun add @roxyapi/ui-react ``` The components mount Custom Elements, which need the DOM, so any file that imports them must declare `'use client'`. Server Components stay key-side and stream the data down. This is the same backend-only-key rule from above: the fetch is on the server, only the response reaches the browser. ```tsx // app/birth-chart/page.tsx (Server Component, holds the key) import { createRoxy } from '@roxyapi/sdk'; import ChartView from './chart-view'; const roxy = createRoxy(process.env.ROXY_API_KEY!); export default async function BirthChartPage() { // Geocode first. Chart endpoints need latitude, longitude, timezone. const { data: places } = await roxy.location.searchCities({ query: { q: 'London' }, }); const city = places?.cities[0]; if (!city) returnLocation not found
; const { data, error } = await roxy.astrology.generateNatalChart({ body: { date: '1990-01-15', time: '14:30:00', latitude: city.latitude, longitude: city.longitude, timezone: city.timezone, }, }); if (error || !data) returnCould not generate chart
; returnCould not load horoscope
; return ({data.sign}
{data.overview}
Lucky number {data.luckyNumber}Loading your card of the day...
Could not load today card.
'; return; } const data = await res.json(); el.innerHTML = `${data.card.name}${data.card.reversed ? ' (Reversed)' : ''}
${data.dailyMessage}
`; }); ``` ### curl preview ```bash curl -X POST "https://roxyapi.com/api/v2/tarot/daily" \ -H "X-API-Key: $ROXY_API_KEY" \ -H "Content-Type: application/json" \ -d '{ "seed": "shopify-customer-12345" }' ``` The browser only ever talks to `your-store.myshopify.com/apps/roxy/...`. RoxyAPI never sees the customer browser, the customer browser never sees the RoxyAPI key. ### Customer account daily horoscope The customer account page is a great place to surface a daily reading. You have `customer.id` and any saved metafields (birth date, zodiac sign) available in Liquid. ```liquid {% comment %} sections/customer-horoscope.liquid {% endcomment %} {% if customer %} {% assign sign = customer.metafields.astrology.zodiac_sign | default: 'aries' %}Loading your daily horoscope...