feat(primer-api): add AI-powered Primer bot for Slack by hectahertz · Pull Request #7713 · primer/react

hectahertz · 2026-03-30T12:24:44Z

Closes #

This adds an AI-powered assistant for the #primer Slack channel. It supplements the existing Moveworks-based Primer Bot (which does static FAQ matching on @mentions) by providing dynamic, context-aware answers powered by GitHub Models (GPT-4o).

The architecture avoids hosting anything. A Slack Workflow triggers a GitHub Action via repository_dispatch, which fetches relevant docs from primer.style, sends them to GPT-4o with the question, and posts the answer back to Slack as a thread reply.

User posts question in #primer
  → Someone reacts with :robot_face:
    → Slack Workflow fires
      → Sends repository_dispatch to GitHub Actions
        → Action fetches Primer component docs from primer.style
        → Sends context + question to GitHub Models (gpt-4o)
        → Posts answer back to Slack via Web API (thread reply)

How it compares with the existing Primer Bot:

	Moveworks Bot (existing)	Primer AI (this PR)
Trigger	@mention	:robot_face: emoji
Response type	FAQ match	Dynamic LLM reasoning
Data source	Static FAQ markdown	Live primer.style docs
Latency	~1s	~15-30s (Action cold start)
Infra	Moveworks (managed)	GitHub Actions (zero hosting)

Example invocations

Local CLI testing (no Slack needed):

export GITHUB_MODELS_TOKEN=ghp_...
npx tsx packages/primer-api/src/action.ts "How do I use ActionList with sections?"

Expected output:

--- Answer ---
You can create sections in ActionList using `ActionList.Group`. Import from `@primer/react`:

`import {ActionList} from '@primer/react'`

Wrap related items in `ActionList.Group` with a `title` prop:

‍‍‍jsx
<ActionList>
  <ActionList.Group title="Navigation">
    <ActionList.Item>Home</ActionList.Item>
    <ActionList.Item>Settings</ActionList.Item>
  </ActionList.Group>
  <ActionList.Group title="Actions">
    <ActionList.Item variant="danger">Delete</ActionList.Item>
  </ActionList.Group>
</ActionList>
‍‍‍

Docs: <https://primer.style/product/components/action-list>

Model: gpt-4o-2024-11-20
Components: ActionList

Manual dispatch via GitHub UI:

Go to Actions > "Primer Bot" > "Run workflow"
Enter: "What's the difference between Button and IconButton?"
Check Action logs for the answer (no Slack posting in manual mode)

HTTP server for local dev:

npm run dev -w packages/primer-api

curl -X POST http://localhost:3847/ask \
  -H 'Content-Type: application/json' \
  -d '{"question": "When should I use Banner vs Flash?"}'

Expected response:

{
  "answer": "`Banner` is the newer, recommended component for displaying important messages...",
  "model": "gpt-4o-2024-11-20",
  "componentsMentioned": ["Banner", "Flash"]
}

Full Slack flow (after setup):

Someone posts in #primer: "How do I add loading state to a Button?"
Another person reacts with :robot_face:
Slack Workflow fires, sends repository_dispatch to GitHub
~20s later, Primer AI posts a thread reply with the answer, including code examples and a link to the Button docs on primer.style

Changelog

New

packages/primer-api/ - New package with the Primer bot logic (knowledge retrieval, LLM integration, Slack posting)
.github/workflows/primer-bot.yml - GitHub Action workflow triggered by repository_dispatch or workflow_dispatch

Changed

N/A

Removed

N/A

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; this is a private internal tool ("private": true), not published to npm

Testing & Reviewing

To test locally:

npm install
npm run build -w packages/react
export GITHUB_MODELS_TOKEN=ghp_...  # needs models:read scope
npx tsx packages/primer-api/src/action.ts "How do I use ActionList?"

To test the HTTP server:

npm run dev -w packages/primer-api
curl -s http://localhost:3847/ask -X POST -H 'Content-Type: application/json' -d '{"question":"What component should I use for a dropdown menu?"}'

TypeScript:

cd packages/primer-api && npx tsc --noEmit  # should pass clean

Setup for full Slack integration (not required for review)

