This demo shows a production-style AI integration using a WordPress frontend, server-side proxy, and a Symfony API backend. Requests are rate-limited and secured.

How It Works

This demo shows a production-style AI integration using a WordPress frontend, a secure server-side proxy, and a Symfony API backend.

The goal is to demonstrate how AI features can be added to an existing site without exposing secrets or letting the browser talk directly to the AI system.

1) User interacts with the WordPress UI

• You type a question into the form and click Run Demo
• JavaScript sends your request to WordPress, not to the AI directly
• No API keys or backend URLs are exposed in the browser

Browser → WordPress

2) WordPress acts as a secure server-side proxy

WordPress receives the request and:

• Verifies a security nonce
• Enforces rate limiting (5 requests per 5 minutes per IP)
• Validates the allowed endpoint path
• Adds a private demo key (never sent to the browser)
• Forwards the request to the Symfony API

Browser → WordPress Proxy → Symfony API

This prevents:

• API keys being leaked
• Direct abuse of the AI endpoint
• Open-proxy vulnerabilities

3) Symfony API processes the request

The Symfony backend:

• Validates the demo key
• Reads the request payload ({ "question": "..." })
• Runs the AI / support logic
• Returns structured JSON like:

{
  "domain": "engineering",
  "answer": "...",
  "citations": [...]
}

4) WordPress returns the result to the browser

WordPress:

• Receives the API response
• Passes it back to the browser as JSON
• The UI renders:
  • A readable Answer card
  • Optional Citations accordion
  • Optional Debug JSON for transparency

Symfony API → WordPress Proxy → Browser UI

Architecture Overview

[ Browser UI ]
       |
       v
[ WordPress Server ]
- Nonce validation  
- Rate limiting  
- Endpoint allowlist  
- Demo key injection  
       |
       v
[ Symfony API ]
- Auth via demo key  
- AI logic  
- Structured response  

Why This Approach

This design is intentional:

• Security: No secrets in the browser
• Control: WordPress can throttle, log, or block abuse
• Flexibility: Backend can evolve without changing the UI
• Real-world: Mirrors how production AI features are built

This is not a toy demo — it’s the same pattern used in real SaaS products that integrate AI safely into existing platforms.

References

Checkout https://github.com/mrobbieb/energy-exchange for the code behind the full project around energy-exchange.