Using AI to Build AIRTIFACT.COM (Part II)

This is the 2nd blog post in a series where I document how I am using AI tools to build AIRTIFACT.COM from scratch. Link to the 1st blog post where I described how to get started on a new project by using an AI chatbot (Claude, ChatGPT, etc).

In this post, I describe how I used Claude to add an image generation feature.

Initial Feature Discussion

Feature Proposal

After chatting with Claude, and asking for guidance on how to structure the previous blog post. I prompted Claude to go back to Building! Then I asked how to dynamically generate images and poems using LLMs.

Prompt 1: 
Let's go back to building. i want to dynamically generate images and poems using llm apis. can you help?

Requirements Analysis

API Selection

Claude responded by presenting options for:

1. Image Generation APIs
2. Text Generation APIs
3. Cost considerations

My Response

I responded by focusing on cost, as this is a hobby project.

Prompt 2:
Let's use free options for now. or cheap ones.

Technical Implementation

API Integration Choice

Claude suggested starting with:

1. Stability AI for images (1000 free images/month)
2. GPT-3.5-turbo for poems (cost-effective option)

My Response

Prompt 3:
Let's go with Stable Diffusion. Do i need an account and an api key?

Implementation Process

Initial Setup

Claude responded that I need an account and an API key for Stability AI, and described how to set it up:

Yes, you'll need an account and API key for Stability AI. Here's how to get set up:

1. Create an account at https://platform.stability.ai/
2. After signing up, go to https://platform.stability.ai/account/keys to get your API key
3. You'll get 1000 free image generations per month

Let me know once you have your API key.

After creating a free account account on Stability AI, and generating an API key, I responded to Claude.

Prompt 4:
I have a key for stability.ai

After this prompt, Claude responded by instructing me to install the axios package the by running npm install @stability/api axios, and also gave me the full code for the API route at pages/api/generate-image.js, the admin page at pages/admin/generate.js, and the corresponding CSS module at styles/Admin.module.css.

Additionally, Claude also included step-by-step instruction on how to test this feature:

To test this:

1. Make sure your .env.local file has your API key
2. Create the public/images directory if it doesn't exist:
mkdir -p public/images

3. Run your development server:
npm run dev

Visit http://localhost:3000/admin/generate

Error Resolution

After following these above instructions, I hit the following error message, I asked Claude about it.

Prompt 5:
Getting this error: Error: Incorrect API key provided: ${proce*********************KEY}.
You can find your API key at https://stability.ai.

Claude responded by explaining that this error is due to Next.js not properly reading the environment variable for the stability.ai API key. To resolve it, Claude instructed me to create an .env.local file, and add my API key as one-liner STABILITY_API_KEY=sk-your-actual-key-here

After creating the file, and adding the key I kept getting ‘API key’ related errors due to the faulty logic. Claude suggested I add some logging, and I did. And after a couple iterations of testing, I realized that the API key env variable was not being interpolated correctly. I fixed the error by fixing the code in pages/api/generate-image.js.

Image Display Fix

After fixing the API key error, I got the generate button to work, and I could a 200 API response in the logs. However the image wasn’t being displayed correctly. I submitted the following prompt.

Prompt 6:
It is now working but the image is not getting displayed correctly. I think the issue is with the name

Claude suggested changes to all the 3 files (API route, generate page, and CSS module), but the error persisted. After a couple iterations, I gave up on Claude and looked into the actual code. I realized two issues:

1. faulty naming of files: Claude was using the timestamp in its naming format, and that was breaking file lookup. To resolve I suggested to Claude to use a simple name that adds dashes to the the entered prompt.
2. escaping special characters is broken: with the above fix in place, I could see that the images files were being saved correctly but the lookup was still broken. I looked into the code and noticed that Claude escape special characters in its output (I assume this to enable preview markdown and code blocks in its output). However, when copied verbatim, this breaks the lookup of env variables. As an example, this is how Claude was outputting the filename declaration: const filename = `generated-\${timestamp}.png` , I fixed this by removing the '\'symbol.

Results

At the end of this session, I had a working page where users can dynamically generate images by entering text prompts.

Users can navigate to /admin/generate, add a prompt; Stability.AI’s API will be called to generate an image. The resulting image will be displayed as shown below.