Needs three GitHub Actions secrets:

MODELS_TOKEN - GitHub PAT with models:read scope
SLACK_BOT_TOKEN - Slack bot token with chat:write scope

Then a Slack Workflow that triggers on :robot_face: reaction and sends a repository_dispatch webhook. Full setup instructions in packages/primer-api/README.md.

Merge checklist

changeset-bot · 2026-03-30T12:24:48Z

⚠️ No Changeset found

Latest commit: d427938

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copilot

Pull request overview

Adds a new internal @primer/api workspace that powers an AI assistant workflow for the #primer Slack channel, using GitHub Actions + GitHub Models/OpenAI and primer.style docs retrieval.

Changes:

Introduces packages/primer-api with Slack-posting Action entry point, local HTTP API, prompt templates, and primer.style doc retrieval.
Adds a Primer Bot GitHub Actions workflow triggered by repository_dispatch and workflow_dispatch.
Updates package-lock.json to include the new workspace and its dependencies.

Reviewed changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
packages/primer-api/tsconfig.json	TypeScript build configuration for the new workspace.
packages/primer-api/src/prompts.ts	Defines system/user prompt construction for Slack-oriented responses.
packages/primer-api/src/llm.ts	OpenAI-compatible chat completion wrapper integrating retrieved context.
packages/primer-api/src/knowledge.ts	Component matching + primer.style doc fetching and prompt-context formatting.
packages/primer-api/src/index.ts	Local/dev HTTP server exposing `/ask` and `/health`.
packages/primer-api/src/config.ts	Env-based configuration (GitHub Models vs OpenAI, ports, optional auth).
packages/primer-api/src/action.ts	GitHub Action entry point: read event payload, call LLM, post to Slack thread.
packages/primer-api/package.json	Declares the new private workspace package and scripts/deps.
packages/primer-api/README.md	Setup and usage docs for Slack workflow + local testing.
packages/primer-api/.env.example	Example env vars for local runs.
.github/workflows/primer-bot.yml	Workflow wiring for dispatch triggers and running the bot.
package-lock.json	Lockfile updates for new workspace + dependencies.

Copilot · 2026-03-30T12:30:20Z

packages/primer-api/src/index.ts

