Build a multi-user GitHub PR summarizer agent

This recipe builds a GitHub PR summarizer with a browser UI and a secure connected-account flow. Each user connects GitHub once, then the app reuses that connected token for later PR summary requests in the same browser session.

The important security rule is straightforward: never accept a user ID from the browser and use it as the Scalekit connected-account identifier. Instead, mint an opaque identifier on the server, store it in your own session store, and complete the flow with user verification for connected accounts.

The finished app does four things:

• lists the most-discussed open pull requests in a repository
• fetches each PR’s diff and comment thread through Scalekit’s GitHub connector
• asks an LLM to summarize the PRs in plain language
• binds every GitHub connection to a secure browser session instead of a client-supplied identifier

The complete source is available in the render-ai-agent-deploykit repository. You can also watch the video walkthrough to see the full setup and demo end-to-end.

Why this cookbook stays TypeScript-only

This sample uses Render’s Node SDK and ships as a TypeScript project, so the cookbook mirrors the repo and stays TypeScript-only. For multi-language examples of the verification flow itself, see user verification for connected accounts.

What you are building

The app runs as a Node web service on Render. It serves an HTML page with a Connect GitHub button and a form for owner and repo.

Under the hood, the flow looks like this:

Browser (original tab)                  Browser (new tab)
  │                                       │
  ▼ GET /                                 │
Express server sets signed session cookie │
  │                                       │
  ▼ POST /api/auth                        │
Scalekit returns GitHub auth link         │
  │                                       │
  │  opens auth link ─────────────────►   ▼
  │                                     GitHub OAuth consent
  │                                       │
  │  polls GET /api/auth/status           ▼
  │  ◄─── Scalekit API: ACTIVE ──►  Scalekit verifies account
  │
  ▼ page auto-reloads
  │
  ▼ POST /api/summarize { repository }
Scalekit runs GitHub requests with the connected user's token

The OAuth flow opens in a new tab so the app page stays intact. The original tab polls the Scalekit API until the connected account becomes ACTIVE, then auto-reloads to show the connected state.

1. Set up the GitHub connector

Create the connector once per Scalekit environment.

1. Go to app.scalekit.com → AgentKit > Connections > Create Connection
2. Find GitHub and click Create
3. Follow the setup — Scalekit creates and manages the GitHub OAuth app for you
4. Note the connection name assigned (e.g. github-qkHFhMip) — you’ll set this as GITHUB_CONNECTION_NAME in your environment

Connection names are unique per environment

Scalekit generates a unique GitHub connection name for each environment. Do not copy one from a tutorial or another project. Always use the exact value from your own Scalekit Dashboard.

2. Configure user verification (required)

Scalekit’s user verification setting controls what happens after a user completes GitHub OAuth. You must choose a mode in the dashboard before the app will work end-to-end. Go to AgentKit > Settings > User verification in the Scalekit dashboard.

Mode	When to use	What happens after OAuth
Scalekit users only	Development and testing	Scalekit verifies the user internally. The connected account goes ACTIVE automatically. The app detects this by polling the Scalekit API.
Custom user verification	Production	Scalekit redirects the browser to your app’s /user/verify callback. The server calls verifyConnectedAccountUser to activate the account. The app also polls the Scalekit API as a fallback.

The app works in both modes without code changes. If you skip this step entirely, the connected account may never reach ACTIVE status and the app will stay stuck on “Waiting for GitHub authorization.”

This step is required

This is the most common setup mistake. If you deploy the app, set all environment variables, and complete GitHub OAuth but the app never shows “GitHub connected,” check this dashboard setting first.

For the full verification model, see user verification for connected accounts.

3. Create the project

Terminal

mkdir render-pr-summarizer && cd render-pr-summarizer
npm init -y
npm install @renderinc/sdk @scalekit-sdk/node openai dotenv express
npm install -D typescript tsx @types/node @types/express

package.json

{
  "type": "module",
  "scripts": {
    "dev": "tsx src/main.ts",
    "build": "tsc",
    "start": "node dist/main.js"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "outDir": "dist",
    "strict": true
  },
  "include": ["src"]
}

4. Configure environment variables

Terminal

cp .env.example .env

.env

PORT=3000
SESSION_SECRET=replace-with-openssl-rand-hex-32

