DEV Community: Suryansh Swarn

Stop Leaking Your Gemini Keys: A Weekend Guide to Firebase AI Logic (Python Edition)

Suryansh Swarn — Sun, 24 May 2026 18:10:51 +0000

Yo fellow devs!👋🏼
Google I/O 2026 introduced a wave of AI-focused announcements, but one update quietly stood out for developers building modern AI-powered applications: Firebase AI Logic & Server Prompt Templates.

For developers integrating large language models into web and mobile applications, security has always been a major concern. Exposing API keys or embedding sensitive prompts directly into frontend code creates serious risks — from stolen credentials to leaked proprietary prompt engineering workflows.

Firebase’s latest “agent-native” AI infrastructure addresses this challenge by moving prompts and API handling securely into the cloud backend. Instead of embedding prompts in frontend code, developers can now store and manage them as secure server-side templates while applications simply reference template IDs.

This article explores how Firebase AI Logic works and demonstrates how developers can securely integrate Gemini-powered AI workflows using Python.

The Security Problem with Frontend AI

Before the introduction of Firebase AI Logic, developers generally relied on one of two approaches:

1. Embedding API Keys Directly in Frontend Applications

This method is fast for prototyping but extremely insecure. Any exposed key can be extracted from client bundles or browser requests, potentially leading to unauthorized API usage and excessive billing costs.

2. Creating Custom Backend Wrappers

A safer approach involved building custom backend services using frameworks such as Express.js or FastAPI to hide API credentials and relay prompts to AI providers.

However, even with hidden keys, another issue remained:
the prompt logic itself often stayed visible inside frontend applications or network requests.

For AI-powered products, prompts frequently contain valuable business logic, formatting instructions, or proprietary workflows. Exposing them can allow competitors to replicate application behavior with minimal effort.

Introducing Firebase AI Logic & Server Prompt Templates

Firebase AI Logic solves this issue by allowing developers to:

Store prompts securely in Firebase infrastructure
Manage AI workflows using reusable templates
Call prompts using template IDs instead of raw prompt strings
Securely inject API credentials server-side
Stream responses directly through Firebase infrastructure

The result is a cleaner and more secure architecture:

No exposed API keys
No leaked prompts
Reduced backend boilerplate
Faster deployment workflows

Step-by-Step Quick Start (Python)

Step 1 — Install the Required SDKs

Firebase introduced updated SDK support for AI Logic integration.

Install the required dependencies:

pip install --upgrade firebase-admin google-cloud-aiplatform

Step 2 — Create a Secure Prompt Template

Instead of storing prompts inside Python scripts, Firebase allows prompts to be deployed as managed templates.

Example configuration:

{
  "id": "jira_transformer",
  "model": "gemini-3.5-flash",
  "system_instruction": "You are an elite product manager. Convert user rants into markdown JIRA tickets with Title, Description, and Acceptance Criteria.",
  "prompt_template": "Analyze this user input: {{user_input}}. Extract the core bug or feature request and format it perfectly.",
  "temperature": 0.2
}

Deploy the template using:

firebase deploy --only ai_logic

This securely stores the prompt configuration inside Firebase infrastructure.

Step 3 — Calling Firebase AI Logic from Python

The Python integration becomes significantly cleaner because no prompt text or API credentials are embedded inside the application code.

Example implementation:

import firebase_admin
from firebase_admin import credentials
from firebase_admin import ai_logic

## Initialize Firebase
if not firebase_admin._apps:
    cred = credentials.ApplicationDefault()
    firebase_admin.initialize_app(cred)

def process_user_feedback(raw_rant: str):

    execution = ai_logic.call_template(
        template_id="jira_transformer",
        variables={
            "user_input": raw_rant
        }
    )

    return execution.text


if __name__ == "__main__":

    test_rant = (
        "The checkout button disappears when clicked twice "
        "on iPhone landscape mode."
    )

    result = process_user_feedback(test_rant)

    print(result)

This architecture allows developers to securely trigger AI workflows while keeping business logic fully server-side.

Advantages of Firebase AI Logic

Improved Security

The biggest improvement is the separation between frontend applications and sensitive AI infrastructure.

Developers no longer need to:

expose API keys
hide prompts in minified bundles
maintain complex authentication wrappers

Faster Development