+const server = createServer(async (req, res) => {
+  // CORS headers
+  res.setHeader('Access-Control-Allow-Origin', '*')
+  res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS')
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization')
+


The server sets Access-Control-Allow-Origin: * and listens on all interfaces by default (server.listen(config.port)). If someone runs this outside localhost, it becomes a publicly callable LLM proxy (and potentially exposes Slack posting if configured). Consider binding to 127.0.0.1 by default and/or making CORS opt-in / restricted to known origins.

Copilot · 2026-03-30T12:30:20Z

packages/primer-api/src/knowledge.ts

+export function formatContext(ctx: RetrievedContext): string {
+  const sections: string[] = []
+
+  sections.push(`Available Primer React components: ${ctx.componentList}`)
+


formatContext always injects a comma-joined list of all Primer React components into the prompt. This can add a lot of tokens/cost and may push the prompt toward context window limits without improving answer quality. Consider omitting it, truncating it, or only including it when no relevant component match is found.

Copilot · 2026-03-30T12:30:20Z

packages/primer-api/src/prompts.ts

+  return `## Context from Primer documentation
+
+${context}
+
+## Question


buildUserPrompt uses Markdown headers (## ...). Since the system prompt explicitly forbids Slack-style headers (#) in the assistant output, including header syntax in the user message/context can increase the chance the model mirrors that formatting. Consider switching to plain-text delimiters (e.g. Context: / Question:) instead of ## headings.

Suggested change

return `## Context from Primer documentation

${context}

## Question

return `Context from Primer documentation:

${context}

Question:

Copilot · 2026-03-30T12:30:21Z

packages/primer-api/src/llm.ts

+export async function ask(question: string, config: Config): Promise<AskResult> {
+  const openai = getClient(config)
+
+  // Retrieve relevant context from MCP data layer


The inline comment says context is retrieved from an "MCP data layer", but retrieveContext in this package fetches primer.style docs and uses @primer/react/generated/components.json. Update the comment to match the actual implementation so future maintenance/debugging isn’t misleading.

Suggested change

// Retrieve relevant context from MCP data layer

// Retrieve relevant Primer docs and component metadata for the question

Copilot · 2026-03-30T12:30:21Z

packages/primer-api/src/action.ts

+ *
+ * Triggered by repository_dispatch with event_type 'primer-bot-question'.
+ * Reads the question from the payload, generates an answer using the LLM,
+ * and posts it back to Slack via incoming webhook.


The file header comment mentions posting to Slack via an "incoming webhook", but the implementation uses chat.postMessage with a bot token. Please update the comment to reflect the actual Slack API being used.

Suggested change

* and posts it back to Slack via incoming webhook.

* and posts it back to Slack using the Slack Web API (chat.postMessage) with a bot token.

Copilot · 2026-03-30T12:30:21Z

.github/workflows/primer-bot.yml

+        description: 'Question to ask the Primer bot'
+        required: true
+
+permissions: {}


permissions: {} at the workflow level will leave GITHUB_TOKEN with no permissions, which causes actions/checkout to fail (it needs contents: read). Add at least permissions: contents: read (either at the workflow level or job level).

Suggested change

permissions: {}

permissions:

contents: read

Copilot · 2026-03-30T12:30:21Z

packages/primer-api/src/index.ts

+function readBody(req: IncomingMessage): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const chunks: Uint8Array[] = []
+    req.on('data', (chunk: Uint8Array) => chunks.push(chunk))
+    req.on('end', () => resolve(Buffer.concat(chunks).toString()))
+    req.on('error', reject)
+  })


readBody buffers the entire request body with no size limit. If this server is run anywhere beyond local dev, a large request can cause memory pressure/DoS before the later question.length check. Add a maximum body size (e.g. stop reading after N bytes and return 413).

primer · 2026-03-30T12:32:36Z

🤖 Lint issues have been automatically fixed and committed to this PR.

primer · 2026-03-30T12:40:01Z

🤖 Lint issues have been automatically fixed and committed to this PR.

feat(primer-api): add AI-powered Primer bot for Slack

ddc4ba9

hectahertz requested a review from a team as a code owner March 30, 2026 12:24

hectahertz requested review from Copilot and francinelucca March 30, 2026 12:24

Copilot started reviewing on behalf of hectahertz March 30, 2026 12:25 View session

Copilot AI reviewed Mar 30, 2026

View reviewed changes

chore: auto-fix lint and formatting issues

d427938

github-actions bot temporarily deployed to storybook-preview-7713 March 30, 2026 12:35 Inactive

primer bot deployed to github-pages March 30, 2026 12:44 View deployment

github-actions bot deployed to storybook-preview-7713 March 30, 2026 12:45 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(primer-api): add AI-powered Primer bot for Slack#7713

feat(primer-api): add AI-powered Primer bot for Slack#7713
hectahertz wants to merge 2 commits intomainfrom
hectahertz/feat-primer-bot

hectahertz commented Mar 30, 2026 •

edited

Loading

Uh oh!

changeset-bot bot commented Mar 30, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 30, 2026

Uh oh!

Copilot AI Mar 30, 2026

Uh oh!

Copilot AI Mar 30, 2026

Uh oh!

Copilot AI Mar 30, 2026

Uh oh!

Copilot AI Mar 30, 2026

Uh oh!

Copilot AI Mar 30, 2026

Uh oh!

Copilot AI Mar 30, 2026

Uh oh!

primer bot commented Mar 30, 2026

Uh oh!

primer bot commented Mar 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	// Retrieve relevant context from MCP data layer
	// Retrieve relevant Primer docs and component metadata for the question

	* and posts it back to Slack via incoming webhook.
	* and posts it back to Slack using the Slack Web API (chat.postMessage) with a bot token.

Conversation

hectahertz commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Example invocations

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

primer bot commented Mar 30, 2026

Uh oh!

primer bot commented Mar 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

hectahertz commented Mar 30, 2026 •

edited

Loading

changeset-bot bot commented Mar 30, 2026 •

edited

Loading