Testing and troubleshooting your applet

Limitations Copied! Link to this section

There are a few things that Applet can’t do on its own just yet, so if you’re trying to do any of these things, that might explain any trouble you're having.

If you run into one of these limitations, hit us up in the community and tell us about what you’re trying to build - there might be a way around it. Plus it’s always great to know exactly what you want us to build next.

Generative AI Copied! Link to this section

While applet uses generative AI to write code, it won’t build apps that use generative AI unless you specifically provide it with API access to an external AI model.

So this prompt won’t work:

And this one will:

Scraping & crawling Copied! Link to this section

The apps that Applet builds are front-end only, so you cannot build crawlers or scrapers, as most websites reject requests from other front-end browsers (of CORS they do - this is a joke for 🤓)

Scheduled actions Copied! Link to this section

Applets you build cannot take action on their own time, for example “every day at 9am”, they can take action when they are loaded and active, or when users interact with them.

Tip: You can still achieve something similar. Like this example:

Specific apps for other platforms Copied! Link to this section

Applet specializes in building React apps, it cannot make you a WordPress plugin, or a Chrome extension etc. You can however prototype these apps, as Applet is more than capable of mocking up the WordPress interface, or some browser functionality 👌

Email sending Copied! Link to this section

Applet cannot send emails (or SMS) on its own, but you can provide your applet with API access to an external mail sending service, or use Applet to trigger webhook actions in Zapier, Make, or n8n which can in turn, set off an email sending flow.

Troubleshooting Copied! Link to this section

So you’ve checked the list above, and what you’re trying to do should be possible - but it’s not going to plan.

Here’s a list of things to try - you can try them in any order you like, though we’ve listed the simplest first.

Open the preview in a new tab Copied! Link to this section

As you build your applet, you'll find that it is optimized (by default) to occupy the full width of the screen, so the preview you see alongside the open chat bar can look a little squished sometimes.

If you're seeing layout issues, hide the chat bar or open the preview in a new tab:

This lets you quickly see your applet full size, so you can be sure it's displaying as it should be. 👌

Double check your prompt Copied! Link to this section

We all make mistakes - and sometimes a simple typo in your prompt might ask Applet to build the wrong thing. If you spot an error, just correct it and go again. As you re-read it you might also notice that it could be interpreted in a different way, or maybe isn’t as clear as it should be. For example...

You meant to type:

But you typed:

I definitely haven't done exactly this... 🤦‍♂️ ...got there in the end though.

Double check your version Copied! Link to this section

If what you see in the published version of your app, doesn't match the version shown when building - open the publish menu and make sure that your published version is up to date:

Also, if you've opened a version preview in a new tab it will continue to display the specific version you opened, not necessarily the latest version.

Try plan mode first Copied! Link to this section

Sending your prompt to the AI model in plan mode is a quick (and cheaper) way to confirm that it has understood, and get a good idea of what it will build. You can even send a prompt you’ve already used, and ask it to highlight any issues, or clarify things that aren’t clear.

Build a testing mode Copied! Link to this section

If your app requires user input, it can take a while to go through the process while testing - try telling the AI model to build in a testing mode, pre-populating fields with dummy data, or skipping parts of the process. Just remember to remove this before you go live 😉

Build in more visible info Copied! Link to this section

When I was building this game, with three image sprites to animate a character - the animation didn’t look correct. I couldn’t figure out exactly why, and even in plan mode it wasn’t super clear where we were going wrong.

So I asked the AI model to slow the animation and display the number of the image files next to it - this cleared things up immediately (I had provided them out of order). Try something like that!

Describe the issue - take a snapshot Copied! Link to this section

When you see an unexpected behavior (whether or not there’s a visible error) try to explain exactly what you see, not what you think is causing it.

This is particularly helpful if images or animations aren’t behaving as you’d hoped. Use specific terms about what you see, and let the AI model figure out the cause.

Use "Capture snapshot" while your applet is running to precisely highlight the problem, this is extra helpful with hard to describe issues - a picture paints a thousand words after all:

Break it down Copied! Link to this section

If you’re aiming for a certain behavior in your app but it’s not working how you’d like, sometimes it’s a good idea to try a slightly simpler or smaller version and get it working there. You can then apply this fix to the full issue.

As an example, let’s say you want objects to interact with the edge of the screen, but they’re going past it. Ask the AI to create the same interaction with the edge of a smaller box. When you get it working, now apply it to the edge of the screen. 👍

Try a different model, or level of thinking Copied! Link to this section

While it’s generally best to stick to the same model while you’re building (check out this article to learn why, and when it does make sense to switch) - sometimes you need a fresh set of “eyes”.

If you have asked one AI model to fix the issue and it hasn’t worked, try another one. Alternatively, you can give your existing model a boost by increasing the level of thinking effort, this can cost more but generally leads to higher quality results:

Error logging Copied! Link to this section

If things aren’t working, but it’s not clear why - ask the AI model to add clear and visible error logging. Then run your app again, if you see an error pop up, you can send it back to the AI to get a fix.

If you see errors like this in the chat history:

Clicking the error will expand it so show you more details.

As mentioned, we log these errors (and they’re pretty rare) but it might give you a clue that you can find your way out of, more promptly. 😅

Check the console Copied! Link to this section

This step is a little technical, but only needed if things are really "broken" - i.e your applet is crashing, or showing errors.

To find out more about the specific cause of an issue you’re seeing you can check the developer console in your browser.

Now you don’t need to be a dev to do this - you don’t even need to understand what you see.

Hit Command + Option (or Ctrl + Alt) + J to open the dev tools, and switch to "Console".

If you see any red or yellow lines, these are errors and warnings. Pasting them (or a screenshot of them) into your next prompt (in build or plan mode) should help guide the AI model in the right direction:

Try a different browser Copied! Link to this section

Sometimes strange behaviors that you see can be caused by your browser.

Applet will generally build for all modern browsers, but ruling out any browser specific issues is a good idea.

Open your applet in a couple of different browsers, and see if the behavior is the same. If it’s not, let the AI model know, and that should help it make the right changes.

Should I clear my cache? Copied! Link to this section

When Applet builds a new version, it generates brand new versions of the files it has changed, so there’s no caching, and no need to clear it.

Unless..

You’ve replaced image files or other assets, then your browser might be caching those specifically. So in that instance, clearing your cache is a great idea.

Roll back and start a new branch Copied! Link to this section

Sometimes when trying to fix a problem you might have the AI model try various fixes one after the other and this can lead to some confusion. Going back to the version that worked best and starting over with a new branch can be a really helpful approach here.

You can try to describe the behavior you want with a new prompt, or add functionality in smaller parts.

This article explains how in more detail.

You can always switch between versions or create multiple branches

New applet Copied! Link to this section

To totally clear the AI model's context, copy a version of your applet to a brand new applet. This effectively wipes the slate clean.

All of the code is still there, but your conversation history is not.

Check out this article to see how.

This approach pairs nicely with a short walk, or coffee break. Then you and the AI model can come back to the problem with a “clear head”.

Get a second opinion - Ask in the community Copied! Link to this section

If you’ve tried everything above, and you still can’t get the result you’re looking for, try asking a question in the Applet community on Discord. There’s plenty of motivated Appleteers who’ll be happy to take a look for you. 💪

Try your best to include any relevant details that you can, like screenshots, error messages, and prompts.

Start over Copied! Link to this section

This is a last resort (obviously) but AI works in mysterious ways, and sometimes starting over, building your app up piece by piece can be the best solution. You’ll have the advantage of knowing what went wrong, and what you want to avoid.

Does threatening, offering rewards, or cursing the AI model improve results? Copied! Link to this section

It has been suggested by one of Google’s co-founders (among others) that threatening an AI model with violence, shutdowns, or kidnapping can improve the responses you get. An alternative trend has been offering AI models rewards (monetary or otherwise) to improve their output.

This approach has been empirically tested by researchers at Wharton School Of Business, University of Pennsylvania.

The results were unreliable, and in many cases unpredictable - the researchers’ recommendation was to try prompt variations with specific and clear details, rather than resorting to these methods.