Astrolens

Finally the v1 of the Astrolens is working great for my aspect, hosted in vercel(https://astrolens-star.vercel.app/) check it out bros!

🚀 Devlog Update: Conquering the Vercel Production Proxy
The Goal:
Get the AstroLens AI explainer working in production. Everything ran perfectly on localhost, but the live Vercel deployment was throwing immediate API connection errors.

The Struggle:
Two massive deployment gotchas hit at the same time:

Missing Keys: Vercel doesn’t have access to the local .env file because it is strictly ignored by Git. The live server was trying to authenticate with undefined.

The Proxy Mirage: The Vite proxy configuration (/ai-api/…) is a local development feature. Once compiled and deployed, that proxy evaporates. Vercel had no idea where to route the AI requests, causing the chat feature to completely flatline.

The Fix:
I had to bridge the gap between local development and production infrastructure by injecting the environment variables manually and building a dedicated Vercel Serverless Function to handle the CORS and routing securely.

1. Injecting the Environment Variables
   Navigated to the Vercel Dashboard → Project Settings → Environment Variables. I manually added both VITE_NASA_API_KEY and VITE_HACKCLUB_AI_KEY, ensuring they were applied across Production, Preview, and Development environments.

2. Building the Serverless Proxy
   I created an api/ai.js file at the root level. Vercel automatically treats anything in the /api directory as a serverless backend function. This handles the actual request to the Hack Club AI proxy so the frontend doesn’t have to deal with CORS.

3. Dynamic Frontend Routing
   I updated the frontend API call to dynamically switch its endpoint depending on where the code is running. If import.meta.env.DEV is true, it uses the local Vite proxy. If false (production), it hits the new Vercel serverless function.

The Result:
Pushed the code (git commit -m “fix: vercel serverless AI proxy + env vars”) and triggered a Vercel redeploy. The architecture is now bulletproof. The NASA data loads instantly, and the AI explainer successfully reaches out to the Qwen model via the serverless function, returning plain-English translations of the space data right on the live URL.

This is an excellent update to AstroLens. Adding the AI explanation feature elevates the project from a simple data viewer to an interactive learning tool, which hits the “Technicality” and “Storytelling” marks the Stardance Shipwrights are looking for.

Here is a Devlog entry detailing the AI integration, structured to clearly show progress, technical implementation, and the user experience.

🚀 Devlog Update: The AI Knows Space! (Integrating the Hack Club AI Proxy)
The Goal:
The raw NASA APIs (like APOD and DONKI) are amazing, but the data is often incredibly dense and full of scientific jargon. I wanted AstroLens to not just show space data, but explain it. The goal was to build a persistent AI Chat layer that uses real-time NASA data as context to answer user questions simply.

The Implementation:
I integrated Hack Club’s free AI API (ai.hackclub.com/proxy/v1/chat/completions) directly into the React frontend.

The API Route: I created a dedicated ai.js service file to handle the fetch request to the proxy, passing my VITE_HACKCLUB_AI_KEY securely via the Authorization header.

Context Injection: The real magic is in the context. When a user clicks “Explain with AI” on the Asteroid page, the code doesn’t just ask the AI a generic question. It programmatically injects the live data array (e.g., “There are 12 asteroids passing Earth today, 2 are hazardous…”) into the hidden system prompt before asking the user’s question.

Model Selection: After some testing with gemini-2.5-flash, I found that the qwen/qwen3-32b model returned slightly faster and more concise plain-English explanations for the astronomy queries, so I locked that in as the primary model.

The Struggle (and the Fix):
Getting this working locally was smooth, but deploying it to Vercel completely broke the AI feature—it just threw a generic “AI unavailable” error.

It took some debugging, but I realized the issue was my .env file. I correctly had .env listed in .gitignore (security first!), which meant the API key never pushed to GitHub. Since Vercel pulls from GitHub, it had no key. I fixed it by manually adding VITE_HACKCLUB_AI_KEY to the Vercel project’s Environment Variables dashboard and running a fresh redeploy.

The Result:
AstroLens now features a working “🤖 Explain with AI” button on the data pages. If you look at an APOD image of a Wolf-Rayet star and don’t know what that means, the AI will now break it down into simple terms, right there in the dashboard.

Day 1 - First live NASA data in AstroLens

Set up the full project from scratch - Vite, React, Tailwind, NASA API. First attempt had a broken folder structure, debugged it, restarted clean.

Within a few hours, got live NASA APOD data rendering in the browser.

The image today is Thor’s Helmet Nebula - NGC 2359, 15,000 light years away.

Tomorrow: building the full multi-page dashboard with asteroids, space weather, and JWST gallery.