Daily Horoscope

# Build a daily horoscope widget > Ship a 12-sign horoscope page with the drop-in `` web component. No framework, no markup to maintain, dynamic or fully static. Time to ship: 15 minutes. This is the fastest end-to-end build in the Roxy catalog. Pick the sign, render the card. Wellness embeds, lifestyle landing-page widgets, daily-check-in features, all built around `GET /astrology/horoscope/{sign}/daily`. ## What you can build - Standalone daily horoscope pages - Wellness and meditation app daily-check-in cards - Landing-page widgets that refresh automatically - Weekly and monthly variants with the same fetch shape - Personalized forecasts by layering `POST /astrology/transits` on top of a saved natal chart ## Prerequisites 1. A Roxy API key from [/account](/account). Free trial keys work. 2. A text editor and a browser. No build step. **Tip: No Location API call needed. The daily horoscope endpoint is sign-only, no birth data. Save the geocode flow for natal-chart, synastry, kundli, KP, or Human Design builds (see the [astrology guide](/docs/guides/astrology) or [vedic guide](/docs/guides/vedic-astrology)).** ## Install Pick one of three paths: ### npm (TypeScript / Node) ```bash npm install @roxyapi/sdk ``` ### Python ```bash pip install roxy-sdk ``` ### PHP ```bash composer require roxyapi/sdk ``` ### CDN (no install) ```html ``` ## Call the endpoint One GET, one sign, every field you need to render a card. Verified against the [live OpenAPI spec](https://roxyapi.com/api/v2/openapi.json) (`getDailyHoroscope`). ### curl ```bash curl "https://roxyapi.com/api/v2/astrology/horoscope/aries/daily" \ -H "X-API-Key: $ROXY_API_KEY" ``` ### TypeScript SDK ```typescript import { createRoxy } from '@roxyapi/sdk'; const roxy = createRoxy(process.env.ROXY_API_KEY!); const { data } = await roxy.astrology.getDailyHoroscope({ path: { sign: 'aries' }, }); console.log(data.overview); // hero paragraph console.log(data.love); // love-specific paragraph console.log(data.luckyNumber); // 7 console.log(data.compatibleSigns); // ["Leo", "Sagittarius"] ``` ### Python SDK ```python import os from roxy_sdk import create_roxy roxy = create_roxy(os.environ['ROXY_API_KEY']) horoscope = roxy.astrology.get_daily_horoscope(sign='aries') print(horoscope['overview']) print(horoscope['luckyNumber']) ``` ### PHP SDK ```php astrology->getDailyHoroscope(sign: 'aries'); echo $horoscope['overview']; echo $horoscope['luckyNumber']; ``` ### MCP (one-line agent setup) ```bash claude mcp add-json --scope user roxy-astrology '{"type":"http","url":"https://roxyapi.com/mcp/astrology","headers":{"X-API-Key":"YOUR_KEY"}}' ``` Then in Claude, Cursor, or any client: "what is the Aries horoscope today." The agent picks the tool and summarizes. Full client setup at the [MCP guide](/docs/mcp). Response fields exposed by the endpoint: `sign`, `date`, `overview`, `love`, `career`, `health`, `finance`, `advice`, `luckyNumber`, `luckyColor`, `compatibleSigns[]`, `moonSign`, `moonPhase`, `energyRating` (1-10), `activeTransits[]`. ## Render the result Two ways, ordered shortest first. ### Option A: drop-in web component (recommended) `` is a Lit web component shipped by [`@roxyapi/ui`](/docs/ui). Pass the SDK response, the card renders. Works in vanilla HTML, React, Vue, Svelte, WordPress, Wix, Shopify, anything. ```html Daily Horoscope

``` The card handles layout, lucky-number row, moon phase, compatible signs, and theming via CSS custom properties. Override colors with `--roxy-accent`, `--roxy-bg`, `--roxy-border`. See the [UI components page](/docs/ui) for the full token list. **Tip: Switch `period="weekly"` or `period="monthly"` on the same `` tag. Fetch `/astrology/horoscope/{sign}/weekly` or `/monthly` and pass the response. The card adapts.** ### Option B: no-build, server-rendered (inline JSON) When the page is served from a static host or a cache and there is no client JavaScript to set `.data`, fetch on your server with the secret key and inline the unwrapped response into the card as a child ` ``` Your server template writes the JSON in. The inlined JSON is the exact shape `getDailyHoroscope` returns, the same object you would assign to `.data`. Inline the unwrapped response, never the SDK envelope. Setting the JavaScript `.data` property later always wins over the inlined JSON, so one card tag covers both server-rendered and dynamic pages with no branching. **Warning: Fetch the response on your server, where the secret key lives. Never put a secret `sk_*` key in page source: it is harvestable in 30 seconds. For client-side fetching once published, use a publishable key (`pk_live_*` / `pk_test_*`, origin-restricted, coming soon) or proxy through a backend (the [Next.js guide](/docs/integrations/nextjs) is the drop-in pattern).** ## Ready-made starter Skip the build entirely with the open-source starter at [/starters/astrology-starter-app](/starters). React Native + Expo + TypeScript, ships horoscopes, natal charts, synastry, and transits. Clone and deploy: ```bash git clone https://github.com/RoxyAPI/astrology-starter-app cd astrology-starter-app npm install echo "EXPO_PUBLIC_ROXYAPI_KEY=your_key" > .env.local npm start ``` For the web build, the [astrology-ai-chatbot starter](https://github.com/RoxyAPI/astrology-ai-chatbot) ships horoscopes alongside the full conversational surface, Next.js 16 + Vercel AI SDK + Remote MCP. ## Deploy Two zero-config options. - **Cloudflare Pages.** Drag the file into a new project at [pages.cloudflare.com](https://pages.cloudflare.com). Global CDN, HTTPS, deploys in under a minute. - **Vercel.** Drop the file in a folder, run `npx vercel`. For production, move the API key to an environment variable and proxy through a serverless function. One file becomes two: the client calls your function, your function calls Roxy with the secret key. Or wait for publishable keys (`pk_live_*`) and skip the proxy. ## Gotchas - **Sign slugs are lowercase in the URL.** `aries`, not `Aries`. Server is case-insensitive but the convention is lowercase. - **`compatibleSigns` returns capitalized names** (`["Leo", "Sagittarius"]`) but the path param stays lowercase. Easy templating trip. - **Weekly and monthly add extra fields.** Switch the URL to `/weekly` or `/monthly` and the response gains fields like `week`, `luckyDays[]`, `weekByWeek[]`, `keyDates[]`. - **Do not ship a secret key in browser code for production.** Use a publishable key with origin allowlist, or proxy. The demo HTML above is for local prototyping only. - **All accuracy figures are verified against NASA JPL Horizons.** Our calculation engine is the [Roxy Ephemeris](/methodology), not a generic library. ## What to build next - The [astrology guide](/docs/guides/astrology) lists every Western endpoint your widget can layer on (transits, moon phase, synastry). - The [dating app tutorial](/docs/tutorials/dating-app) wires two-person compatibility on the same astrology surface. - The [personalized tracker tutorial](/docs/tutorials/personalized-tracker) goes deeper: Human Design bodygraph, daily forecast, Life Path, all on one page for one user.