How to build AI Assistant Prototypes

🧠Knowledge Series 67: Vibe code your prototype and craft your AI Assistant strategy. Exploring the 5 different AI Assistant types.

🔒The Knowledge Series is available for paid subscribers. Get full ongoing access to 60+ explainers and tutorials to grow your technical knowledge at work. New guides added every month.

---

Hi product people 👋, the vibe coding hype may have died down a little in recent weeks but it’s still very much part of the zeitgeist. A few days ago, a senior YC exec described AI tools as the software equivalent of the invention of the “combine harvester” which will mean the world is going to have a lot more food and a lot fewer farmers.

The farmers, in this context of course, are software engineers. But we won’t get too bogged down in that debate right now.

Instead, in this Knowledge Series, we’re going to explore how you can use vibe coding tools to build an AI Assistant prototype for your product. We’ll cover 5 different approaches to AI Assistants and for each one, we’ll clone popular product products like Stripe, Shopify and Linear to demonstrate just how easy it is to build UIs that look exactly like the product you’re working on.

But we won’t just focus on the UI. We’ll also take a look at how you can use AI tools to shape the strategic product decisions that underpin those designs in the first place so that you build the right type of AI Assistant for your value proposition.

Coming up, how to use AI to craft a prototype and strategy for 5 different types of AI Assistants including:

1. AI Assistant chat pop up

2. Contextual actions

3. In-product side panels

4. AI Search

5. Full screen live voice assistants

---

The Knowledge Series

1.AI Assistant chat pop up

Cloned product: Stripe

In this first example, we’re going to imagine we’re working at Stripe and we’re building a prototype of our AI Assistant to test with some users.

The AI Assistant chat pop up is the standard way that many product teams are integrating AI Assistants. Some companies decide to build their own from scratch while others rely on SaaS companies like Decagon and Intercom’s Fin to integrate third parties. Intercom’s Fin, for example, recently unveiled new capabilities including image recognition, voice support and real time translations.

But before you could even start to think about building a prototype, ideally you need to figure out what exactly your AI Assistant should do.

Crafting your AI Assistant strategy: How to figure out what your AI Assistant should do

In this step, we’re going to give Grok (the AI tool we’re using for PRDs and prompts here) some further context about our business.

This can be anything of value relating to your company and for this example we’re going to imagine we’ve decided to use a bunch of different inputs including:

• Copies of our codebase to understand our feature set

• A data dump from our analytics platform

• Error logs and information about bugs

• Call center / customer service logs to understand what users are complaining to customer service about

These are just illustrative examples and in the real world, an AI Assistant would need to be trained on richer, cleaner data sources than this. But the point here is that you can not only use these sources to train your AI Assistant, but also to help you to generate ideas about the functionality and design of it, too.

How to use this to generate new ideas about how the AI assistant should work

We eventually end up with a series of documents and / or a spreadsheet of the relevant data. Here’s a mock sample of data used:

An example of the types of data we can give to Grok to generate ideas

We can use this to ask Grok what our AI Assistant could do:

Imagine you're a product manager at Stripe. Based on this spreadsheet, imagine we're training our new AI Assistant on this data. Come up with the top 10 things we should prioritise for our AI Assistant to do.

In the response, we get 10 different ideas including ideas around fraud detection, error code translation, usage analytics insights.

These are helpful, but we can then take things a step further and ask Grok to explain how this might influence our design choices. Grok comes up with a series of ideas around this including a series of design principles like “conversational clarity and proactive guidance” as well as specific ideas such as the ability restart a failed checkout directly in the UI and a “Tone Toggle” which gives users the ability to toggle between developer mode and user mode depending on who is using the Assistant.

Using these ideas, we ask Grok to create a PRD, which it does successfully. With a few tweaks we can transform the PRD into a prompt for Lovable.

If we enter the prompt into tools like Lovable or Replit, we can then create the prototype of our AI Assistant.

Here’s the Stripe clone we’ve created - which includes our AI Assistant prototype in the bottom right hand corner.

The assistant includes some of the use cases we told it to include such as support for troubleshooting payments. But critically, it also includes some of the original ideas that it generated based on our “strategic inputs” - in this case, a toggle between friendly and technical mode.

