←Back/Engineering/Claude
AdvancedEngineering

Build a Slack Link Summarizer from Scratch using Claude Code

Build a local Chrome extension that turns a focused Slack link into three to five takeaways in seconds. Joe dictates the PRD, reuses a Chrome extension skill, tests in developer mode, and fixes a raw JSON response with a screenshot.

Build a Slack Link Summarizer from Scratch using Claude Code

Source episode · 14:37

How I AI: Building Custom AI Accessibility Tools for Slack with Joe McCormick & Claude Code

with Claire Vo

Joe dictates the extension requirements, builds from a reusable Claude skill, loads the unpacked extension, and debugs the first test until the Slack modal is fully accessible.

Read the full episodeWatch on YouTubeListen on SpotifyListen on Apple

Before you start

What you need

  • Chrome with developer mode available
  • The Slack web app
  • Claude Code and a model API
  • Optional reusable Chrome extension skill and shared local config

What you’ll make

A local Slack extension that summarizes links from the focused message into an accessible modal with the title, source link, and three to five takeaways.

Tools used

Step by step

The workflow

Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.

6 steps

Step01

Dictate the Product Requirements (PRD)

Write a short PRD for the exact interaction. Joe specified a Slack only extension, Ctrl Shift 1 on the focused message, hidden retrieval of external links, and an accessible result with the article title, source link, and three to five takeaways.

Example prompt
Write a PRD for a locally run Chrome extension that works only in Slack. When a Slack message has focus and I press Ctrl Shift 1, find its external links, retrieve each article, and summarize it into three to five takeaways. Show the article title, a link that opens in a new tab, loading and error states, and a fully keyboard and screen reader accessible modal. Target a five to ten second response.
Step02

Scaffold the Project with Claude Code

Open Claude Code in a new extension folder and reference the PRD. If you already have a Chrome extension skill, invoke it directly so permissions, background messaging, accessible dialog behavior, and shared model configuration follow a known pattern.

Example prompt
@PRD.md

Use my Chrome extension skill to implement this PRD as a local Manifest V3 extension. Reuse the model configuration from my shared extension config. Limit permissions to what the feature needs, and include setup and testing instructions.
Step03

Review and Approve the Development Plan

Read the proposed implementation plan for the user flow, permissions, article extraction, model response shape, and dialog accessibility. Correct concrete omissions in the plan, then have Claude implement the extension.

Step04

Load and Test the Unpacked Extension

Open chrome://extensions, enable developer mode, and load the project folder as an unpacked extension. Refresh Slack, focus a message with a public article link, and press Ctrl Shift 1. Test the loading state, result, external link, keyboard flow, and screen reader announcements.

Step05

Debug Visually with Screenshots

When the first test fails, capture exactly what appeared and give Claude the screenshot plus the expected behavior. Joe used this approach when the modal printed JSON as text instead of rendering the title and takeaways.

Example prompt
The attached screenshot shows the current extension result. It is displaying raw JSON instead of the designed summary. Trace the model response and rendering path, use a structured JSON response rather than JSON embedded in text, parse it safely, and render the title, source link, and takeaways in the existing accessible dialog.
Step06

Apply the Fix and Retest

Reload the unpacked extension, refresh Slack, and run the same link again. Confirm that the takeaways render correctly and that focus stays inside the dialog. Try a second article and an inaccessible URL so success and error behavior both work.

What good looks like

  • Ctrl Shift 1 works from a focused Slack message with an external link.
  • The result appears within roughly ten seconds for a typical article.
  • The modal includes the article title, link, and three to five readable takeaways.
  • Keyboard and screen reader users can enter, read, and close the modal without losing their place.

Build your next product with ChatPRD

Turn an idea into a PRD, user stories, and a plan.

Try ChatPRD free

After the steps

Runbook notes

How to recover when the loop fails and where human judgment helps.

Recover

If it goes sideways

The extension cannot extract an article
Report the blocked URL instead of hanging. Test another public article, then add handling for redirects, scripts, or restricted pages only when needed.
The modal displays raw JSON
Use the API structured response setting and parse the returned object before rendering. Keep the requested schema aligned with the modal fields.
The keyboard shortcut does nothing
Check the command in chrome://extensions/shortcuts, confirm the Slack tab was refreshed after loading the extension, and verify that the message has focus.
The modal works visually but not with a screen reader
Add the correct dialog and heading relationships, focus management, keyboard dismissal, and live status messages, then retest without a mouse.

Keep building

Related workflows

How to Build and Run an E-commerce Business with AI as a Technical Co-Founder
advancedOperationsChatGPTCodex+1

How to Build and Run an E-commerce Business with AI as a Technical Co-Founder

A guide for solo entrepreneurs to manage business operations using AI. Learn how to source manufacturers, build and maintain an e-commerce site, and replace dashboards with voice commands, all without a human team.

Open
How to Prototype Complex Garments Using AI and 3D Modeling
advancedEngineeringChatGPTCodex

How to Prototype Complex Garments Using AI and 3D Modeling

Turn a complex, artistic concept into a manufacturable 3D model. This workflow shows how to use AI to generate a design from a photo and then create CAD files for 3D printing, even for previously 'unmanufacturable' items.

Open
How to Use AI for Fashion Design and Visualization from Sketch to Campaign
intermediateDesignChatGPT

How to Use AI for Fashion Design and Visualization from Sketch to Campaign

Learn to translate fashion sketches into a full suite of marketing visuals. This workflow covers creating a detailed design spec, generating a core product photo with AI, and iterating for different contexts like runway and influencer shots.

Open

Start shipping
better products.

Join 100,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.

Start building freeRequest a demo
Free to start
No credit card
SOC 2 certified
Enterprise ready