Prompt templates can be updated independently of frontend deployments.
This enables faster iteration cycles for AI-powered products.

Lower Infrastructure Complexity

For small teams and independent developers, Firebase AI Logic eliminates much of the backend maintenance typically required for secure AI integrations.

Limitations and Challenges

Despite its strengths, the ecosystem still has some limitations.

Local Emulator Experience

The Firebase Emulator Suite for AI Logic still requires refinement.
Simulating token streaming and template execution in fully offline environments can be inconsistent.

Vendor Dependency

Applications become increasingly tied to Firebase infrastructure and deployment workflows. Teams requiring multi-cloud flexibility may need additional abstraction layers.

Why I Like It

The best thing about Firebase AI Logic is its simplicity. Developers do not need to build large backend systems just to protect API keys.

It also makes projects cleaner and more secure.

However, local testing still feels slightly complicated, especially for beginners.

Final Thoughts

Firebase AI Logic is a very useful feature for developers who want to build secure AI applications quickly. It removes many security issues and makes AI integration easier.

For beginners and indie developers, this can save a lot of development time.

From "Vibe Coding" to Production Hardening: How to Secure AI-Coded Applications

Suryansh Swarn — Fri, 22 May 2026 01:45:34 +0000

We are living in the golden era of "Vibe Coding." Thanks to advanced LLMs like Claude, GPT-4, and specialized coding assistants, developers can now translate raw human intent into fully functioning software in a matter of minutes. You feed an idea to an AI, review the visual layout, request a few adjustments, and "vibe" your way directly to a live, deployed application. It is an incredibly empowering shift that has shattered the barrier between conceptualization and production.

But there is a dangerous side effect to this newfound speed. While AI models are spectacular at writing application-level logic, rendering beautiful modern interfaces, and solving local algorithmic puzzles, they have a massive, systemic blind spot: infrastructure-level security and web deployment hardening. Because AI engines generate code based on context windows focused heavily on components and immediate functionality, they rarely think to remind you to configure server environment variables, establish strict cross-origin boundaries, or append robust security headers to your HTTP responses.

To understand exactly how this blind spot manifests—and how to fix it—we will dive deep into a real-world case study of an AI-coded application, tracking its transformation from visually pristine but structurally exposed to enterprise-grade secure.

A React 19 Markdown-to-PDF Tool

The subject of our analysis is a production-ready utility application: a Markdown to LaTeX/PDF Generator hosted at https://markdown-pdf-self.vercel.app/.

Architecturally, this app represents a classic, high-performance modern client-side frontend:

The UI Core: Built on React 19 and Vite, utilizing a highly polished, Apple-inspired "Liquid Glass" UI. It relies heavily on backdrop filters (backdrop-filter: blur(20px)) and CSS variables to handle real-time transitions between light and dark modes over a mesh gradient background.
The Text Engine: Driven by Marked.js as the core Markdown parser to translate raw user inputs into structured HTML.
The Math & Code Ecosystem: Extended via Highlight.js for programming language syntax highlighting and KaTeX for real-time, mathematical typesetting (e.g., rendering equations like $E=mc^2$).

Because this application was built to ingest markdown text that may come directly from chat interfaces, a clever feature was implemented inside a React useMemo hook: an "AI Bracket Fixer." Large Language Models frequently emit messy, inconsistent math delimiters when outputting formulas (such as mixing up single $ symbols with double $$ blocks or escaping brackets in ways that confuse compilers). The application pipes raw user text through a specialized regex pipeline to automatically clean and normalize these boundaries before passing them to the KaTeX renderer. It's a perfect example of a modern application designed explicitly to work hand-in-hand with AI outputs.

The client-side logic was flawless, the editor was responsive, and the PDF printing engine worked natively and beautifully via an optimized @media print layout in styles.css. However, when this "vibe-coded" application was deployed to the cloud and subjected to an automated security audit, the results revealed a stark division between frontend aesthetics and infrastructure perimeter security.

Baseline Audit: Visually Perfect, Structurally Exposed

The initial external application security scan returned an alarming Overall Security Score of 50/100.

While the application achieved perfect marks for its TLS/SSL implementation (supporting only TLS 1.2+ with modern forward-secrecy cipher suites) and successfully locked down its environment files, it failed completely on the web network perimeter: HTTP Security Headers.