But that’s just one of five different types of AI Assistant. Now let’s take a look at the rest, starting with an example of a prototype of an AI Assistant that can perform contextual actions on behalf of users.

2.Contextual actions

Cloned product: Shopify

Contextual actions are dynamic, situation-specific actions or suggestions that appear based on the user’s input or conversation context, like offering options such as “Debug this code,” “Generate a visualization,” or “Explain this function,” to streamline interaction. In-product assistants come pre-built with actions they can perform on a users’ behalf.

For example, Miro performs contextual actions by allowing users to highlight a bunch of post-its and do things like summarize themes, generate key takeaways or suggest next steps for a retro. You can read more about contextual actions and each of the various different approaches to building AI Assistants in the Deep Dive on the UX of AI Assistants.

Back to this example, though, and for this, we’re going to imagine we’re working at Shopify this time. Using the same principles as the previous example, we’re going to start by teaching Grok a bit more about our business and its core value proposition.

There’s a bunch of ways we can do this but we’ll use a value proposition canvas to structure our thinking. You can grab a copy of a value proposition canvas here:

https://docs.google.com/presentation/d/1hHiO5cHABd1rFTtkkbOazI9iOdoYHN7LH1F8c_47KGY/edit?usp=sharing

The value proposition canvas contains things like Jobs to be Done and Pain killers. It’s not the only way to think about value but can be helpful in certain circumstances.

Using this we can ask Grok to fill it in:

imagine you're a shopify product executive who is responsible for merchant revenues and you're using this framework to summarize your product. Fill it in with the relevant sections

Then, we ask it to come up with some ideas for how we can use contextual AI Assistants based on our value proposition:

Now imagine you're a product manager at Shopify and you've been tasked with driving revenues at Shopify for your area (merchants).
As part of your strategy and roadmap, you want to build new contextual AI action features that help users achieve their goals quickly when using your product. 

Contextual actions are dynamic, situation-specific actions or suggestions that appear based on the user’s input or conversation context, like offering options such as “Debug this code,” “Generate a visualization,” or “Explain this function,” to streamline interaction. In-product assistants come pre-built with actions they can perform on a users’ behalf.

For example, Miro performs contextual actions by allowing users to highlight a bunch of post its and do things like summarize themes, generate key takeaways or suggest next steps for a retro.

Based on the value proposition of Shopify and my responsibilities for driving merchant revenues, come up with ideas for contextual AI features for my product.

In our response, Grok gives us a bunch of ideas that we can consider for contextual AI across areas like product inventory management, customer support and pricing.

Here’s some of its suggested ideas

• "Enhance Product Description": Rewrites the description to be more engaging, concise, or keyword-optimized while maintaining the merchant’s tone of voice.

• "Analyze Abandonment Reasons": Examines checkout data (e.g., high shipping costs, lack of payment options) and suggests specific improvements, like enabling Shopify Payments or offering free shipping thresholds.

• "Analyze Competitor Pricing": Scrapes publicly available data from competitors’ stores (within ethical bounds) and suggests adjusting prices to stay competitive.

If we wanted to build a prototype using this, we could. I’m going to choose the Analyze Competitor Pricing feature as the feature we want to test for our prototype.

We then ask Grok to create our prompt that we’ll use for Lovable. You can get a copy of all the prompts used here.

Here’s the prototype it built for us:

https://preview--pricing-sage-assistant.lovable.app/

As you can see, when you click to edit a price, it now gives us the option of benchmarking this against competitor prices - which is exactly what we wanted for this example.

3.In-product side panels

Cloned product: Linear

Next, we move onto our third version of an AI Assistant, the in-product side panel style where the assistant appears inside the product but through a panel powered by a toggle. To me, these side panels make the Assistant feel more integrated and embedded into the overall UI, making them a suitable candidate for assistants that allow users to perform actions.

For this, instead of telling Grok what the value proposition of Linear is up front, we’ll ask it - and let us decide based on its own knowledge. Since Grok is hooked up to the entire corpus of X, it’s actually pretty good at business-related queries. In this case, it comes up with a list of 10 core features, including: