Build a file conversion app in 15 minutes

In this tutorial, you'll learn how to harness the power of Replit's AI tools—Agent and Assistant—to create a fully functional markdown conversion app in just 15 minutes and 5 prompts.

We'll show you how having a conversation 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

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

Want to skip ahead? Check out the finished template or try the live demo.

We also have a video tutorial if you're a visual learner:

Getting Started with Agent

One of the trickiest parts of working with AI is helping it understand new or unfamiliar libraries. We'll be using MarkItDown, a Microsoft library that converts various file formats to markdown.

Since it's new, we need to give Agent proper context about what it does and how it works.

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

Now, let's check out the library's documentation.

Head over to the MarkItDown repo and copy the description that explains its capabilities. This helps Agent understand what we're working with—it can handle everything from PDFs and PowerPoint files to Excel sheets and even audio transcription.

MarkItDown is a utility for converting various files to Markdown (e.g., for indexing, text analysis, etc). It supports:

PDF
PowerPoint
Word
Excel
Images (EXIF metadata and OCR)
Audio (EXIF metadata and speech transcription)
HTML
Text-based formats (CSV, JSON, XML)
ZIP files (iterates over contents)

You can paste the description into the prompt and alter it to give Agent some idea of what we're after. Next, craft a clear prompt that explains exactly what you want to build. Here's what I used:

I'd like to build a simple app that converts office files to markdown. 
It should have a drag and drop interface and be both desktop and mobile friendly.

To give Agent even more context, include the library's URL and paste relevant documentation content. This extra information helps Agent understand the library's capabilities and implementation details.

When you paste the URL, you can hover over the link and click "copy content" to have Agent pull the page content into the prompt.

Now we can get started—click "Start Building" and Agent will get to work.

Building the Foundation

The first thing Agent does is create a plan. This plan outlines the steps needed to build the app, including the files and code it needs to write.

Once you have a plan, you can add more features or approve it. Let's start with only the basic functionality.

When you approve the plan, Agent will start building the app. You should see code starting to appear in the file browser. Agent is configuring your development environment and writing code.

Iterative Development

Once the code is written, you can see the app in action. You can also see the code that Agent wrote in the file browser.

Starting with Agent

Agent is perfect for handling the big, structural changes in your app. When we encounter issues or need major features added, we can communicate with Agent in plain English.

For example, when we hit a JSON parse error during file uploads, I simply copy and paste the error message into the chat. Agent quickly suggested the fix.

Don't get too worried about errors—it's totally normal when building with AI. A good first step is to copy and paste the error message into the chat. If you can't get the error fixed with a simple copy / paste, be more descriptive about what's going on and what you think is wrong.

Now we have our MVP! We can get started on adding additional functionality.

As we build out the app, we use Agent to add support for multiple file uploads and improve the overall responsiveness. The key is being specific about what you'd like to add. Here I add that functionality with some simple natural language prompts. My exact prompt:

1. Support multiple files
2. I want to be able to copy the output in addition to downloading

And

Make the app more responsive and mobile friendly, the copy and download buttons are cut off on narrow screens

Refining with Assistant

Once we have the core functionality working, we switch to Assistant for the finishing touches. Assistant is great for detailed improvements and UI refinements. Instead of making broad changes, we can be very specific about what we want to modify and where. To find Assistant, click the "Assistant" tab in the sidebar or click the "search" icon in the top right and type "Assistant".

We might ask Assistant to improve the layout by moving elements around, adding descriptions, or creating a footer. When working with Assistant, it's helpful to reference specific files and break down your requests into smaller, manageable changes. You can mention files with the @ symbol.

My exact prompt

1. Remove "Powered by MarkItDown Library" and add a description to the top of the app about what it is and how it works, reference @agent_assets/github_com_microsoft_markitdown.md for context
2. Add a footer to the app that says "Made by matt with ❤️ | powered by Replit" link matt to x.com/mattppal and replit to replit.com

The real power comes from learning to speak the language of web development. Using terms like "responsive," "mobile-friendly," and "grid interface" helps both Agent and Assistant understand exactly what you're trying to achieve. The prompts I used:

Format the description to be more visually appealing. use text boxes and shading

And

Make it easier to see all the files you convert for multi-file uploads. Use a grid interface that expands to show the file content, so users can quickly copy / download one item or jump between multiple items.

Add a "download all" button as well

After that I had a fully functional app. 1 main prompt and 5 follow ups—15 minutes, no code!

Taking it Live

Once you're happy with your app, deployment is straightforward. Click the "Publish" button in the top right, or search for "Deployments" in the search bar.

This app is an auto-scale deployment, which means it will automatically scale up to handle more traffic. You can learn more about deployments here.

You can configure:

• Basic resources (1 CPU, 1GB RAM per instance)
• Maximum number of machines (start with 6 for moderate traffic)
• Environment variables and run commands

Pro tip: if you're expecting high traffic, you can adjust the maximum number of machines. This app handled 6,000 users by increasing the machine limit during a traffic spike!

After you've configured the deployment, you can name your app and click "Deploy".

Deployment for autoscale apps typically takes 1-5 minutes. When complete, you'll see your URL on the screen.

The Power of Agent + Assistant

Instead of writing code line by line, we're having a conversation with AI tools about what we want to create. The entire process—from initial concept to deployed application—takes about 15 minutes and 5 prompts.

The key to success is clear communication and understanding when to use each tool:

• Use Agent for big, structural changes and core functionality
• Switch to Assistant for polish and detailed improvements
• Always be specific about what you want to change
• Provide context when working with new libraries

Remember, building with AI is more about communication skills than coding skills. It's about learning to describe what you want clearly and understanding the terminology of web development.

Want to see this in action? Check out the full video tutorial above.

You can also fork the template here or find a deployed version here.