I Asked Claude to Make 5 Useful Apps. Here’s How It Went.

Can Claude help a code-illiterate person like me create something that works?

In the middle of 2023, I got my Bing’s and ChatGPT’s hands dirty to create an app of questionable usefulness:

Can I, a Noob, Create a Useful Site With The Help Of AI? Let's Find Out! (Part One.)

Back then, Copilot was still called “Bing Chat,” and GPT-4 was still the best LLM around.

It was a simpler time.

LLMs have since gotten way better at coding and the interfaces for interacting with the resulting code have also improved.

Claude is the prime example: Its “Artifacts” window can natively run and display app elements, which lets you test and iterate without ever leaving the UI.

I once showed how to use Artifacts to create interactive courses from any material.

But I wanted to return to the question I posed over a year ago: Can a non-coder use LLMs and their coding abilities for something truly practical?

Why don’t we go ahead and find out?

🧪 The test

Just as before, I wanted to see how far one could get with a free tool.

So for this test, I stuck to the free version of Claude 3.5 Sonnet.

This made me run into some frustrations that I’ll discuss at the end (along with potential solutions).

The approach itself was similar to what I did with Bing:

1. Brainstorm app ideas together with Claude.

2. Pick the apps to implement.

3. Get Claude to write the code.

4. Work iteratively with Claude to improve the apps and troubleshoot issues.

The main difference was that my faith in Claude’s abilities made me more ambitious.

Instead of just one useful app, Claude and I would try to make five.

Thanks, Claude!

Let’s roll!

Newsletter Recommendation: Next Big App - Discover AI apps & automations that boost your business. Get tips & tricks. Gain insights with future trends, research & reports.

⚙️ The process

My goal was for Claude to be involved from start to finish.

Idea generation and selection

First off, I needed Claude to propose app ideas that could run in the Artifacts window. So that’s what I asked for:

I used the “Ask me questions” approach and got Claude to interview me before giving its answers to ensure we didn’t miss anything.

It did a pretty good job:

After I provided my answers, Claude returned these suggestions:

My favorites were:

1. Color Palette Generator

2. Interactive Data Formatter

3. Time Zone Visualizer

4. Data Visualization Sketcher

5. Interactive Decision Tree Builder

At that point, Claude and I were ready to get to work.

Implementation

I started separate chats for each app to avoid hitting the context window limit (see “Limitations & solutions” below).

In the new chat, I’d copy-paste our initial brainstorm for context, then ask Claude to make a specific app from our list.

After Claude returned the initial app, I’d have a few back-and-forth rounds. This was mainly to add new features, but in some cases, I ran into issues that needed fixing.

Some apps took just a few iterations.

Some took way more, especially when I tried to ask for new features.

Without further ado, let’s check out the apps.

💻 The results

Here are the five apps.

I share a direct link to each Artifact, so you can test them yourself.¹

You’ll probably see the following dialogue:

There’s no unsafe content in my apps², so go ahead and just click “Show Content.”

App #1: Color Palette Maker

This app lets you generate random color palettes of up to eight colors (minimum is two). You can also define your own colors if you’re feeling fancy.

Claude can then isolate the palette in a separate window for easy screenshot-taking, letting you save the result:

You can then use the color palette for things like styling your Midjourney images.

Biggest frustration: Artifacts are generated using React components, so there’s no way for Claude to provide functionality that lets you turn the palette into a downloadable image file.

After trying several alternatives, Claude and I settled on the screenshot approach.

App #2: Data Format Converter

The idea behind this one is for Claude to convert data inputs between the following four formats:

• CSV

• JSON

• YAML

• XML

You can specify output details (e.g. delimiters for CSV or indentation size for JSON and XML) and copy the resulting data to your clipboard for further work.

Biggest frustration: Man, this app took by far the most effort and back-and-forth iterations. Claude started with a simple CSV / JSON converter, but Daniel just had to go and ask for two additional formats. This introduced all sorts of formatting and validation issues.

Also, Claude would often update a component but forget to render the rest of the code. I ended up starting four separate chats to make this one work, and it still has issues that I’ll try to iron out when I get more free Claude messages.

App #3: Time Zone Visualizer

Does what it says on the tin.

You select up to eight time zones, name your locations, pick your preferred time format (12 vs. 24), toggle “Daylight Savings Time” on/off, and Bob’s your uncle³.

Biggest frustration: None. It did take several iterations to implement the additional features, but I didn’t run into any major issues. Claude easily incorporated all of my feedback.

App #4: Data Visualizer

This one lets you paste or manually enter data points and display them as one of the following charts⁴:

• Bar

• Line

• Pie

• Area

• Radar

