Kundli API integration, step by step

// Node 18+. Built-in fetch, no HTTP library needed.
const BASE = 'https://json.astrologyapi.com/v1'

const auth =
  'Basic ' +
  Buffer.from(
    `${process.env.ASTROLOGY_USER_ID}:${process.env.ASTROLOGY_API_KEY}`,
  ).toString('base64')

async function call(endpoint, body) {
  const res = await fetch(`${BASE}/${endpoint}`, {
    method: 'POST',
    headers: { Authorization: auth, 'Content-Type': 'application/json' },
    body: JSON.stringify(body),
  })
  if (!res.ok) {
    throw new Error(`${endpoint} failed (${res.status}): ${await res.text()}`)
  }
  return res.json()
}

curl -X POST https://json.astrologyapi.com/v1/geo_details \
  -u "$ASTROLOGY_USER_ID:$ASTROLOGY_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"place":"mumbai","maxRows":2}'

const geo = await call('geo_details', { place: 'mumbai', maxRows: 2 })
const top = geo.geonames[0]

// We return longitude as a STRING ("72.88261") and latitude as a
// number. parseFloat both so the payload is always numeric.
const lat = parseFloat(top.latitude)
const lon = parseFloat(top.longitude)

{
  "geonames": [
    {
      "place_name": "Mumbai",
      "latitude": 19.07283,
      "longitude": "72.88261",
      "timezone_id": "Asia/Kolkata",
      "country_code": "IN"
    },
    {
      "place_name": "Navi Mumbai",
      "latitude": 19.03681,
      "longitude": "73.01582",
      "timezone_id": "Asia/Kolkata",
      "country_code": "IN"
    }
  ]
}

curl -X POST https://json.astrologyapi.com/v1/timezone_with_dst \
  -u "$ASTROLOGY_USER_ID:$ASTROLOGY_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"latitude":19.07283,"longitude":72.88261,"date":"05-10-1990"}'

// Our date parameter is MM-DD-YYYY, not DD-MM-YYYY and not ISO.
// 05-10-1990 means May 10, 1990.
const tz = await call('timezone_with_dst', {
  latitude: lat,
  longitude: lon,
  date: '05-10-1990',
})
const tzone = tz.timezone // float, e.g. 5.5

{
  "status": true,
  "timezone": 5.5,
  "timezone_in_ms": 19800000,
  "date": "1992-12-01T00:00:00.000Z"
}

// Node: the object every chart endpoint below takes.
const payload = {
  day: 10,      // int
  month: 5,     // int
  year: 1990,   // int
  hour: 19,     // int, 24-hour
  min: 55,      // int
  lat: 19.07283,   // float, from geo_details
  lon: 72.88261,   // float, parseFloat of geo_details longitude
  tzone: 5.5,      // float, from timezone_with_dst
}

// Shell: reuse the same body across the curl examples below.
// BODY='{"day":10,"month":5,"year":1990,"hour":19,"min":55,"lat":19.07283,"lon":72.88261,"tzone":5.5}'

curl -X POST https://json.astrologyapi.com/v1/astro_details \
  -u "$ASTROLOGY_USER_ID:$ASTROLOGY_API_KEY" \
  -H "Content-Type: application/json" \
  -d "$BODY"

const astro = await call('astro_details', payload)
// astro.ascendant -> "Leo", astro.sign -> "Virgo" (moon sign)
// We spell the nakshatra field "Naksahtra". Use it as printed.

{
  "ascendant": "Leo",
  "Varna": "Vaishya",
  "Vashya": "Maanav",
  "Yoni": "Gau",
  "Gan": "Manushya",
  "Nadi": "Adi",
  "SignLord": "Mercury",
  "sign": "Virgo",
  "Naksahtra": "Uttra Phalguni",
  "NaksahtraLord": "Sun",
  "Charan": 3,
  "Yog": "Vaidhriti",
  "Karan": "Kaulav",
  "Tithi": "Krishna Dwadashi",
  "tatva": "Earth",
  "name_alphabet": "Pa",
  "paya": "Silver"
}

curl -X POST https://json.astrologyapi.com/v1/planets \
  -u "$ASTROLOGY_USER_ID:$ASTROLOGY_API_KEY" \
  -H "Content-Type: application/json" \
  -d "$BODY"

const planets = await call('planets', payload)

// We return isRetro as the STRING "true" or "false" on the nine bodies.
// The tenth entry (Ascendant, id 9) uses a literal boolean false.
// Compare against the string, never a truthy check.
const retro = planets.filter((p) => p.isRetro === 'true').map((p) => p.name)

[
  {
    "id": 3,
    "name": "Mercury",
    "fullDegree": 85.49171301406825,
    "normDegree": 25.491713014068253,
    "speed": -0.29467903633858694,
    "isRetro": "true",
    "sign": "Gemini",
    "signLord": "Mercury",
    "nakshatra": "Punarvasu",
    "nakshatraLord": "Jupiter",
    "nakshatra_pad": 2,
    "house": 9,
    "is_planet_set": false,
    "planet_awastha": "Mrit"
  }
]

curl -X POST https://json.astrologyapi.com/v1/horo_chart_image/D1 \
  -u "$ASTROLOGY_USER_ID:$ASTROLOGY_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"day":10,"month":5,"year":1990,"hour":19,"min":55,"lat":19.07283,"lon":72.88261,"tzone":5.5,"chartType":"north"}'

const d1 = await call('horo_chart_image/D1', {
  ...payload,
  chartType: 'north', // optional style parameter
})
// d1.svg is an SVG string. Render it inline or save it to a file.

curl -X POST https://json.astrologyapi.com/v1/horo_chart/D9 \
  -u "$ASTROLOGY_USER_ID:$ASTROLOGY_API_KEY" \
  -H "Content-Type: application/json" \
  -d "$BODY"

const d9 = await call('horo_chart/D9', payload)
// Array of 12 sign objects. Each lists the planets placed in that sign.

[
  {
    "sign": 3,
    "sign_name": "Gemini",
    "planet": ["SUN", "MARS", "MERCURY", "VENUS"],
    "planet_small": ["Su ", "Ma ", "Me ", "Ve "],
    "planet_degree": []
  },
  {
    "sign": 4,
    "sign_name": "Cancer",
    "planet": ["RAHU"],
    "planet_small": ["Ra "],
    "planet_degree": []
  }
]

curl -X POST https://json.astrologyapi.com/v1/current_vdasha \
  -u "$ASTROLOGY_USER_ID:$ASTROLOGY_API_KEY" \
  -H "Content-Type: application/json" \
  -d "$BODY"

const dasha = await call('current_vdasha', payload)
// dasha.major is the running mahadasha. minor, sub_minor,
// sub_sub_minor, and sub_sub_sub_minor nest below it.

{
  "major": {
    "planet": "Sun",
    "planet_id": 0,
    "start": "2-5-2021  8:7",
    "end": "2-5-2027  20:7"
  },
  "minor": {
    "planet": "Saturn",
    "planet_id": 6,
    "start": "8-3-2024  7:13",
    "end": "18-2-2025  6:55"
  }
}

curl -X POST https://json.astrologyapi.com/v1/shadbala \
  -u "$ASTROLOGY_USER_ID:$ASTROLOGY_API_KEY" \
  -H "Content-Type: application/json" \
  -d "$BODY"

curl -X POST https://json.astrologyapi.com/v1/bhavabala \
  -u "$ASTROLOGY_USER_ID:$ASTROLOGY_API_KEY" \
  -H "Content-Type: application/json" \
  -d "$BODY"

const [shad, bhav] = await Promise.all([
  call('shadbala', payload),
  call('bhavabala', payload),
])

const strongPlanets = shad.filter((p) => p.is_strong).map((p) => p.name)
const strongestHouse = bhav.summary.strongest_house_id // 1-12

[
  {
    "id": "sun",
    "name": "Sun",
    "is_strong": false,
    "required_minimum_virupa": 390,
    "strength_percent_of_minimum": 97.714127,
    "total_shadbala_rupa": 6.351418,
    "total_shadbala_virupa": 381.085096,
    "components": {
      "cheshta_bala": 22.130978,
      "dig_bala": 42.130978,
      "drik_bala": -10.668116,
      "naisargika_bala": 60,
      "kala_bala": { "total": 127.955567 },
      "sthana_bala": { "total": 139.535688 }
    }
  }
]

{
  "summary": {
    "strongest_house_id": 5,
    "weakest_house_id": 10,
    "ranked_house_ids_desc": [5, 3, 12, 9, 11, 2, 1, 4, 6, 8, 7, 10]
  },
  "houses": [
    {
      "id": 1,
      "name": "Lagna",
      "bhava_sign": "Sagittarius",
      "bhavamadhya_longitude": 255,
      "strength_percent_of_baseline": 49.379332,
      "total_bhavabala_rupa": 1.975173,
      "total_bhavabala_virupa": 118.510396
    }
  ]
}

// pages/index.jsx
import { useState } from 'react'
import { useRouter } from 'next/router'

export default function BirthForm() {
  const router = useRouter()
  const [name, setName] = useState('')
  const [date, setDate] = useState('')
  const [time, setTime] = useState('')
  const [place, setPlace] = useState('')
  const [candidates, setCandidates] = useState(null)
  const [picked, setPicked] = useState(null)
  const [searching, setSearching] = useState(false)
  const [error, setError] = useState('')

  async function search() {
    setSearching(true)
    setError('')
    setPicked(null)
    try {
      const res = await fetch('/api/place-search?place=' + encodeURIComponent(place))
      const data = await res.json()
      if (!res.ok) throw new Error(data.error || 'Search failed')
      setCandidates(data.candidates)
      if (data.candidates.length === 0) setError('No places found. Try another spelling.')
    } catch (err) {
      setError(err.message)
    }
    setSearching(false)
  }

  function submit(e) {
    e.preventDefault()
    if (!picked) {
      setError('Search for the birth place and pick one from the list.')
      return
    }
    const [year, month, day] = date.split('-').map(Number)
    const [hour, min] = time.split(':').map(Number)
    sessionStorage.setItem(
      'birth',
      JSON.stringify({
        name, day, month, year, hour, min,
        lat: picked.lat, lon: picked.lon, place: picked.name,
      }),
    )
    router.push('/kundli')
  }

  return (
    <main className="form-page">
      <h1>Generate a kundli</h1>
      <form onSubmit={submit}>
        <label htmlFor="name">Full name</label>
        <input id="name" value={name} onChange={(e) => setName(e.target.value)} required />

        <label htmlFor="date">Birth date</label>
        <input id="date" type="date" value={date} onChange={(e) => setDate(e.target.value)} required />

        <label htmlFor="time">Birth time</label>
        <input id="time" type="time" value={time} onChange={(e) => setTime(e.target.value)} required />

        <label htmlFor="place">Birth place</label>
        <div className="place-row">
          <input id="place" value={place} onChange={(e) => setPlace(e.target.value)} placeholder="City name" />
          <button type="button" onClick={search} disabled={searching || !place.trim()}>
            {searching ? 'Searching' : 'Search'}
          </button>
        </div>

        {candidates && candidates.length > 0 && (
          <ul className="candidates">
            {candidates.map((c) => (
              <li key={c.name + c.lat}>
                <button
                  type="button"
                  className={picked === c ? 'candidate picked' : 'candidate'}
                  onClick={() => setPicked(c)}
                >
                  {c.name}, {c.country} ({c.lat.toFixed(2)}, {c.lon.toFixed(2)})
                </button>
              </li>
            ))}
          </ul>
        )}
        {error && <p className="error">{error}</p>}

        <button type="submit" className="primary">Generate kundli</button>
      </form>
    </main>
  )
}

// pages/api/place-search.js
const BASE = 'https://json.astrologyapi.com/v1'

export default async function handler(req, res) {
  const place = String(req.query.place || '').trim()
  if (!place) return res.status(400).json({ error: 'place is required' })

  const auth =
    'Basic ' +
    Buffer.from(
      `${process.env.ASTROLOGY_USER_ID}:${process.env.ASTROLOGY_API_KEY}`,
    ).toString('base64')

  const upstream = await fetch(`${BASE}/geo_details`, {
    method: 'POST',
    headers: { Authorization: auth, 'Content-Type': 'application/json' },
    body: JSON.stringify({ place, maxRows: 6 }),
  })
  if (!upstream.ok) {
    return res
      .status(502)
      .json({ error: `geo_details failed (${upstream.status})` })
  }
  const data = await upstream.json()

  // We return longitude as a string in geo_details. parseFloat both
  // coordinates here so everything downstream is numeric.
  const candidates = (data.geonames || []).map((g) => ({
    name: g.place_name,
    country: g.country_code,
    lat: parseFloat(g.latitude),
    lon: parseFloat(g.longitude),
  }))
  res.status(200).json({ candidates })
}

// pages/api/kundli.js
const BASE = 'https://json.astrologyapi.com/v1'

const auth =
  'Basic ' +
  Buffer.from(
    `${process.env.ASTROLOGY_USER_ID}:${process.env.ASTROLOGY_API_KEY}`,
  ).toString('base64')