By default, standard serverless edge networks like Vercel serve raw web assets with extreme efficiency, but they do not attach explicit security rules to response envelopes unless explicitly instructed. The AI engine generated the React code flawlessly but left the deployment configuration entirely stock. This omission introduced several critical vulnerabilities:

Security Check	Result	Severity	The Real-World Vulnerability & Exploit Vector
Content-Security-Policy (CSP)	FAIL	High	Cross-Site Scripting (XSS): The browser had no instructions regarding which domains were trusted to load executable code. If an attacker managed to inject a malicious script via an input payload or a compromised third-party package, the browser would run it unconditionally, risking session hijacking or data leakage.
X-Frame-Options	FAIL	High	Clickjacking Attacks: Lacking this header, any malicious third-party website could embed the Markdown-to-PDF tool inside an invisible HTML `<iframe>`. Attackers could overlay deceptive buttons directly over the actual editor, tricking users into clicking elements on the app without their knowledge.
X-Content-Type-Options	FAIL	Medium	MIME-Type Sniffing: Without the `nosniff` directive, web browsers might ignore the declared Content-Type of an asset and attempt to guess its format based on its contents. An attacker could find a way to make the app fetch a malicious script disguised as a plain text or image file, which the browser would then execute.
Server Header Disclosure	FAIL	Medium	Technology Stack Information Leakage: The server headers openly broadcasted `Server: Vercel`. While hosting on Vercel is highly secure, providing an explicit technological footprint helps malicious actors map your exact software stack and research tailored exploits.
Referrer & Permissions Policies	FAIL	Med/Low	Information Leaks & Unrestricted Access: Outbound link clicks could leak internal URL query structures to external analytics platforms. Furthermore, the browser was not explicitly barred from accessing client hardware like the camera, microphone, or geolocation APIs.

The Vibe Coding Trap

AI models excel at what you show them in the viewport. They focus on the components, state hooks, and style layouts you interact with directly. They do not naturally consider the invisible, server-side HTTP handshake happening between the web browser and your cloud provider's edge node. That oversight is exactly where vulnerabilities hide.

Infrastructure Hardening

To rectify these vulnerabilities, there is no need to modify or rewrite a single line of your React application logic. Instead, the hardening must be applied at the infrastructure configuration layer.

On serverless hosting networks like Vercel, this is accomplished by introducing a declarative configuration file—vercel.json—at the absolute root of your project repository. This configuration forces the cloud server's edge nodes to inject explicit, protective headers into every outbound HTTP asset transmission.

Here is the exact production-ready configuration file deployed to seal the architectural gaps highlighted in the baseline audit:

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Content-Security-Policy",
          "value": "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; connect-src 'self'"
        },
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-XSS-Protection",
          "value": "1; mode=block"
        },
        {
          "key": "Referrer-Policy",
          "value": "strict-origin-when-cross-origin"
        },
        {
          "key": "Permissions-Policy",
          "value": "camera=(), microphone=(), geolocation=()"
        }
      ]
    }
  ]
}

Breaking Down the Security Injection:

Content-Security-Policy (CSP): Rigorously confines asset execution. Declaring default-src 'self' prevents the browser from loading unauthorized remote scripts. It accommodates modern single-page frontend frameworks by safely allowing 'unsafe-inline' and 'unsafe-eval' (which are necessary for client-side routing, compilation, and KaTeX math processing), while guaranteeing that image boundaries (img-src) and network fetch destinations (connect-src) remain strictly enclosed.
X-Frame-Options: DENY: Completely cuts off framing capabilities, neutralizing clickjacking threats instantly. No foreign origin can encapsulate this user interface.
X-Content-Type-Options: nosniff: Forces the browser to strictly follow the MIME-types provided in the network response, shutting down content-type sniffing vectors.
Permissions-Policy: Implements the Principle of Least Privilege at the browser hardware layer. By explicitly setting empty restrictions for camera=(), microphone=(), and geolocation=(), the application signals that it has no business requesting sensitive hardware permissions, establishing deep trust with privacy-conscious users.

The Post-Remediation Posture: 100% Perimeter Defended

Following the deployment of the root-level vercel.json file, a secondary automated compliance audit was triggered. The application’s Overall Security Score jumped from a failing 50 up to a highly secure 84/100, and the critical HTTP Security Headers category achieved a perfect 100/100 pass rate.

