Build a Cat Generator App in 5 Minutes

In this tutorial, you'll learn how to harness the power of Replit's AI tools—Agent and Assistant—to create a fun cat image generator app in just 5 minutes, even if you've never written code before.

We'll show you how having a conversation with AI can replace writing code line by line. You'll discover how to effectively communicate your vision, leverage each tool's strengths, and bring your ideas to life with minimal coding.

By the end of this tutorial, you'll understand:

• How to use Agent and Assistant for different aspects of development
• The art of clear communication with AI tools
• Best practices for providing context and specifications
• How to deploy your app to the internet

Before we begin, you'll need an account and Core subscription for Agent access.

Getting Started with Agent

The first step is to head to Replit and log in. You'll be presented with a prompt editor to instruct Agent.

Let's start with a simple prompt:

Let's build a cat generator that displays a random image of a cat from the internet every time I press a button.

If you're new to prompting, you can click the "Improve Prompt" button to add more details. Agent also provides helpful features like:

• Ideas for your application
• Ability to attach files
• Website content copying
• Screenshot attachments

Building the Foundation

Agent will propose a plan outlining the steps needed to build your app. In our case, it suggests creating a playful cat image generator using Flask and JavaScript. Don't worry if these technical terms are unfamiliar—think of them as building blocks that Agent will handle for you.

When you approve the plan, Agent will:

1. Configure your development environment
2. Create necessary files
3. Write the initial code
4. Set up a working application

Remember, building with AI is like reverse engineering—you start with something that works, then learn how it operates by making changes and improvements.

Iterative Development

Once the basic app is working, we can start making improvements. This is where we learn the strengths of each AI tool:

Starting with Agent

Agent is perfect for handling big, structural changes. For example, we can ask it to improve the UI:

Can you change the UI to be more beautiful and playful? Use cat emojis to improve the appearance of the app.

The result is a more engaging and visually appealing cat generator.

Refining with Assistant

For more targeted changes, switch to Assistant by opening a new tab. Assistant is great for:

• Making specific file edits
• Adding new features
• Understanding your codebase

For example, we added dark mode with this prompt:

Can we add a dark mode to the app with a toggle button to switch between dark and light mode?

Assistant will show you exactly what files it's modifying and what changes it's making, allowing you to:

1. Preview the changes
2. Understand the modifications
3. Apply them when you're ready

You can also ask Assistant to explain how your app works:

Help me understand the framework this app is built on.

Taking it Live

Deployment is straightforward with Replit. Click the "Deploy" (or "Publish") button and follow these steps:

1. Choose the recommended deployment option
2. Name your app (we used "whisker-wonder")
3. Click deploy

The deployment process typically takes 2-3 minutes. Once complete, your app will be live at your-app-name.replit.app. You can even add a custom domain later!

Tips for Success

When building with AI, remember:

• Start simple and iterate
• Don't worry too much about technical details initially
• Provide context in your prompts
• Use Agent for broad changes
• Switch to Assistant for specific improvements
• If something runs locally, it will deploy

Want to learn more? Check out our other tutorials and documentation for advanced features like:

• Adding databases
• Integrating cloud services
• Using custom domains
• Advanced deployment options