Skip to content
← All posts

Build an astrology website with no coding experience

From an empty folder to a live site: the stack, the one security rule that matters, and how MCP stops your AI assistant guessing at the API.

Occult API6 min read

You do not need to know how to program to put a working Vedic astrology site online. What you do need is a clear idea of what the site should show, an AI assistant that can write and run code for you, and a source of real calculations so the numbers on the page are correct rather than invented.

This guide walks the whole way: from an empty folder to a site anyone can visit. It assumes no prior coding experience. It does assume you are willing to read what the assistant writes and say "no, not like that" when it gets something wrong — that is the actual skill involved.

What you are going to build

A site with a few pages: today's panchang for a chosen city, a birth-chart form that draws a chart, and a festival calendar. Every number comes from the API, so it is right for any date and any place, not hard-coded for one city.

Daily panchang rendered on a web page

The tech stack, and why

  • Next.js — the website framework. Chosen because it can call the API on the server, which matters for key safety below, and because assistants know it extremely well.
  • Vercel — hosting. Free to start, connects to your code and deploys on every change.
  • Occult API — the calculations. Panchang, charts, dashas, muhurta and the rest.
  • Claude Code or Cursor — the assistant that writes the code. Either is fine.
  • MCP — the bridge that lets the assistant read the API reference and make real calls while it builds.

That is five things, and you only install two of them.

Why MCP changes this

Without MCP, an assistant writing code against an API is guessing. It has to invent field names, and it will invent them confidently and wrongly. You then spend your afternoon pasting error messages back at it.

With MCP connected, the assistant can look up the real request format before it writes a line, and call the endpoint to check the response is what it expected. It stops guessing.

Three of the five MCP tools cost nothing to use — searching, reading the schema and checking your account are all free. Only an actual calculation spends a credit, and failed requests are never charged.

Step 1 — get an API key

Sign up, then create a key from the dashboard. It looks like yt_live_.... Keep it somewhere private for a moment; where it ends up matters, and that is the next section.

Step 2 — the one security rule

This is the single thing most worth getting right, so it comes before the building rather than after.

Your API key must never reach the browser. It is a server-side credential. Anything in browser JavaScript is readable by anyone who opens developer tools, and a leaked key is someone else spending your credits.

The fix is simple and Next.js does it for you: call the API from a server component or a route handler, never from code that runs in the browser. Put the key in an environment variable named OCCULT_API_KEY, and tell your assistant plainly: "call the API server-side only, never expose the key to the client." A good assistant will do the right thing; saying it out loud means you can check.

Step 3 — connect MCP

One command for Claude Code:

claude mcp add occult-api -e OCCULT_API_KEY=yt_live_your_key_here -- npx -y occult-api-mcp

For Cursor and other clients it is a small JSON block instead. The MCP setup guide has the exact config for each one, and the MCP page has the same information alongside the tool list.

Step 4 — describe the site, then look at what comes back

Open your assistant in an empty folder and describe what you want. Be specific about the pages. Something like:

Create a Next.js site with three pages: today's panchang for a city I pick, a birth-chart form that shows a chart, and a festival calendar for the year. Use the Occult API through MCP. Call it server-side only — the key must never reach the browser. Keep the design clean and readable on a phone.

The assistant will search the endpoints, read the request format, build the pages, and usually make a test call to confirm the shape of the response. Ask it to show you the page before moving on.

Step 5 — the endpoints you will actually use

You do not need to memorise these; the assistant finds them. They are here so you can check its work.

  • /api/astro/panchanga/ — tithi, nakshatra, yoga, karana with their exact transition times, plus sunrise and sunset.
  • /api/astro/chart/ — the birth chart. Set render: "svg" and it returns a ready-to-display diagram, so nobody has to draw one from raw longitudes.
  • /api/astro/festival/ — festival dates for the whole year with begin and end times.
  • /api/astro/choghadiya/ — auspicious and inauspicious windows through the day.

A North Indian birth chart returned by the chart endpoint

That chart image is the svg field from the chart endpoint. It is worth knowing about early, because "draw a North Indian chart correctly" is otherwise a genuinely fiddly piece of work.

Step 6 — check it against something you trust

Before you put it online, pick a date you can verify — your own birthday, or today's panchang against a printed almanac — and confirm the site agrees. This catches the most common beginner mistake, which is a timezone being applied twice or not at all.

You can send the same request from the playground in your browser and compare, without writing anything.

Step 7 — put it online

Ask the assistant to deploy it to Vercel. It will walk you through connecting the folder and setting the environment variable. Set OCCULT_API_KEY in Vercel's own settings — not in a file you commit. If you remember one thing from this guide, make it that one.

What this costs

One credit per successful call, whatever you ask for in it. Failed requests are not charged. A panchang page that serves a few hundred visitors a day is inexpensive, and you can cut it further by caching a day's panchang rather than recalculating it per visitor — worth asking your assistant to add once the site works.

Where people get stuck

  • Everything is one day out. Almost always a timezone issue. Send the offset explicitly rather than relying on a default.
  • The chart looks wrong. Check whether you want the Rashi chart (D-1) or a divisional chart, and which ayanamsa you asked for.
  • It works locally but not once deployed. The environment variable is not set on the host. Set it in the hosting dashboard.

Next

If you would rather build an app than a website, the app guide covers that, including the one extra thing mobile apps have to get right. If MCP is not connected yet, start with the setup guide.

Build this yourself

Every endpoint mentioned here is in the reference, and you can send a real request from the browser before writing any code.