However, a closer look at the remaining minor scanner notifications provides a vital lesson in balancing academic compliance checklists with practical real-world application engineering.

The Security vs. Performance Tradeoff (`Cache-Control`)

The security scanner still flagged a warning on the Cache-Control header because it utilized a standard static caching layout (public, max-age=0, must-revalidate) instead of a strict no-store policy.

In a heavy, full-stack application dealing with financial ledgers, medical records, or user authentication sessions, no-store is a non-negotiable requirement to prevent shared proxies from caching private data.

However, this Markdown-to-PDF tool is a purely client-side utility. It features no backend servers, no user data tables, and transmits no private user tokens over the wire. For an open static frontend, enforcing a strict no-store policy would destroy application performance. Browsers would be barred from local asset caching, resulting in sluggish load speeds, higher data consumption, and increased rendering latency on every single refresh—offering absolutely zero security benefit in return. Maintaining standard static caching was an intentional, correct engineering tradeoff.

Filtering Compliance Noise

Automated security tools evaluate applications against generic compliance matrices. The secondary report noted several informational flags under categories like Database Security (demanding parameterized queries and VPC network separation) and Credential Handling (requiring Argon2 password hashing and session invalidation middleware).

Because our architecture has no database tier, no login forms, and no stateful backend sessions, these metrics are completely non-applicable. Securing an AI-coded application means understanding your architecture well enough to separate critical, exploitable perimeter vulnerabilities from automated compliance noise that does not apply to your stack.

The AI Coder’s Actionable Security Checklist

If you are building and deploying software using AI orchestration tools, you must add an independent validation phase to your deployment loop. Use this four-step checklist to secure your applications before pushing them live:

[ ] Harden the Edge Hosting Layer: Never assume your cloud provider's default state is production-ready. If deploying a frontend application to Vercel, Netlify, or Cloudflare Pages, always include a dedicated configuration file (such as vercel.json or _headers) to explicitly inject security headers (CSP, X-Frame-Options, X-Content-Type-Options).
[ ] Sanitize and Control Untrusted Inputs: AI-generated outputs can be unpredictable. If your application acts as a downstream consumer of LLM tokens (such as an editor digesting copy-pasted or API-piped text), implement structural sanitization steps—like the custom regex "AI Bracket Fix" to clean equations, or a library like DOMPurify to scrub HTML before rendering it inside the browser.
[ ] Minimize Information Leakage: Strip verbose architecture details from your deployment metadata. Suppress or modify response headers that disclose underlying platforms (like Server or X-Powered-By) to avoid handing attackers an exact map of your technology stack.
[ ] Audit Reports with Common Sense: Use automated scanning tools to expose genuine architectural gaps, but verify their findings against the reality of your application's design. Do not degrade application load times or break framework performance metrics to check a box for a database compliance rule if your application runs entirely on the client side.

Conclusion

AI allows us to write and deploy code at an extraordinary pace, but it does not relieve us of our responsibility to protect our users. "Vibe coding" is a phenomenal mechanism for rapid feature prototyping and creative execution, but the final architectural hardening phase still requires human engineering oversight. Spend ten minutes auditing your infrastructure files, secure your network handshakes, and ensure that your lightning-fast deployments are as safe as they are beautiful.

Build fast, but build secure.

How Do You Turn Raw NASA Satellite Streams into a High-Performance Geospatial Interface?

Suryansh Swarn — Sat, 16 May 2026 08:23:49 +0000

As developers, we routinely build dashboards for predictable data like server metrics or revenue funnels. But tracking volatile, live planetary anomalies is a completely different challenge. During natural hazards, critical telemetry is often fragmented across chaotic feeds, creating a dangerous systemic vulnerability for responders and researchers.

To solve this, I engineered Disaster-map-NASA-EONET—a tactical geospatial console designed to ingest, normalize, and render live global hazard data onto a high-performance, reactive map interface. Here is an architectural deep dive into how I overcame asynchronous data bottlenecks and built a client-side state that scales seamlessly.

The Tech Stack

To ensure fluid frame rates and low rendering latency without the bloat of heavy commercial platforms, the application uses a highly optimized front-end pipeline:

React 19 & Vite 8: Handles the core declarative UI architecture with concurrent rendering and hyper-fast development builds.
Leaflet & React-Leaflet: Grants lightweight, direct client-side control over GIS rendering loops and tile layers.
Tailwind CSS v4: Utilizes the compile-time @tailwindcss/vite engine to provide zero-runtime styling with minimal asset weight.
Recharts: Ingests raw statistical arrays to render multi-axis spatial telemetry and data charts.

Design System

A tracking console is only as effective as its cognitive throughput. If the UI is cluttered, critical analytical insights get lost under the visual noise. I structured the application with a distinct "Control Room" aesthetic focused on high visual contrast and modern layering:

The Cinematic Mapping Layer: Instead of standard map styles, I used Leaflet’s tile layers to craft a deep, dark slate environment. When active satellite mode is disabled, the map shifts to a monochrome space-black canvas, causing the bright warning indicators of active natural events to stand out vividly.
The Collapsible Control Deck: The command sidebar leverages responsive, text-transformative utility styles and glassmorphic translucent paneling (backdrop-blur-md). It overlays global data feeds, classification parameters, and real-time filters directly across the screen width without completely occluding the main tracking area.

The Engineering Challenge

The primary engineering obstacle when working with NASA's Earth Observatory Natural Event Tracker (EONET) API was managing Asynchronous Spatial Normalization and Downstream Filtering.

1. Eliminating Redundant Network Load via Downstream Separation

The API query returns thousands of natural events over a yearly timeline. Querying NASA's servers every time a user toggles a category filter would easily exhaust API rate limits, spike network bandwidth, and stall client rendering.

To solve this, I designed a multi-tiered state loop:

An upstream network synchronizer hooks onto chronological shifts (the year filter) to fetch the raw data snapshot into allEvents.
A separate downstream effect watches client-side categorical selections to filter the in-memory array locally. This completely eliminates unneeded network overhead, shifting the filtering complexity from an asynchronous $O(N)$ network request to a lightning-fast client-side operation.

2. Normalizing Polygons into Standard Bounding Geometries

Furthermore, the EONET database represents geographic features using uneven data models. Some hazards are specified via simple point coordinates, while massive events like hurricanes or wildfires are provided as complex Polygon coordinate grids.

Passing a raw geometry array directly into a standard map marker breaks Leaflet, resulting in catastrophic application failures. I wrote defensive structural parsing logic to safely unpack multi-dimensional array indices down to fallback coordinates on the fly.

Here is how the core orchestration is implemented in the codebase:

// From App.jsx: Decoupled Upstream Networking & Downstream In-Memory Filtering
useEffect(() => {
  const fetchEvents = async () => {
    if (categories.length === 0) return; // Guard clause against empty category maps
    setIsLoading(true);
    setError(null);
    try {
      const url = `https://eonet.gsfc.nasa.gov/api/v3/events/geojson?status=all&start=${filters.year}-01-01&end=${filters.year}-12-31`;
      const res = await fetch(url);
      if (!res.ok) throw new Error('API communication failed. Likely rate limited by NASA.');

      const data = await res.json();
      setAllEvents(data.features || []);
    } catch (err) {
      console.error(err);
      setError("NETWORK_ERR: " + err.message);
    } finally {
      setIsLoading(false);
    }
  };
  fetchEvents();
}, [filters.year, categories.length]);

// Apply local categorization filtering downward to prevent network thrashing
useEffect(() => {
  let fetchedEvents = allEvents;
  if (filters.categories.length > 0) {
    fetchedEvents = fetchedEvents.filter(ev => {
      const evCats = ev.properties?.categories || [];
      return evCats.some(c => filters.categories.includes(c.id));
    });
  }
  setEvents(fetchedEvents);
}, [filters.categories, allEvents]);