async function call(endpoint, body, attempt = 0) {
  const res = await fetch(`${BASE}/${endpoint}`, {
    method: 'POST',
    headers: { Authorization: auth, 'Content-Type': 'application/json' },
    body: JSON.stringify(body),
  })
  // A 5xx is transient on any API. Retry once, then give up.
  if (res.status >= 500 && attempt === 0) return call(endpoint, body, 1)
  if (!res.ok) {
    throw new Error(`${endpoint} failed (${res.status}): ${await res.text()}`)
  }
  return res.json()
}

export default async function handler(req, res) {
  if (req.method !== 'POST') return res.status(405).json({ error: 'POST only' })
  const { day, month, year, hour, min, lat, lon } = req.body || {}
  const fields = [day, month, year, hour, min, lat, lon]
  if (!fields.every((v) => typeof v === 'number' && Number.isFinite(v))) {
    return res.status(400).json({
      error: 'day, month, year, hour, min, lat, lon must all be numbers',
    })
  }

  try {
    // Our timezone endpoint takes the date as MM-DD-YYYY.
    const date = [
      String(month).padStart(2, '0'),
      String(day).padStart(2, '0'),
      year,
    ].join('-')
    const tz = await call('timezone_with_dst', {
      latitude: lat,
      longitude: lon,
      date,
    })

    // The eight-field payload every chart endpoint takes.
    const payload = { day, month, year, hour, min, lat, lon, tzone: tz.timezone }

    // All seven take the same payload, so fan out in parallel.
    const [astro, planets, d1, d9, dasha, shadbala, bhavabala] =
      await Promise.all([
        call('astro_details', payload),
        call('planets', payload),
        call('horo_chart_image/D1', { ...payload, chartType: 'north' }),
        call('horo_chart/D9', payload),
        call('current_vdasha', payload),
        call('shadbala', payload),
        call('bhavabala', payload),
      ])

    res.status(200).json({
      tzone: tz.timezone,
      astro, planets, d1, d9, dasha, shadbala, bhavabala,
    })
  } catch (err) {
    res.status(502).json({ error: err.message })
  }
}

// pages/kundli.jsx
import { useEffect, useState } from 'react'
import Link from 'next/link'

const pad = (n) => String(n).padStart(2, '0')
const DASHA_LEVELS = ['major', 'minor', 'sub_minor', 'sub_sub_minor', 'sub_sub_sub_minor']