OPENAI_API_KEY=your-api-key
OPENAI_MODEL=gpt-4.1-mini
# Leave OPENAI_BASE_URL empty for OpenAI direct.
# Set it to a proxy URL for LiteLLM, Azure OpenAI, Ollama, etc.
# OPENAI_BASE_URL=https://your-litellm-proxy.example.com

SCALEKIT_ENVIRONMENT_URL=https://your-env.scalekit.com
SCALEKIT_CLIENT_ID=your-scalekit-client-id
SCALEKIT_CLIENT_SECRET=your-scalekit-client-secret
GITHUB_CONNECTION_NAME=your-github-connection-name

# Optional — the app auto-detects its public URL from proxy headers.
# Only set this if you need to pin the callback origin explicitly.
# PUBLIC_BASE_URL=http://localhost:3000

Generate SESSION_SECRET with:

Terminal

openssl rand -hex 32

Any OpenAI-compatible API works

The sample uses the openai npm package with a configurable baseURL. Set OPENAI_BASE_URL to route calls through LiteLLM, Azure OpenAI, Ollama, or any other OpenAI-compatible endpoint. The API key must match the endpoint it is sent to.

PUBLIC_BASE_URL is optional

The app infers its public URL from Render’s x-forwarded-proto and host proxy headers automatically. You only need to set PUBLIC_BASE_URL if you are behind a custom domain or an unusual reverse proxy. On first deploy to Render, you can leave it unset — the app works without it.

5. Add Scalekit auth helpers

The helper layer creates connected accounts, generates auth links, verifies the callback, and routes GitHub API calls through Scalekit’s connector.

src/scalekit.ts

import "dotenv/config";
import { ScalekitClient } from "@scalekit-sdk/node";
import type { JsonObject } from "@bufbuild/protobuf";

let _scalekit: ScalekitClient | null = null;

function getScalekit(): ScalekitClient {
  if (_scalekit) return _scalekit;
  if (!process.env.SCALEKIT_ENVIRONMENT_URL || !process.env.SCALEKIT_CLIENT_ID || !process.env.SCALEKIT_CLIENT_SECRET) {
    throw new Error("Missing SCALEKIT_ENVIRONMENT_URL, SCALEKIT_CLIENT_ID, or SCALEKIT_CLIENT_SECRET");
  }
  _scalekit = new ScalekitClient(
    process.env.SCALEKIT_ENVIRONMENT_URL,
    process.env.SCALEKIT_CLIENT_ID,
    process.env.SCALEKIT_CLIENT_SECRET,
  );
  return _scalekit;
}

export const scalekit = new Proxy({} as ScalekitClient, {
  get(_target, prop) {
    return (getScalekit() as unknown as Record<string | symbol, unknown>)[prop];
  },
});

const GITHUB_CONNECTION_NAME = process.env.GITHUB_CONNECTION_NAME;
if (!GITHUB_CONNECTION_NAME) {
  throw new Error(
    "GITHUB_CONNECTION_NAME is required. Copy the connection name from Scalekit Dashboard > Agent Auth > Connectors.",
  );
}

export async function getGitHubAuthLink(
  identifier: string,
  opts: { state: string; userVerifyUrl: string },
): Promise<string> {
  await scalekit.actions.getOrCreateConnectedAccount({
    connectionName: GITHUB_CONNECTION_NAME,
    identifier,
  });

  const res = await scalekit.actions.getAuthorizationLink({
    connectionName: GITHUB_CONNECTION_NAME,
    identifier,
    state: opts.state,
    userVerifyUrl: opts.userVerifyUrl,
  });

  if (!res.link) {
    throw new Error(
      `Scalekit did not return a GitHub authorization link for '${GITHUB_CONNECTION_NAME}' and identifier '${identifier}'`,
    );
  }

  return res.link;
}

export async function verifyUser(params: {
  authRequestId: string;
  identifier: string;
}): Promise<void> {
  await scalekit.actions.verifyConnectedAccountUser({
    authRequestId: params.authRequestId,
    identifier: params.identifier,
  });
}

/**
 * Check the connected account status via Scalekit API.
 * Returns true when the account is active (OAuth complete and verified).
 */