Biggest frustration: Things mostly went smoothly, but for some reason, Claude just couldn’t make a “Chart Screenshot” element (as in App #1) without messing up the visuals, so I had to cut that feature.

App #5: Decision Tree Builder

This lets you set up decision trees and turn them into Mermaid code.

You can then copy-paste the code into a third-party editor like mermaid.live to generate the corresponding decision chart:

Biggest frustration: I really wanted to add a section that displays the Mermaid chart directly inside the Artifact. Sadly, attempting to add this consistently generated an error that Claude couldn’t solve after over a dozen attempts.

❌Limitations & solutions

Here are some frustrations I’ve encountered.

To be fair, two of these only exist because of my self-imposed “free” requirement for this test. Paying Claude users would have much higher message and context limits.

But if you’re determined to squeeze the most value out of a free plan, let me share a few ways to do that.

1. Message limits

Free accounts face pretty strict usage limits: 7-8 messages every 5 hours.

So get used to seeing a notice like this:

If you insist on messaging Claude before the limit resets, you’ll get this:

Okay, okay, I get it. I’m a cheap skate, Claude. God.

This is obviously not ideal if you need to make lots of changes to your app or project.

Solution: Pack as much information into your requests as you can. The limit doesn’t apply to the amount of words in your message but to the number of exchanges.

So if you want Claude to fix several issues and add several new features, list them all in a single message and hope it’ll be able to do so in one go:

2. Context window limits

This one’s a lot more frustrating, especially when working with code.

Free users face harsher limits on how many tokens can be in a single chat.

Once Claude starts coding, the code itself will quickly eat into this context window, and you’ll soon see something like this:

This often means having to split work on a single app into multiple chats, which defeats one of the big advantages of using Claude and Artifacts.

Solution: Use the “Download to file” icon at the bottom-right of the Artifact window to grab the latest code⁵.

Start a new chat, upload the file with your code, and type in your request:

Claude will pick up where you left off and continue working on your Artifact.

3. Limited code options

While Claude itself can work with multiple coding languages, Artifacts are limited to just user-facing React components.

This means you can’t run complex applications directly inside of Claude, and many features aren’t possible to implement within an Artifact.

For instance, the Color Palette Maker would’ve been more useful if you could download the palette as an image file with a single click, but that wasn’t an option.

Solution: For more advanced applications, you can still use Claude to generate the required code. Then you’d have to host and run it in a third-party tool. Here are 18 free options.

4. Errors

Claude still makes mistakes.

Sometimes, just asking for simple additions can break an Artifact that previously worked.

Solution: There are two ways to try and work around this.

One, describe the error or paste any error message you’re seeing into the chat:

Claude will attempt to solve this, using the chat, the code, and the error text for context.

Two, if everything fails, you can revert to a past working version of the Artifact. Claude lets you scroll through the versions at the bottom-left of the Artifact window:

I had to do exactly this for some of the WIP apps to get this post out on time.

🧠 Final thoughts

Working on apps with Claude is a much smoother experience than my early attempts with Bing.

Being able to run, test, and tweak the app in a single interface is huge.

First, you get to skip copy-pasting the code between Claude and another site.

Second, you don’t have to explain as much when you request a change. Claude always has the latest context, because it can see the current code and your feedback in the same place.

Finally, you don’t need a third-party tool to host your finished app for others to use. You can just share the Artifact link directly.

Back when I first made a super-basic “game” with ChatGPT and Bing, I had this analogy for how it felt to work with them:

Think of ChatGPT as a loyal but somewhat dumb dog: It’ll keep trying to make you happy forever despite not always knowing how.

Bing AI, on the other hand, is a fickle cat: It knows exactly what you need but whether it chooses to comply depends entirely on its mood.

Claude is a cat-dog.⁶

It’ll keep hammering at a problem as long as you need it to while also being significantly more competent than the original ChatGPT.

Despite this, I was surprised by how many issues I still ran into with some of the apps.

Claude would routinely overwrite prior progress when making additions or tweaks. It would claim to have fixed an issue despite it still showing up. And so on.

Claude is definitely not a replacement for actually knowing what the hell you’re doing.

But for a casual user looking to solve a straightforward task, Claude Artifacts are a promising glimpse into future possibilities.

🫵 Over to you…

Have you used Claude—or another AI tool like Cursor—to create apps?

If so, would you like to share your results and observations?

Leave a comment or shoot me an email at whytryai@substack.com.

1. As I write this, the Data Format Converter and the Decision Tree Builder aren’t 100% finished. I will update them once I get my free Claude credits. Feel free to return to this post later to see their final versions (I’ll replace the CTA buttons with the right links.)

EDIT 04-10-2024: The Decision Tree Builder is now the final version.

2. Unless you find colorful rectangles and charts offensive.

3. Disclaimer: Your uncle’s name might not be Bob.

4. If you want to know more about these charts, I once wrote about 12 of them.

5. You can also use the “Copy contents” button next to it because Claude treats long strings of text pasted into a new chat as separate files. But if your Artifact code is short and you want to make sure it’s contained in its own file, “Download to file” is the more reliable option.

6. A cog? A dat?