Scaling engineering with ChatGPT: How we built our Chrome extension

TL;DR: We used ChatGPT to rapidly prototype a Chrome extension for our CRM, saving 25-50% of engineering time and enabling non-technical team members to contribute meaningfully to development. While the AI-generated code needed refinement for production, it proved invaluable for quick iteration and validation of product ideas.

I've read many articles about using AI tools like ChatGPT to build products faster. But, until recently, I hadn't experienced it firsthand. The idea came from an advisor, Tommy, during a long run in the Seattle forest hills.

I was explaining my idea for our upcoming hackathon as we ran. I wanted to make sure my contribution to the hackathon at our team's upcoming offsite matched that of our engineers.

Tommy asked, "What if you just use ChatGPT to build your project?"

Could ChatGPT really build an entire production-grade application? I was curious and skeptical.

Turns out, the answer is both yes and no. Yes, it can help you create something functional quickly. But no, it might not be production-grade without some help. You'll still need engineers to polish things. But, ChatGPT was a good way to boost capacity and it allowed semi-technical operators like me to write code and offload low-risk tasks.

This has huge implications for small teams that are trying to do more with less. Below, I'll detail how I experimented with ChatGPT to create our Chrome extension and share some lessons learned for you to use in your work.

Building from scratch: Getting our Chrome extension from 0 to 1

I set out to build a Chrome extension for our CRM that would scrape LinkedIn profiles, save contacts to Clarify, and add them to Lists. Here’s how I broke down the development phases with ChatGPT and the prompts that I used.

Note: See the end of this post for a detailed list of all prompts.

1. Laying the foundation: Scraping LinkedIn data

The first step was straightforward. I needed to scrape basic profile data from a LinkedIn URL and save it into our Clarify CRM. This involved parsing elements like name, current company, email, and LinkedIn URL. I asked ChatGPT for help:

"It should scrape basic data from a LinkedIn /in/ URL."

ChatGPT’s response provided a working example of how to extract these elements from the page. I refined it with additional requests, like customizing the button UI to fit LinkedIn’s aesthetic:

"Update the CSS of the button to match LinkedIn buttons."

It was shocking how accurately ChatGPT produced working code. It even knew which LinkedIn element class name to use to inject the code.

2. Designing the UI: CSS help from AI

Next, I needed a user-friendly interface to capture notes and manage profile data before saving it. ChatGPT helped me style the popup:

"Style the popup to match the provided design."

This was where I started to feel the power of AI. Not only was I writing code, but I was doing it by literally uploading an image of what I wanted. I took a screenshot of something I mocked in Figma and ChatGPT was able to match it to a fairly high degree. The only thing I really had to adjust were the .svg icons.

The final popup had icons, a note-taking field that I eventually turned into an “add to list” option, and a “Save to Clarify” button.

3. Debugging and refining: Final adjustments

Most of the work at the end focused on fixing bugs, getting the style right, and making the API requests work as I wanted. For example, I asked:

"Remove the settings box and fetch the workspace slug from the API."

"How do I make the extension refresh only once on LinkedIn profile pages?"

The code in background.js was fairly sophisticated and worked as expected in each case. The hardest part was making sure I updated fields across multiple files. If I did the work manually, ChatGPT didn't have that context. This created a few cases where code I had written by hand collided with what ChatGPT was suggesting. Thankfully, tools like Cursor solved this since they’re constantly context aware with AI embedded in the place where you’re coding. 

ChatGPT was great at getting the basic extension going, but it wasn't production-grade. Our first version worked. But, some internal use showed it needed real engineering support to scale. Even though we had built it in only a few hours, we had nearly 10 people using this simple extension, and they were hitting walls.

From prototype to production

The next month, we reviewed the project and decided to allocate a few engineering hours to improve it.

The key takeaway? ChatGPT saved us 25-50% of the engineering time it would have taken to build a working prototype from scratch.

Using ChatGPT for rapid prototyping and testing sped up our work. It helped us prove the extension's value to our team and validated the need to commit engineering resources for the final product.

We had validated the usefulness of the Chrome extension and it was time to move beyond the prototype. I quickly realized that, though ChatGPT built a working V1, it took more engineering hours to polish it for production. Our engineer, John Jiang, took the prototype and did four things:

1. Rebuilt the infrastructure to be more scalable and less "hacky."
2. Fixed bugs caused by my rudimentary programming.
3. Introduced TypeScript, React, and a component library to build the application and handle custom styling.
4. Added continuous integration to streamline the development process.