export async function isAccountActive(identifier: string): Promise<boolean> {
  try {
    const res = await scalekit.actions.getConnectedAccount({
      connectionName: GITHUB_CONNECTION_NAME,
      identifier,
    });
    // ConnectorStatus.ACTIVE === 1
    return res.connectedAccount?.status === 1;
  } catch {
    return false;
  }
}

export async function githubTool(
  identifier: string,
  toolName: string,
  toolInput: Record<string, unknown>,
): Promise<JsonObject> {
  const res = await scalekit.actions.executeTool({
    toolName,
    toolInput,
    connector: GITHUB_CONNECTION_NAME,
    identifier,
  });

  return res.data ?? {};
}

export async function githubRequest(
  identifier: string,
  path: string,
  options: {
    method?: string;
    headers?: Record<string, string>;
    queryParams?: Record<string, unknown>;
  } = {},
) {
  const res = await scalekit.actions.request({
    connectionName: GITHUB_CONNECTION_NAME,
    identifier,
    path,
    method: options.method ?? "GET",
    headers: options.headers,
    queryParams: options.queryParams,
  });

  return res.data;
}

Use the exact connector name

The connector value in executeTool must be the full connection name from your own Scalekit environment, not the generic provider string "github".

6. Bind the browser session to an opaque identifier

The session layer is the security boundary for the whole app.

Create src/session.ts and store three things:

• a signed session cookie sent to the browser
• an opaque usr_... identifier stored on the server
• a one-time state value stored on the server while OAuth is in flight

src/session.ts

import { createHmac, randomBytes, timingSafeEqual } from "node:crypto";
import type { Request, Response } from "express";

const COOKIE_NAME = "sid";
const STATE_TTL_MS = 10 * 60 * 1000;

interface SessionEntry {
  identifier: string;
  pendingState?: string;
  pendingStateExpiresAt?: number;
  connectedAt?: number;
}

const store = new Map<string, SessionEntry>();

function getSecret(): string {
  const secret = process.env.SESSION_SECRET;
  if (!secret) {
    throw new Error("SESSION_SECRET is required");
  }
  return secret;
}

function sign(sessionId: string): string {
  const mac = createHmac("sha256", getSecret()).update(sessionId).digest("base64url");
  return `${sessionId}.${mac}`;
}

function unsign(signed: string): string | null {
  const dot = signed.lastIndexOf(".");
  if (dot < 0) return null;

  const sessionId = signed.slice(0, dot);
  const mac = signed.slice(dot + 1);
  const expected = createHmac("sha256", getSecret()).update(sessionId).digest("base64url");

  const expectedBuf = Buffer.from(expected);
  const macBuf = Buffer.from(mac);
  if (expectedBuf.length !== macBuf.length) return null;

  return timingSafeEqual(expectedBuf, macBuf) ? sessionId : null;
}

export function requireSession(req: Request, res: Response) {
  const cookies = Object.fromEntries(
    (req.headers.cookie ?? "")
      .split(";")
      .flatMap((pair) => {
        const eq = pair.indexOf("=");
        if (eq < 0) return [];
        try {
          return [[pair.slice(0, eq).trim(), decodeURIComponent(pair.slice(eq + 1).trim())]];
        } catch {
          return [];
        }
      }),
  );

  const raw = cookies[COOKIE_NAME];
  let sessionId = raw ? unsign(raw) : null;
  let entry = sessionId ? store.get(sessionId) ?? null : null;

  if (!sessionId || !entry) {
    sessionId = randomBytes(32).toString("base64url");
    entry = { identifier: "" };
    store.set(sessionId, entry);
  }

  // The cookie only carries a random opaque session id. HMAC signing is enough
  // to detect tampering because the sensitive identifier stays server-side.
  const protoHeader = req.get("x-forwarded-proto");
  const requestIsSecure = req.secure || protoHeader?.split(",")[0]?.trim() === "https";
  const secure =
    process.env.NODE_ENV === "production" ||
    process.env.PUBLIC_BASE_URL?.startsWith("https://") === true ||
    requestIsSecure;
  const parts = [
    `${COOKIE_NAME}=${sign(sessionId)}`,
    "HttpOnly",
    "SameSite=Lax",
    "Path=/",
    `Max-Age=${7 * 24 * 60 * 60}`,
  ];
  if (secure) parts.push("Secure");
  res.setHeader("Set-Cookie", parts.join("; "));

  return { entry };
}

export function mintIdentifier(entry: SessionEntry): string {
  if (!entry.identifier) {
    entry.identifier = `usr_${randomBytes(16).toString("hex")}`;
  }
  return entry.identifier;
}

export function setPendingState(entry: SessionEntry, state: string): void {
  entry.pendingState = state;
  entry.pendingStateExpiresAt = Date.now() + STATE_TTL_MS;
}

export function consumePendingState(entry: SessionEntry, incoming: string): boolean {
  const stored = entry.pendingState;
  const expiresAt = entry.pendingStateExpiresAt;
  entry.pendingState = undefined;
  entry.pendingStateExpiresAt = undefined;

  if (!stored || !expiresAt || Date.now() > expiresAt) return false;

  const storedBuf = Buffer.from(stored);
  const incomingBuf = Buffer.from(incoming);
  if (storedBuf.length !== incomingBuf.length) return false;

  return timingSafeEqual(storedBuf, incomingBuf);
}

export function markConnected(entry: SessionEntry): void {
  entry.connectedAt = Date.now();
}

export function isConnected(entry: SessionEntry): boolean {
  return entry.connectedAt !== undefined;
}

Never trust query params for identity

Read the identifier from your own session store, not from the URL and not from the request body. The callback query string only proves that Scalekit completed an OAuth flow. Your server must decide which local user session owns that new connection.

7. Add the tasks

The task layer now accepts a server-side identifier, not a browser-supplied userId.

src/tasks.ts

import { task } from "@renderinc/sdk/workflows";
import OpenAI from "openai";
import { githubRequest, githubTool, getGitHubAuthLink } from "./scalekit.js";

export interface PRSummaryInput {
  identifier: string;
  owner: string;
  repo: string;
}

const fetchOpenPRs = task(
  { name: "fetchOpenPRs", retry: { maxRetries: 3, waitDurationMs: 1000 } },
  async function fetchOpenPRs(identifier: string, owner: string, repo: string) {
    const raw = await githubTool(identifier, "github_pull_requests_list", {
      owner,
      repo,
      state: "open",
    });

    const r = raw as Record<string, unknown>;
    const list = Array.isArray(raw)
      ? raw
      : Array.isArray(r.array) ? r.array
      : Array.isArray(r.pull_requests) ? r.pull_requests
      : Array.isArray(r.data) ? r.data
      : null;

    if (!list) {
      throw new Error(`Unexpected response shape: ${JSON.stringify(raw).slice(0, 200)}`);
    }

    type PRItem = { number: number; title: string; comments: number; review_comments: number };
    return (list as PRItem[])
      .sort((a, b) => (b.comments + b.review_comments) - (a.comments + a.review_comments))
      .slice(0, 5);
  },
);

const fetchPRDetails = task(
  { name: "fetchPRDetails", retry: { maxRetries: 3, waitDurationMs: 1000 } },
  async function fetchPRDetails(identifier: string, owner: string, repo: string, prNumber: number) {
    const [diffRaw, commentsRaw] = await Promise.all([
      githubRequest(identifier, `/repos/${owner}/${repo}/pulls/${prNumber}`, {
        headers: { Accept: "application/vnd.github.diff" },
      }),
      githubRequest(identifier, `/repos/${owner}/${repo}/issues/${prNumber}/comments`),
    ]);

    const diff = typeof diffRaw === "string" ? diffRaw.slice(0, 3000) : "";
    const comments = Array.isArray(commentsRaw) ? commentsRaw : [];

    return { diff, comments };
  },
);

export const setupGitHubAuthTask = task(
  { name: "setupGitHubAuth" },
  async function setupGitHubAuth(params: {
    identifier: string;
    state: string;
    userVerifyUrl: string;
  }) {
    const link = await getGitHubAuthLink(params.identifier, {
      state: params.state,
      userVerifyUrl: params.userVerifyUrl,
    });

    return { authLink: link };
  },
);

// ---- LLM summary ----

function createOpenAIClient(): OpenAI {
  const apiKey = process.env.OPENAI_API_KEY;
  if (!apiKey) throw new Error("OPENAI_API_KEY not set");
  return new OpenAI({
    apiKey,
    ...(process.env.OPENAI_BASE_URL && { baseURL: process.env.OPENAI_BASE_URL }),
  });
}