export default function KundliResult() {
  const [birth, setBirth] = useState(null)
  const [data, setData] = useState(null)
  const [error, setError] = useState('')

  useEffect(() => {
    const stored = sessionStorage.getItem('birth')
    if (!stored) {
      setError('No birth details found. Start from the form.')
      return
    }
    const b = JSON.parse(stored)
    setBirth(b)
    fetch('/api/kundli', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        day: b.day, month: b.month, year: b.year,
        hour: b.hour, min: b.min, lat: b.lat, lon: b.lon,
      }),
    })
      .then(async (res) => {
        const json = await res.json()
        if (!res.ok) throw new Error(json.error || 'Request failed')
        setData(json)
      })
      .catch((err) => setError(err.message))
  }, [])

  if (error) {
    return (
      <main className="result-page">
        <p className="error">{error}</p>
        <Link href="/">Back to the form</Link>
      </main>
    )
  }
  if (!data || !birth) {
    return (
      <main className="result-page">
        <p className="loading">Computing the chart. This takes a few seconds.</p>
      </main>
    )
  }

  const { astro, planets, d1, d9, dasha, shadbala, bhavabala } = data
  const occupied = d9.filter((s) => s.planet.length > 0)

  return (
    <main className="result-page">
      <header className="card">
        <h1>{birth.name}</h1>
        <p className="muted">
          {pad(birth.day)}-{pad(birth.month)}-{birth.year} at {pad(birth.hour)}:{pad(birth.min)}
          {' · '}{birth.place}{' · '}UTC{data.tzone >= 0 ? '+' : ''}{data.tzone}
        </p>
      </header>

      <div className="grid">
        <section className="card">
          <h2>Core details</h2>
          <dl className="facts">
            <dt>Ascendant</dt><dd>{astro.ascendant}</dd>
            <dt>Moon sign</dt><dd>{astro.sign}</dd>
            <dt>Nakshatra</dt><dd>{astro.Naksahtra} (pada {astro.Charan})</dd>
            <dt>Tithi</dt><dd>{astro.Tithi}</dd>
          </dl>
        </section>

        <section className="card">
          <h2>Birth chart (D1)</h2>
          <div className="chart" dangerouslySetInnerHTML={{ __html: d1.svg }} />
        </section>
      </div>

      <section className="card">
        <h2>Planets</h2>
        <table>
          <thead>
            <tr><th>Planet</th><th>Sign</th><th>House</th><th>Retro</th></tr>
          </thead>
          <tbody>
            {planets.map((p) => (
              <tr key={p.id}>
                <td>{p.name}</td>
                <td>{p.sign}</td>
                <td>{p.house}</td>
                <td>{p.isRetro === 'true' ? 'Yes' : ''}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>

      <div className="grid">
        <section className="card">
          <h2>Navamsha (D9)</h2>
          <dl className="facts">
            {occupied.map((s) => (
              <div key={s.sign} className="fact-row">
                <dt>{s.sign_name}</dt>
                <dd>{s.planet.join(', ')}</dd>
              </div>
            ))}
          </dl>
        </section>

        <section className="card">
          <h2>Current dasha</h2>
          <ol className="dasha">
            {DASHA_LEVELS.map((level) =>
              dasha[level] ? (
                <li key={level}>
                  <strong>{dasha[level].planet}</strong>
                  <span className="muted"> {dasha[level].start} to {dasha[level].end}</span>
                </li>
              ) : null,
            )}
          </ol>
        </section>
      </div>

      <div className="grid">
        <section className="card">
          <h2>Planet strength (shadbala)</h2>
          {shadbala.map((p) => (
            <div key={p.id} className="bar-row">
              <span className="bar-label">{p.name}</span>
              <div className="bar">
                <div
                  className="bar-fill"
                  style={{ width: Math.min(100, p.strength_percent_of_minimum) + '%' }}
                />
              </div>
              <span className="bar-value">{Math.round(p.strength_percent_of_minimum)}%</span>
            </div>
          ))}
        </section>

        <section className="card">
          <h2>House strength (bhavabala)</h2>
          <p>
            Strongest house: <strong>{bhavabala.summary.strongest_house_id}</strong>.
            Weakest house: <strong>{bhavabala.summary.weakest_house_id}</strong>.
          </p>
        </section>
      </div>
    </main>
  )
}

/* styles/globals.css */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: #FAFAF7;
  color: #1A1A1A;
  line-height: 1.5;
}

h1 { font-size: 24px; margin: 0 0 16px; }
h2 { font-size: 16px; margin: 0 0 12px; }
a { color: #635BFF; }

.form-page { max-width: 640px; margin: 48px auto; padding: 0 16px; }
.result-page { max-width: 960px; margin: 48px auto; padding: 0 16px; }

label {
  display: block;
  margin: 16px 0 4px;
  font-size: 14px;
  color: #6B6B6B;
}

input {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid #E5E5E0;
  border-radius: 10px;
  background: #FFFFFF;
  color: #1A1A1A;
}

button {
  padding: 10px 16px;
  font-size: 15px;
  border: none;
  border-radius: 8px;
  background: #635BFF;
  color: #FFFFFF;
  cursor: pointer;
}
button:disabled { opacity: 0.5; cursor: default; }
button.primary { width: 100%; margin-top: 24px; }

.place-row { display: flex; gap: 8px; }
.place-row input { flex: 1; }

.candidates { list-style: none; margin: 8px 0 0; padding: 0; }
.candidates li + li { margin-top: 4px; }
.candidate {
  width: 100%;
  text-align: left;
  background: #FFFFFF;
  color: #1A1A1A;
  border: 1px solid #E5E5E0;
  border-radius: 10px;
}
.candidate.picked { border-color: #635BFF; color: #635BFF; }

.card {
  background: #FFFFFF;
  border: 1px solid #E5E5E0;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
}

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
}

.facts {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
}
.facts dt { color: #6B6B6B; }
.facts dd { margin: 0; }
.fact-row { display: contents; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #E5E5E0; }
th { color: #6B6B6B; font-weight: 500; }

.chart { max-width: 100%; }
.chart svg { max-width: 100%; height: auto; }

.dasha { margin: 0; padding-left: 20px; }
.dasha li { margin-bottom: 6px; }

.bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bar-label { width: 64px; font-size: 14px; }
.bar { flex: 1; height: 8px; background: #E5E5E0; border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; background: #635BFF; }
.bar-value { width: 44px; font-size: 13px; color: #6B6B6B; text-align: right; }

.muted { color: #6B6B6B; }
.error { color: #B4231F; }
.loading { color: #6B6B6B; }