PrototypeJam Synthesize Updates: IPhone, Copy, Models, Prompts

Hey everyone! This post breaks down the next steps and thoughts regarding the PrototypeJam Synthesize project. We'll cover adding the app to your iPhone home screen, implementing a "copy" button, integrating multi-model support (OpenAI, Claude, Gemini), updating prompt language, and step-by-step instructions for making changes and deploying them live. Let's dive in!

Next Steps

1. 📱 Adding PrototypeJam Synthesize to Your iPhone Home Screen

Want to access PrototypeJam Synthesize quickly? You can add it to your iPhone home screen just like a native app! This is a super handy feature that makes using web apps feel seamless. Here's how you do it, guys:

First, open Safari on your iPhone and navigate to the live site URL (e.g., https://prototypejam.github.io/synthesize/). Next, look for the Share button. It's the square icon with an up arrow, usually at the bottom of the screen. Tap that, and a menu will pop up. Scroll down through the options until you see “Add to Home Screen” and tap it. If you don’t see it right away, tap Edit Actions → Add to Home Screen and rearrange it into your favorites.

You can then rename the icon label if you want, or just keep the default name. Finally, tap Add, and boom! The app's icon will appear on your home screen, ready to go. It's just like having a regular app installed.

There's a little techy detail to keep in mind: iOS treats the site as a Progressive Web App (PWA) only if you’ve included certain things. PWAs offer a more app-like experience, launching full-screen without the browser's address bar and navigation. For iOS to recognize it as a PWA, make sure you’ve got an apple-touch-icon.png at the root of your project, a valid manifest.json file (which you should already have), and that the site is served over HTTPS (GitHub Pages does this automatically). These steps ensure a smooth, native-like experience when users add your site to their home screen. So, go ahead and add PrototypeJam Synthesize to your home screen and enjoy quick access to your awesome tool!

2. ✂️ Implementing a “Copy to Clipboard” Button (UX Flow)

Let’s talk about enhancing the user experience. You’ve already got Download and Share icons on each ResultCard, which is fantastic! Now, imagine adding a third button: “Copy to Clipboard.” This feature would allow users to quickly grab the text content of a result without having to manually select and copy it. It's all about making things as easy as possible for the user.

So, how would you go about implementing this? Here's the UX flow – the steps to think through the user experience, rather than the code itself, for now:

First, you’d add an extra <button> in the action row, right next to the Share and Download buttons. Label it simply as “Copy”. Easy peasy! Now, for the magic: you need to add an onClick handler to this button. This handler is what will trigger the copy action when the user clicks the button.

Inside the handler, you'll want to first check if the navigator.clipboard.writeText API is available in the user's browser. This is a modern API for copying text to the clipboard, and it’s widely supported. If it’s available, you’ll use it to write the content of the card to the clipboard. Something like this would do the trick:

const handleCopy = async (text: string) => {
  if (navigator.clipboard && navigator.clipboard.writeText) {
    await navigator.clipboard.writeText(text);
    showToast("Copied!");
  } else {
    fallbackCopyUsingExecCommand(text);
  }
};

For extra user feedback, you could optionally show a “Copied!” tooltip or toast notification after the text is copied. This gives the user immediate confirmation that the action was successful. Now, let's talk about the ResultCard. You'll need to pass this handleCopy function into the ResultCard component, similar to how you're already handling onShare and onDownload. This makes sure the button in each result card can trigger the copy action with the correct text.

The best part? Adding this feature doesn’t change your core build structure or deployment flow, making it a relatively safe enhancement. There are also some great libraries out there, like useCopyToClipboard, that can help with cross-browser compatibility and make the implementation even smoother. By adding a “Copy” button, you’re significantly enhancing the user experience and making PrototypeJam Synthesize even more user-friendly.

3. 🧠 Integrating Multi-Model Support: OpenAI, Claude, and Gemini

Alright, let's talk about leveling up PrototypeJam Synthesize by adding support for multiple AI models. We're talking OpenAI's GPT-4.1 and 4o, Claude's Opus-4 and Sonnet-4, and Gemini 2.5 Flash, on top of your existing Gemini 2.5 Pro. This is a huge step in giving users flexibility and choice in their AI interactions. So, how do we make this happen?

The first thing you’ll need to do is add a model selection dropdown to your UI. This is where users can pick which model they want to use. Think of a simple <Select> or <Dropdown> component in App.tsx. Store the user’s selected model in your React state, so you can easily access it later. Now, for the core logic, you'll need to refactor your geminiService.ts file. Or, even better, rename it to something more generic like llmService.ts to reflect that it's handling multiple Language Learning Models (LLMs).

Inside this service, you’ll modify the initializeAi(apiKey, model) function. This function should now accept the user’s API key and their chosen model. The key is flexibility! Instead of hard-coding new GoogleGenAI(...), you'll need to handle different models differently. For OpenAI, you'll use the openai library. You'll have to replace the hard-coded method with this one:

import OpenAI from "openai";
const client = new OpenAI({ apiKey });

client.chat.completions.create({
  model: selectedModel,
  messages: [ { role: 'user', content: SUMMARY_PROMPT + content } ]
});

Model names should map to values like `