const generateSummary = task(
  { name: "generateSummary", retry: { maxRetries: 3, waitDurationMs: 2000 } },
  async function generateSummary(
    prs: { number: number; title: string; diff: string; comments: { body?: string }[] }[],
    owner: string,
    repo: string,
  ): Promise<string> {
    if (prs.length === 0) return "No open pull requests found in this repository.";

    const client = createOpenAIClient();
    const prBlocks = prs
      .map((pr) => {
        const bodies = pr.comments.slice(0, 5).map((c) => `> ${(c.body ?? "").slice(0, 300)}`).join("\n");
        return `PR #${pr.number} — ${pr.title}\n${bodies || "No comments."}\nDiff:\n${pr.diff || "(not available)"}`;
      })
      .join("\n\n---\n\n");

    const response = await client.chat.completions.create({
      model: process.env.OPENAI_MODEL ?? "gpt-4.1-mini",
      messages: [
        {
          role: "system",
          content:
            "Summarize each PR in one paragraph (3-4 sentences) for a team lead. " +
            "Cover what it does, how much discussion happened, and whether it looks close to merging.",
        },
        { role: "user", content: `Repository: ${owner}/${repo}\n\n${prBlocks}` },
      ],
    });

    return response.choices[0].message.content ?? "(no summary generated)";
  },
);

// ---- Root task ----

export const summarizePRsTask = task(
  { name: "summarizePRs", timeoutSeconds: 120 },
  async function summarizePRs(input: PRSummaryInput) {
    const { identifier, owner, repo } = input;
    const topPRs = await fetchOpenPRs(identifier, owner, repo);

    if (topPRs.length === 0) {
      return { repository: `${owner}/${repo}`, prsAnalyzed: [] as string[], summary: "No open pull requests found." };
    }

    const details = await Promise.all(
      topPRs.map((pr) => fetchPRDetails(identifier, owner, repo, pr.number)),
    );

    const prsForSummary = topPRs.map((pr, i) => ({
      number: pr.number,
      title: pr.title,
      diff: details[i].diff,
      comments: details[i].comments as { body?: string }[],
    }));

    const summary = await generateSummary(prsForSummary, owner, repo);

    return {
      repository: `${owner}/${repo}`,
      prsAnalyzed: topPRs.map((p) => `#${p.number}: ${p.title}`),
      summary,
    };
  },
);

8. Wire the HTTP server

The HTTP server owns the secure flow. It issues the session cookie, starts the GitHub auth flow, validates the callback, and blocks summary requests until the session is connected.

src/server.ts

import crypto from "node:crypto";
import express from "express";
import { setupGitHubAuthTask, summarizePRsTask } from "./tasks.js";
import { isAccountActive, verifyUser } from "./scalekit.js";
import {
  consumePendingState,
  isConnected,
  markConnected,
  mintIdentifier,
  requireSession,
  setPendingState,
} from "./session.js";
import { renderHomePage, renderAuthCompletePage } from "./views.js";
import type { Request } from "express";

function getConfiguredPublicBaseUrl(): string | null {
  const value = process.env.PUBLIC_BASE_URL;
  return value ? value.replace(/\/$/, "") : null;
}

function getRequestOrigin(req: Request): string {
  const configured = getConfiguredPublicBaseUrl();
  if (configured) return configured;

  const protoHeader = req.get("x-forwarded-proto");
  const proto = protoHeader?.split(",")[0]?.trim() || req.protocol || "http";
  const host = req.get("x-forwarded-host") || req.get("host");
  if (!host) {
    throw new Error("Could not determine the public origin for this request");
  }
  return `${proto}://${host}`;
}