Oh, and most importantly, John made it so I couldn’t just keep pushing main on GitHub. 😆

Overall, this wasn’t just a proof of concept—it was a valuable tool that our team could use, and our customers could benefit from. Starting with an AI-assisted prototype let us get something to market quickly and use engineering hours after to refine it.

Limitations and considerations for AI-assisted development

For founders of small teams (like those of us with under 10 employees), ChatGPT can act as a powerful force multiplier.

Here are four key takeaways for founders who are curious about using AI in their product development:

1. AI can help you be a functional engineer: If you're a semi-technical operator, ChatGPT can help you build early-stage products. It’s especially useful for rapid prototyping and validating ideas.
2. AI helps you create prototypes before engineering: This helps you test and iterate faster by letting you build low-res prototypes to validate ideas before investing in engineering.
3. Engineers are still needed for production-ready products: ChatGPT will get you far. But, you'll need engineers to polish the final product.
4. AI can free your engineers from grunt work: You can use AI to free your engineers from low-level tasks so they can focus on high-impact features and polishing prototypes to get them production ready. 

Small teams should be looking at their roadmap and saying “Does an engineer need to build this? Or can we prototype something good enough with a little bit of help?”

From this experience, I’ve already built two other prototypes that are helping our engineering team by delaying the need to build something production grade:

1. A prototype that’s a series of import scripts that is slowly morphing into a node application
2. A highly-sophisticated Zapier workflow that can ingest text messages via Twilio and import unstructured data matched to specific people in Clarify. 🤯

Pro tip: Zapier is great for low-code users. But, ChatGPT prompts can now do many tasks that need more than five steps in Zapier. 

The advantage of ChatGPT is that it can transform data inputs more effectively since it doesn't need structured inputs. Whereas Zapier needs the same input data every time to work, ChatGPT will return nothing if it finds something unexpected. This is what you want, and usually takes a lot of error handling to build in traditional engineering.

How teams should be building with AI

Using ChatGPT didn't just help build a Chrome extension. It let me, with only basic coding skills, contribute to our product development in a meaningful way. Some stand-out outcomes of this include:

1. We increased engineering capacity: ChatGPT expanded our capacity by about half an FTE. I no longer had to rely only on our engineers for system integrations, scripts, and low-risk features.
2. We unlocked fast, iterative prototyping: I built a V1 product in days and quickly tested it with customers and validated the concept. This agile approach saved us weeks in engineering time. It also helped us make better decisions about where to invest our resources.
3. Our engineers could focus on high-impact work: AI-assisted development let our engineers focus on the most valuable features. I could offload lower-risk tasks to myself with ChatGPT as my "robot helper.”

I can easily imagine a future where non-technical people run entire businesses with AI as their technical partner. We're not quite there. But, my work on this Chrome extension shows we're closer than ever to making that vision a reality.

Operators in all domains are becoming more technical. ChatGPT can greatly boost your ability as a functional programmer to create semi-production grade products. It's especially helpful for prototyping and building V1s to validate your product or feature ideas.

Have you built something with ChatGPT that has turned into a production-grade experience? I’d love to hear from you.

Our CRM Chrome extension is now available for all Clarify users. If you’re not yet on that list, you can sign up to get access to Clarify below.

Appendix: Prompts I used

1. Initial Request:

• "Can you help me build a Chrome extension?"

2. LinkedIn Chrome Extension Features:

• "It should scrape basic data from a LinkedIn /in/ URL."
• "Add a button to allow saving the profile to the Clarify CRM."
• "Create a popup to enter notes and save the profile."

3. Custom Icon and Button Updates:

• "Can you add a default icon for the button?"
• "Update the CSS of the button to match LinkedIn buttons."
• "Place a small SVG icon on the button."

4. HTML and CSS Updates for the Popup:

• "Style the popup to match the provided design."
• "Add icons next to each attribute in the popup."

5. Functional Enhancements:

• "How do I access and use local storage in background.js?"
• "If no company is detected, fill in with a blank."
• "Make the popup draggable."

6. Integration of PostHog Analytics:

• "I want to include the PostHog Web SDK and make posthog.capture() calls in content.js."
• "Capture a page view event when the popup loads."

7. Fetching Data from Clarify API:

• "Remove the settings box and fetch the workspace slug from the API."
• "Allow the user to select a list from Clarify."

8. Fixing Content Security Policies and Permissions:

• "How do I make the extension refresh only once on LinkedIn profile pages?"

9. Error Handling and Debugging:

• "Fix the Uncaught TypeError: loadPostHog(...) is not a function error."