// From DisasterMap.jsx: Bounding Geometry Normalization and Fail-Safe Fallbacks
{events.map((ev) => {
  if (!ev.geometry || !ev.geometry.coordinates) return null;

  let coord;
  // Handle Polygon / MultiPolygon arrays smoothly to safely extract marker anchors
  if (ev.geometry.type === 'Polygon' || ev.geometry.type === 'MultiPolygon') {
    const poly = Array.isArray(ev.geometry.coordinates[0][0])
      ? ev.geometry.coordinates[0][0]
      : ev.geometry.coordinates[0];
    coord = [poly[1], poly[0]]; // Extract [lat, lng] projection values securely
  } else {
    coord = [ev.geometry.coordinates[1], ev.geometry.coordinates[0]];
  }

  // Failsafe condition to prevent React from throwing errors on unmapped coordinates
  if (!coord || isNaN(coord[0]) || isNaN(coord[1])) return null;

  return (
    <Marker 
      key={ev.properties?.id || Math.random()} 
      position={coord} 
      icon={getIcon(ev.properties?.categories?.[0]?.id)}
    >
      {/* Dynamic Popup UI Layout */}
    </Marker>
  );
})}

Responsive Design & Progressive Web App Capabilities

Building a tool that tracks planetary events requires absolute accessibility. Disasters don't happen exclusively when you are sitting in front of a 27-inch desktop monitor.

Responsive Layout Architecture

To build an interface resilient to varying viewports, I leveraged Tailwind's responsive breakpoint layers:

The primary control sidebar features a flexible width layout (w-[320px] max-w-[100vw]) coupled with clean, hardware-accelerated transitions (translate-x-0 vs -translate-x-full).
On smaller devices, the menu panel completely retracts with smooth CSS transitions, shifting interactive map control toggles to a dedicated corner icon trigger to preserve valuable screen real estate.

PWA Capabilities

I also integrated Progressive Web App capabilities into the build configuration. By writing a comprehensive web app manifest layout (manifest.json), the browser recognizes the application as an independent web console app. Users can directly install the app to their local home screen on mobile devices or their desktop dock, launching it within a standalone native application frame without browser navigation wrappers.

The Console Interface

Figure 1: The tracking interface rendering live event telemetry. Standard leaflet markers are optimized into performant numbered groupings using react-leaflet-cluster to prevent main-thread UI blocking.

Figure 2: The Global Distribution Analytics sidebar rendering statistical summaries of volcanic, wildfire, and severe storm occurrences across the globe using interactive SVG layouts.

Engineering Review

Developing this project across a focused engineering sprint highlighted the critical intersection of client-side performance optimization and defensive data ingestion. Initially, rendering hundreds of individual geospatial DOM nodes introduced severe main-thread lag, a critical bottleneck that I resolved by integrating react-leaflet-cluster to virtualize grouped anomalies and sustain a flawless 60 FPS rendering cycle. Concurrently, navigating the volatility of public open-source telemetry streams underscored that defensive programming is non-negotiable when architecture relies on external payloads; implementing rigorous validation layers—such as checking coordinate bounds via isNaN(), isolating geometry mutations, and structuring robust state fallbacks—proved essential to guarantee runtime stability and insulate the UI from catastrophic crashes caused by malformed API data.

Deployments

The application is fully operational, integrated with live automated build checks via Vercel's deployment network. Explore the implementation links below to review the codebase architecture or view live planetary indicators:

Live disaster-map-nasa-eonet.vercel.app
Repository: GitHub - Disaster-map-NASA-EONET

Stop Fighting AI Formatting: How I Built a "Sanitizer" for Messy AI Markdown

Suryansh Swarn — Thu, 14 May 2026 17:51:39 +0000

The Problem: The "AI-to-Doc" Friction

We’ve all been there. You ask an AI like ChatGPT, Gemini, or NotebookLM to explain a complex topic. The output is great, but when you copy-paste it into a professional document or a standard editor, it looks... broken.

The biggest culprits? LaTeX delimiters. AI tools love using \[ ... \] for block math and $ ... $ for inline math. Most web-based markdown parsers don’t recognize these out of the box, leaving your document littered with backslashes and brackets instead of beautiful equations.

I decided to build a solution: Markdown Latex Pdf generator. A tool to solve this "messy copy-paste" journey.

The Tech Stack

To keep the app fast and responsive, I went with:

React (Vite): For the reactive UI.
Marked.js: For high-speed markdown parsing.
KaTeX: For math rendering that actually looks like a textbook.
html2pdf.js: To turn that "Liquid Glass" UI into a portable document.

The Engineering Challenge: The Regex "Sanitizer"

The core "intelligence" of this app isn't just the rendering; it’s the pre-processing. I realized that before I could hand the text over to marked.js, I had to translate "AI-speak" into "Standard-Markdown."