export function startServer(): void {
  const app = express();
  app.set("trust proxy", true);
  app.use(express.json());

  app.get("/", (req, res) => {
    const { entry } = requireSession(req, res);
    res.type("html").send(renderHomePage({ connected: isConnected(entry) }));
  });

  // Polled by the original tab while the OAuth tab is open.
  // Checks the in-memory session first, then queries the Scalekit API
  // to detect when the connected account becomes ACTIVE.
  app.get("/api/auth/status", async (req, res) => {
    const { entry } = requireSession(req, res);
    if (isConnected(entry)) {
      res.json({ connected: true });
      return;
    }
    if (entry.identifier && await isAccountActive(entry.identifier)) {
      markConnected(entry);
      res.json({ connected: true });
      return;
    }
    res.json({ connected: false });
  });

  app.post("/api/auth", async (req, res) => {
    const { entry } = requireSession(req, res);
    const identifier = mintIdentifier(entry);

    const state = crypto.randomUUID();
    setPendingState(entry, state);

    const result = await setupGitHubAuthTask({
      identifier,
      state,
      userVerifyUrl: `${getRequestOrigin(req)}/user/verify`,
    });

    res.json({ authLink: result.authLink });
  });

  // Callback for custom user verification mode. When Scalekit is
  // configured in "Scalekit users only" mode, this route may not fire —
  // the /api/auth/status polling handles that case via the Scalekit API.
  app.get("/user/verify", async (req, res) => {
    const { auth_request_id, state } = req.query as Record<string, string>;
    if (!auth_request_id || !state) {
      res.status(400).send("Missing auth_request_id or state");
      return;
    }

    const { entry } = requireSession(req, res);
    if (!entry.identifier) {
      res.status(400).send("No pending authorization for this session");
      return;
    }

    if (!consumePendingState(entry, state)) {
      res.status(400).send("Invalid or expired state");
      return;
    }

    await verifyUser({
      authRequestId: auth_request_id,
      identifier: entry.identifier,
    });

    markConnected(entry);
    // This handler runs in the OAuth tab. Render a minimal page
    // telling the user to close it — the original tab is polling
    // /api/auth/status and will auto-reload.
    res.type("html").send(renderAuthCompletePage());
  });

  app.post("/api/summarize", async (req, res) => {
    const { entry } = requireSession(req, res);
    if (!isConnected(entry)) {
      res.status(401).json({ error: "Connect your GitHub account first" });
      return;
    }

    // The UI sends { repository: "https://github.com/owner/repo" } or "owner/repo".
    // Parse the string into separate owner and repo values.
    const { repository } = req.body as { repository?: string };
    if (!repository) {
      res.status(400).json({ error: "Provide a GitHub repository URL or owner/repo name." });
      return;
    }

    let owner: string | undefined;
    let repo: string | undefined;
    try {
      const url = new URL(repository);
      const segments = url.pathname.split("/").filter(Boolean);
      owner = segments[0];
      repo = segments[1]?.replace(/\.git$/, "");
    } catch {
      const parts = repository.split("/");
      owner = parts[0];
      repo = parts[1]?.replace(/\.git$/, "");
    }

    if (!owner || !repo) {
      res.status(400).json({ error: "Provide a GitHub repository URL or owner/repo name." });
      return;
    }

    const result = await summarizePRsTask({ identifier: entry.identifier, owner, repo });
    res.json(result);
  });
}

9. Render the browser UI

The UI only asks for a repository. It does not ask for a user identifier. After a successful connection, the page auto-reloads and shows a connected banner.

The key change from a naive implementation: connectGitHub() opens the auth link in a new tab instead of navigating the current page. This keeps the app intact even if the OAuth redirect chain doesn’t return cleanly. The original tab polls /api/auth/status and auto-reloads when the Scalekit API reports the account as ACTIVE.

src/views.ts

export function renderAuthCompletePage(): string {
  return `<!DOCTYPE html>
  <html lang="en">
    <body style="display:flex;align-items:center;justify-content:center;min-height:100vh">
      <div style="text-align:center">
        <h1>&#10003; GitHub connected</h1>
        <p>You can close this tab and return to the app. The original page will update automatically.</p>
      </div>
    </body>
  </html>`;
}

