Build a birth chart page

This guide builds one page: a person types a place and birth time, and sees their chart. The steps work in any web framework. The examples use Next.js route handlers.

Keep your secret key on the server. The browser calls your routes, and your routes call the API.

1. Search for the placeCopy Anchor Link

Call geo-search as the person types. It searches about 780,000 places in any script, and returns coordinates and a time zone:

// app/api/places/route.ts
export async function GET(req: Request) {
  const name = new URL(req.url).searchParams.get("q") ?? "";
  const res = await fetch("https://api.96astroapi.com/v1/utilities/geo-search", {
    method: "POST",
    headers: { Authorization: `Bearer ${process.env.ASTRO_API_KEY}`, "Content-Type": "application/json" },
    body: JSON.stringify({ name, limit: 8 }),
  });
  return Response.json(await res.json());
}

Each place has city, state, country, latitude, longitude and timezone. Keep the last three for the next step. Wait until two letters are typed, and wait about 200 ms between keys.

2. Get the chartCopy Anchor Link

// app/api/chart/route.ts
export async function POST(req: Request) {
  const birth = await req.json();
  const res = await fetch("https://api.96astroapi.com/v1/vedic-charts/planet-positions", {
    method: "POST",
    headers: { Authorization: `Bearer ${process.env.ASTRO_API_KEY}`, "Content-Type": "application/json" },
    body: JSON.stringify(birth),
  });
  return Response.json(await res.json());
}

Send the local time without an offset, and the zone separately:

{
    "datetime": "1990-10-18T14:30:00",
    "timezone": "Asia/Kolkata",
    "latitude": 28.6139,
    "longitude": 77.209
  }

If that clock time happened twice or never because of a clock change, you get a 422 that lists the choices. Show them to the person. Never guess.

3. Show itCopy Anchor Link

data.planets holds each planet's sign, degree, nakshatra and house.

For the drawing, call POST /v1/vedic-charts/chart-image-styles with the same birth plus "charts": ["D1"] and "style": "north". data.images holds it as SVG, which you can place directly in the page. To draw it yourself in your own colours, packages/chart-js turns the planet positions into SVG.

A chart never changes, so fetch it once and keep it with the birth.

NextCopy Anchor Link

• Requests and responses has the rules for dates and zones.
• Plans shows which plan includes vedic-charts.