When I started building the app, I realized that simply using a markdown parser like marked.js wasn't enough. AI tools often wrap math equations in brackets that standard libraries don't recognize by default.

I had to implement a custom RegEx Sanitizer to "clean" the text before it even hit the parser.

The Code Snippet that fixed it:

// Sanitizing AI-specific delimiters to standard LaTeX $ and $$
const sanitized = rawInput
  .replace(/\\\[/g, '$$$$') // Convert \[ to $$
  .replace(/\\\]/g, '$$$$') // Convert \] to $$
  .replace(/\\\(/g, '$')    // Convert \( to $
  .replace(/\\\)/g, '$');   // Convert \) to $

By implementing this "middleware" logic, I ensured that no matter how the AI formats the math, my app translates it into a standard format that KaTeX and marked.js can render perfectly.

Aesthetic Engineering: The "Liquid Glass" UI

As someone who bridges the gap between software utility and visual storytelling, I couldn't settle for a plain white text box. I engineered a "Liquid Glass" aesthetic.

Using modern CSS backdrop-filter: blur(), fixed mesh gradients, and a sleek dark-mode-first approach, the app feels like a premium desktop tool rather than a basic web form. It provides a "zen" environment for refining AI-generated content.

Modern Workflow: PWA & Mobile Responsiveness

A productivity tool is useless if it only works on a 27-inch monitor. I focused on two key features to make this app truly "portable":

Fully Responsive Design: Using a fluid grid system, the "Liquid Glass" editor scales perfectly from a desktop setup to a mobile screen. Whether you are refining an AI response on your phone or your laptop, the UI remains intuitive and clutter-free.
PWA Capable: I implemented a Web App Manifest and service worker configuration. This means you can "Install" the app directly onto your Windows, macOS, or Android device. It lives in your dock or app drawer, launches instantly, and feels like a native system utility.

My Journey & Documentation

Building this wasn't just about the code; it was about solving a personal workflow bottleneck. I wanted a way to turn a quick AI chat into a clean PDF I could share or submit, without the formatting headache.

Key Links:

Live Demo: https://markdown-pdf-self.vercel.app/
GitHub Repository: SuryanshSwarn09/markdown-pdf

DEV Community: Suryansh Swarn

Stop Leaking Your Gemini Keys: A Weekend Guide to Firebase AI Logic (Python Edition)

The Security Problem with Frontend AI

1. Embedding API Keys Directly in Frontend Applications

2. Creating Custom Backend Wrappers

Introducing Firebase AI Logic & Server Prompt Templates

Step-by-Step Quick Start (Python)

Step 1 — Install the Required SDKs

Step 2 — Create a Secure Prompt Template

Step 3 — Calling Firebase AI Logic from Python

Advantages of Firebase AI Logic

Improved Security

Faster Development

Lower Infrastructure Complexity

Limitations and Challenges

Local Emulator Experience

Vendor Dependency

Why I Like It

Final Thoughts

From "Vibe Coding" to Production Hardening: How to Secure AI-Coded Applications

A React 19 Markdown-to-PDF Tool

Baseline Audit: Visually Perfect, Structurally Exposed

The Vibe Coding Trap

Infrastructure Hardening

Breaking Down the Security Injection:

The Post-Remediation Posture: 100% Perimeter Defended

The Security vs. Performance Tradeoff (Cache-Control)

Filtering Compliance Noise

The AI Coder’s Actionable Security Checklist

Conclusion

How Do You Turn Raw NASA Satellite Streams into a High-Performance Geospatial Interface?

The Tech Stack

Design System

The Engineering Challenge

1. Eliminating Redundant Network Load via Downstream Separation

2. Normalizing Polygons into Standard Bounding Geometries

Responsive Design & Progressive Web App Capabilities

Responsive Layout Architecture

PWA Capabilities

The Console Interface

Engineering Review

Deployments

Stop Fighting AI Formatting: How I Built a "Sanitizer" for Messy AI Markdown

The Problem: The "AI-to-Doc" Friction

The Tech Stack

The Engineering Challenge: The Regex "Sanitizer"

Aesthetic Engineering: The "Liquid Glass" UI

Modern Workflow: PWA & Mobile Responsiveness

My Journey & Documentation

The Security vs. Performance Tradeoff (`Cache-Control`)