export function renderHomePage({ connected }: { connected: boolean }): string {
  const connectedBanner = connected
    ? `<div class="connected-banner">&#10003; GitHub connected</div>`
    : `<div class="not-connected-banner">Connect GitHub before summarizing pull requests.</div>`;
  const authButtonLabel = connected ? "Reconnect GitHub" : "Connect GitHub";

  return `<!DOCTYPE html>
  <html lang="en">
    <body>
      ${connectedBanner}
      <button id="auth-btn" onclick="connectGitHub()">${authButtonLabel}</button>
      <div id="auth-result"></div>
      <input id="sum-repository" placeholder="https://github.com/owner/repo" aria-label="GitHub repository" />
      <button id="sum-btn" onclick="summarize()">Summarize</button>
      <pre id="summary-output"></pre>
      <script>
        let authPollTimer = null;

        function startAuthPoll() {
          if (authPollTimer) return;
          authPollTimer = setInterval(async () => {
            try {
              const r = await fetch('/api/auth/status');
              const d = await r.json();
              if (d.connected) {
                clearInterval(authPollTimer);
                authPollTimer = null;
                window.location.reload();
              }
            } catch {}
          }, 2500);
        }

        async function connectGitHub() {
          const btn = document.getElementById('auth-btn');
          const resultEl = document.getElementById('auth-result');
          btn.disabled = true;
          resultEl.textContent = 'Generating authorization link...';

          try {
            const res = await fetch('/api/auth', { method: 'POST' });
            const data = await res.json();
            if (!res.ok) throw new Error(data.error || 'Request failed');

            // Open OAuth in a new tab — this page stays intact.
            window.open(data.authLink, '_blank');
            resultEl.textContent = 'Waiting for GitHub authorization — complete the flow in the new tab.';
            startAuthPoll();
          } catch (err) {
            resultEl.textContent = err.message;
            btn.disabled = false;
          }
        }

        async function summarize() {
          const repository = document.getElementById('sum-repository').value.trim();
          const output = document.getElementById('summary-output');
          if (!repository) { alert('Enter a GitHub repository'); return; }
          output.textContent = 'Loading summary...';

          const res = await fetch('/api/summarize', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ repository }),
          });
          const data = await res.json();

          if (!res.ok) {
            output.textContent = data.error ?? 'Request failed';
            return;
          }

          output.textContent = data.summary;
        }
      </script>
    </body>
  </html>`;
}

10. Run locally

1. Copy .env.example to .env and fill in your values.
2. Run npm install.
3. Run npm run dev.
4. Open http://localhost:3000.
5. Click Connect GitHub. A new tab opens for the GitHub OAuth flow.
6. Complete the OAuth consent in the new tab.
7. The new tab shows “GitHub connected — you can close this tab” (in custom verification mode) or a Scalekit success page (in Scalekit-users-only mode).
8. The original tab auto-detects the connection and reloads, showing a GitHub connected banner.
9. Enter a repository URL or owner/repo, then generate a summary.

Public repositories work with any connected GitHub account. Private repositories only work if the connected account has access.

11. Deploy to Render

Render deploys the app as a web service from render.yaml.

Set these environment variables in Render:

Variable	Required	Notes
SCALEKIT_ENVIRONMENT_URL	Yes	From Scalekit dashboard → Developers → API Credentials
SCALEKIT_CLIENT_ID	Yes	Same location
SCALEKIT_CLIENT_SECRET	Yes	Same location
GITHUB_CONNECTION_NAME	Yes	From AgentKit → Connectors
OPENAI_API_KEY	Yes	OpenAI key or proxy token
OPENAI_BASE_URL	No	Leave empty for OpenAI direct. Set for LiteLLM/Azure/Ollama.
OPENAI_MODEL	No	Default: gpt-4.1-mini
SESSION_SECRET	Auto	render.yaml auto-generates this
PUBLIC_BASE_URL	No	Auto-detected from proxy headers. Only needed behind a custom domain.

After deploying, configure user verification in the Scalekit dashboard (step 2). The app will not complete the GitHub connection flow without this.

Production notes

• User verification mode: Switch to Custom user verification in the Scalekit dashboard before going to production. This ensures your backend confirms which session owns each new connection.
• Shared session store: The sample stores session data in memory. Use Redis or a database-backed shared store in production.
• Short-lived OAuth state: The sample expires the pending state after 10 minutes and consumes it after a single callback.
• Session-bound identifier: The browser never chooses the identifier that Scalekit uses to look up the connected account.
• Connector-backed GitHub requests: The sample routes both PR listing and PR detail fetches through Scalekit so the connected user’s token is used consistently.

Next steps

• Read user verification for connected accounts for the full verification model and additional examples.
• Read authorize a user for the status-polling pattern used to detect when a connected account becomes ACTIVE.
• Open the render-ai-agent-deploykit repository to compare the full implementation against the snippets in this cookbook.