\n \n Remixable Integration Template\n

How a startup can ship a Val Town template that connects their product to GitHub

\n \n Interactive Demo — No real API calls\n

\n\n

\n \n \n \n

\n\n {tab === \"demo\" && }\n {tab === \"architecture\" && }\n {tab === \"code\" && }\n\n \n

\n );\n}\n\nfunction DemoTab({ authStatus, events, pushResults, pushing, onPush }) {\n return (\n <>\n

\n \n \n This is a simulated demo. In production, the user would connect real accounts.\n Click \"Push to GitHub\" to see what would happen.\n \n

\n\n {/* Connections */}\n

Connected Accounts

\n\n {authStatus && (\n <>\n

\n $\"avatar\"$ \n

{authStatus.github.user.login}

{authStatus.github.user.repos.length} repos accessible

\n \n Connected\n \n

\n\n

\n \n

AcmeStartup

{authStatus.startup.user.workspace} · {authStatus.startup.user.plan} plan

\n \n Connected\n \n

\n \n )}\n

\n\n {/* Events */}\n

Pending Actions from AcmeStartup

\n\n {events.map((event) => (\n

\n {event.type === \"issue_created\" && <> Issue}\n {event.type === \"deploy_triggered\" && <> Deploy}\n {event.type === \"file_sync\" && <> File Sync}\n

{event.title}

{event.description}

\n \n octocat/{event.repo}\n

\n onPush(event.id)}\n disabled={pushing[event.id] || !!pushResults[event.id]}\n >\n {pushing[event.id]\n ? <> Pushing...\n : pushResults[event.id]\n ? <> Pushed\n : <> Push to GitHub}\n \n

\n\n {pushResults[event.id] && (\n

{pushResults[event.id].message}

\n Here's what would happen with real API tokens:\n

\n {Object.entries(pushResults[event.id].whatWouldHappen).map(([key, value]) => (\n

{key.replace(\"step\", \"\")}

{value}

\n ))}\n

\n )}\n

\n ))}\n

\n \n );\n}\n\nfunction ArchitectureTab() {\n return (\n <>\n

\n \n

How the Pieces Fit Together

\n\n

{\n`┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐\n│ │ │ │ │ │\n│ AcmeStartup │────────▶│ This Val Town │────────▶│ GitHub API │\n│ (Product UI) │ webhook │ Template │ OAuth │ (User's Repos) │\n│ │ │ │ token │ │\n└─────────────────┘ └──────────────────┘ └─────────────────┘\n │\n User clicks \"Sync\" Uses BOTH tokens:\n in AcmeStartup UI • STARTUP_API_TOKEN → read event data\n • GITHUB_TOKEN → create issues/PRs/commits`\n }

\n\n

\n \n

User Journey

\n\n

\n {[\n { label: \"1. Remix the Template\", detail: \"User clicks \\\"Use this template\\\" from the startup's docs. Gets their own copy on Val Town.\" },\n { label: \"2. Connect GitHub\", detail: \"OAuth flow grants the val a token to act on the user's GitHub repos. Token stored as env var.\" },\n { label: \"3. Add Startup API Key\", detail: \"User grabs their API key from AcmeStartup's dashboard, pastes it as an env var.\" },\n { label: \"4. Configure Webhook\", detail: \"User copies this val's endpoint URL into AcmeStartup's webhook settings.\" },\n { label: \"5. It Just Works ✨\", detail: \"When events happen in AcmeStartup, this val bridges them to GitHub automatically.\" },\n ].map((s) => (\n

{s.label}

{s.detail}

\n ))}\n

\n\n

\n \n

Required Environment Variables

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Variable	Source	Purpose
`GITHUB_TOKEN`	GitHub OAuth flow	Create issues, PRs, commits on user's repos
`STARTUP_API_TOKEN`	AcmeStartup dashboard	Read events, mark as synced
`WEBHOOK_SECRET`	Generated at setup	Verify incoming webhooks are legit

\n \n );\n}\n\nfunction CodeTab() {\n return (\n <>\n

\n \n

Why This Pattern is Powerful

For the startup: You ship a template, not infrastructure. No need to build GitHub integration into your core product. Users remix the val and own their own integration — you just document the webhook format.

\n
\n

For the user: Full control. They can see the code, customize the behavior, add filtering logic, route different events to different repos. It's their code running in their Val Town account.

\n
\n

For everyone: Tokens stay with the user. The startup never sees the user's GitHub token. The user never gives the startup write access to their repos.

\n\n

GitHub Auth: Two Approaches

\n\n

\n Option A: GitHub OAuth App (Recommended)\n

\n The startup registers a GitHub OAuth App. Users go through the flow and the val stores the token.\n

{\n`// Hono route that kicks off GitHub OAuth\napp.get(\"/auth/github\", (c) => {\n  const url = \\`https://github.com/login/oauth/authorize\\`\n    + \\`?client_id=\\${Deno.env.get(\"GITHUB_CLIENT_ID\")}\\`\n    + \\`&scope=repo\\`\n  return c.redirect(url);\n});`}

\n\n

\n Option B: Personal Access Token (Simpler)\n

\n User generates a GitHub PAT and pastes it as an env var. Easier setup, less code.\n

{\n`// Just read it from env vars\nconst githubToken = Deno.env.get(\"GITHUB_TOKEN\");\n\n// Then use it to create an issue\nawait fetch(\\`https://api.github.com/repos/\\${owner}/\\${repo}/issues\\`, {\n  method: \"POST\",\n  headers: { Authorization: \\`Bearer \\${githubToken}\\` },\n  body: JSON.stringify({ title, body })\n});`}

\n\n

The Webhook Handler (Core Logic)

\n\n

\n This is the heart of the integration. The startup's product sends a webhook, and this val bridges it to GitHub.\n

\n\n

{\n`// POST /api/webhook — called by AcmeStartup\napp.post(\"/api/webhook\", async (c) => {\n  // 1. Verify the webhook signature\n  const sig = c.req.header(\"x-acme-signature\");\n  if (!verifySignature(sig, body))\n    return c.json({ error: \"Invalid\" }, 401);\n\n  // 2. Parse the event from the startup\n  const event = await c.req.json();\n\n  // 3. Use the GitHub token to create an issue\n  const ghToken = Deno.env.get(\"GITHUB_TOKEN\");\n  await fetch(\\`https://api.github.com/repos/...\\`, {\n    method: \"POST\",\n    headers: { Authorization: \\`Bearer \\${ghToken}\\` },\n    body: JSON.stringify({\n      title: event.title,\n      body: event.description,\n    })\n  });\n\n  // 4. Confirm back to the startup\n  return c.json({ synced: true });\n});`}

\n\n

\n \n

What the Startup Ships

The startup publishes this as a public Val Town template. Their docs say:

Go to val.town/x/acme/github-sync and click Remix
Set your STARTUP_API_TOKEN env var (find it in Settings → API)
Set your GITHUB_TOKEN env var (create a PAT at github.com/settings/tokens)
Copy your val's endpoint URL into AcmeStartup → Settings → Webhooks
Done! Events now sync automatically. Customize the code however you like.

\n \n );\n}\n\ncreateRoot(document.getElementById(\"root\")).render();\n","deleted","label",[183,167],"frontend","permalink","https://www.val.town/x/sahar/remixable-integration-demo/code/frontend/index.tsx","extension","tsx","actionData","errors"]