Phase 3: Deployment & Review

The final step in this Proof of Concept was deploying the integration and ensuring everything worked seamlessly in a production environment.

1. Cloudflare Configuration

Since the project uses Astro’s Cloudflare adapter, deploying is incredibly straightforward. The main requirement was ensuring the GEMINI_API_KEY was available to the Cloudflare build environment.

I added the secret via the Wrangler CLI (and configured it in the Cloudflare dashboard for production):

# Adding the secret for local development
npx wrangler secret put GEMINI_API_KEY

My astro.config.mjs was already configured to use the Cloudflare adapter, so when the code was pushed to the main branch, Cloudflare automatically kicked off a build and deployed the serverless function.

2. Performance Verification

A critical requirement was that the Chatbot must not degrade the portfolio’s Core Web Vitals.

To achieve this, I used React’s lazy loading (and Astro’s client:idle directive) when importing the ChatWidget component in the main layout.

---
// src/layouts/Layout.astro
import { ChatWidget } from '../components/ChatWidget';
---
<html>
  <body>
    <!-- Main Portfolio Content -->
    
    <!-- Load the chat widget only when the browser is idle -->
    <ChatWidget client:idle />
  </body>
</html>

This ensures the heavy React bundle required for the chat interface is only downloaded and executed after the critical rendering path of the portfolio is complete.

3. Final Review

The AI Chatbot integration was a success. We achieved:

Security: The API key is securely isolated in the Cloudflare backend.
Performance: client:idle ensures zero impact on initial load metrics.
Aesthetics: The widget utilizes the Nord theme variables, blending perfectly into the dark-mode aesthetic of the site.

This POC proved that integrating dynamic, AI-driven components into a static site generator like Astro is not only possible but highly effective when utilizing edge computing.