{
  "schemaVersion": "1.0",
  "entity": "BlogPosting",
  "title": "Getting Started with page-agent: Installation & Secure Setup",
  "description": "Step-by-step guide to installing page-agent, securing API keys via backend proxies, and executing your first AI command.",
  "author": "darsh",
  "datePublished": "2026-07-28T10:00:00.000Z",
  "dateModified": "2026-07-28T10:00:00.000Z",
  "tags": [
    "page-agent",
    "JavaScript",
    "Security Proxy",
    "Next.js",
    "Quickstart"
  ],
  "aeoDirectAnswers": [
    {
      "question": "Installation Methods: How Do You Install page-agent?",
      "answer": "page-agent is designed for frictionless integration. You can add it to your project using either a package manager or a simple script tag."
    },
    {
      "question": "Secure API Key Management: The Backend Proxy Pattern — Why Is It Mandatory?",
      "answer": "A backend proxy is strictly required because client-side JavaScript is publicly visible to anyone inspecting browser network traffic or source code. Routing requests through your own backend server ensures that secret API keys remain stored safely in server environment variables. Never hardcode your OpenAI or LLM API keys in your frontend JavaScript code. Doing so exposes your secret key to anyone who inspects your site's source code, leading to key theft, financial abuse, and potential data breaches."
    },
    {
      "question": "Configuring PageController and Execution: How Do You Initialize the Agent?",
      "answer": "You initialize PageController by providing the URL of your backend proxy endpoint and target model name, then calling the .execute() method with a natural language command string. Once installed and securely configured, initializing the agent is straightforward:"
    },
    {
      "question": "How do I hide my API key when using `page-agent`?",
      "answer": "Never put the API key in frontend code. Create a backend proxy endpoint (using Node.js, Next.js, or Cloudflare Workers) that holds the key in environment variables and forwards requests from the client to the LLM provider."
    },
    {
      "question": "Can I run `page-agent` without a backend?",
      "answer": "Technically yes, by putting the key in the frontend, but this is a severe security risk. A backend proxy is strictly required for any production or public-facing deployment."
    },
    {
      "question": "Does `page-agent` require a build step?",
      "answer": "No. It can be used via a CDN script tag for zero-config setups, or installed via npm for integrated build pipelines (Webpack, Vite, etc.)."
    }
  ],
  "semanticFactualBody": "Getting Started with page-agent: Installation, Secure Configuration, and Quickstart requires setting up your package or script tag and connecting a secure backend server endpoint. To install page-agent, use npm install page-agent or inject it via CDN. Configure the PageController with your LLM endpoint. **Never expose your API key in client-side code.** Instead, route LLM requests through a secure backend proxy (e.g., Next.js API routes or Cloudflare Workers) to protect your credentials and manage rate limits. Installation Methods: How Do You Install page-agent? page-agent is designed for frictionless integration. You can add it to your project using either a package manager or a simple script tag. Option 1: NPM / Yarn (Recommended for Build Pipelines) Option 2: CDN (Recommended for Quick Prototyping) Add the following script tag to the ` or  of your HTML: Secure API Key Management: The Backend Proxy Pattern — Why Is It Mandatory? A backend proxy is strictly required because client-side JavaScript is publicly visible to anyone inspecting browser network traffic or source code. Routing requests through your own backend server ensures that secret API keys remain stored safely in server environment variables. Never hardcode your OpenAI or LLM API keys in your frontend JavaScript code. Doing so exposes your secret key to anyone who inspects your site's source code, leading to key theft, financial abuse, and potential data breaches. The Architecture of a Secure Proxy To use page-a"
}