Bringing web app development to the masses replit.ai allows anyone to build a well functioning web application. All you have to do is describe it.... (well mostly).
A quick back story to set the context. My son got me a recipe book for Christmas a few years ago.. skip ahead if you happen to have read some of my prior blogs and have heard this story already. It's a real nice cook book but I would have to sit down and transcribe all my recipes on to paper. There something about recipes you just need them on paper. Thus began my journey to build a mobile app that uses ai to scan my recipes and let me saving them and print them from a template that looks good in my new cookbook. There that wasn't too long for the back story.
A group of us were have lunch the other day and a friend mentioned replit.ai that is a place that you can build web apps without having to write or know how to code. You just tell the AI what you want. So I decided to put it to the test and see how much effort and how easy it would be to create a similar web app as to my mobile app.
My Experience with replit.ai
After signing up at replit.ai with a subscription price of $192 / year that gets me $25 credit per month. I started my journey.
It all started with one prompt to the replit.ai and 136 prompts later we have a decent running application.
"Using python and postgresQL and dejango create an app that lets you add, edit, and store recipes. The following json is a list of default recipes that should be populated in the database when the server starts if there are no existing recipes. You will need to add a userid so that all the tables are keyed by userid. Look at the json and denormalize it for the tables needed in the database to support the data requirements. The app should initially present the user with a list of recipes that has a picture of the food item that comes from the imageBASE64 field, and when editing the recipe you can click a button to see the recipeImageBASE64 which will be a picture of the recipe card or pdf or picture of where the recipe came from. The app should start with a text box that lets you enter in the userid. For now insert the recipes with the userid 'brady@acm.org'."
AI PROMPTS TO REPLIT
After the first prompt replit.ai and I went back and forth chatting with each other. I ended up giving replit.ai 135 prompts. Of which 39 were requirements or clarification of requirements and 90 were reporting back to replit.ai that it got something wrong.
One of the interesting things I noticed is that I started talking to replit like it was a person and getting frustrated and joyful as our conversation took place.
I would praise replit when it got something right and share disappointment when it got things wrong, for the 5th time in a row.
Ultimately the core requirements shaked out to be:
- Display a list of recipes for the logged in user
- Display the recipe details, like a typical recipe card.
- Allow the user to edit the recipe
- Allow the user to add or replace a picture for the recipe item
- Allow the user to view the orginal scanned in recipe image
- Allow the user to add a recipe by using AI to scan an image or pdf of the recipe.
- Allow the user to utilize either OpenAI with their own API key or Microsoft OpenAI. (The concept being allowing the user to eventual utilzie whatever AI they perfer and have an account with.
The majority of the prompts I believe most anyone could provide. There were a couple of instances where I think one would need a developer background. Integrating with OpenAI and Microsoft's SDK for Azure OpenAI required me to actually provide code to replit before it could recognize and utilize the standard SDK for making calls to the AI Engine.
The 2nd area was related to event processing between pages. When the user would navigate to add a recipe they could provide an image of the recipe and then I wanted the AI scanning process to take place in the background and return the user to the list of recipes. Since the scanning process could take a minute or two I didn't want the user stuck waiting for the scan to complete. The initial implementation by replit.ai was to go back to the home page and then refresh the home page every 5 secs in order to show the new recipe when it was done. I am not a proficient python developer but I am certainly aware of event based process. So at this point I was able to prompt replit to use an event based system to communicate from the background process back to the home page when the scanning process was complete.
The 3rd area would be the database table designs it got most of the table layouts in normalized efficent manner but there were a couple of places that I need to suggest that it restructure the tables.
Those three concepts your everyday person may not be aware of and be able to provide the right direction to the AI engine in order to get a smooth running application.
I would also like to point that replit and I went back and forth for what seemed like forever with the event based processing. It would say it works now, I would test and it would not, we went on like this for maybe 10 to 15 iterations... maybe more. I could see some people getting frustrated and abandoning the process.
My prompts are in the blue box, and after I prompt replit it tells me what it's doing, so I can following along with how it's thinking. Summerizing the prompt, telling what python files it is creating or update, etc.. I can see what it does some testing on it's one as it works through the requirements. It's pretty interesting to watch and see how it's going about accomplishing the task at hand. In total replit provided me with 6,855 lines of communication.
In the following excerpt you can see where replit summerized what it just did, asked me to test and verify it's work. And then suggested new features for the application.
| Example Messages from Replit |
|---|
| I've improved the recipe detail view and added navigation functionality: |
| Added a back button on recipe detail page Created recipe_source_image.html template with back navigation Improved recipe_detail view to efficiently load all related data Fixed display of ingredients and instructions |
| Added a back button on recipe detail page |
| Created recipe_source_image.html template with back navigation |
| Improved recipe_detail view to efficiently load all related data |
| Fixed display of ingredients and instructions |
| Can you check if the following works correctly now: |
| Can you check if the following works correctly now: View a recipe detail page and confirm ingredients and instructions are shown Navigate back to the recipe list using the back button View a recipe source image and navigate back to the recipe detail |
| What else would you like me to improve in the recipe application? |
| Ingredient substitution suggestions for dietary restrictions |
| Community recipe sharing feature with social media integration |
| Show 7 more |
Overall it took about 7 days eslapsed time working on and off again to get to this point. There are still some things to work out and complete before I would consider production ready but it's close.
The usage and billing information provided is very handy. You can clearly see where your cost are.
Replit indicates that they integrate with payment systems like stripe and others. So if your looking to monitize your app or sell products through site the capability exist.
Here is a sampling of prompts I provided
| Product | Role | Prompt |
|---|---|---|
| Requirement | User | Pasted--id-1-name-Bean-And-Beef-Dinner-description-servings--1744749452909.txt |
| Requirement | User | Using python and postgresQL and dejango create an app that lets you add edit and store recipes. The following json is a list of default recipes that should be populated in the database when the server starts if there are no existing recipes. You will need to add a userid so that all the tables are keyed by userid. Look at the json and denormalize it for the tables needed in the database to support the data requirements. The app should initially present the user with a list of recipes that has a picture of the food item that comes from the imageBASE64 field and when editing the recipe you can click a button to see the recipeImageBASE64 which will be a picture of the recipe card or pdf or picture of where the recipe came from. The app should start with a text box that lets you enter in the userid. For now insert the recipes with the userid 'brady@acm.org'. |
| Report Errors | User | check for errors in log and resolve |
| Requirement Clarification | User | only one recipe has been added to the database for the user brady@acm.org when I new user logs on and there are no recipes all the recipes in the json provided should be added so that there is a list of recipes available. please update the databsae with all the recipes in the json file |
| Report Errors | User | not a sample of each recipe each recipe |
| Report Errors/Requirement | User | the view recipe page is not showing instructions or ingredients it should also have a back button or link to take you back to the list or filtered list |
| Report Errors | User | Pasted--id-1-name-Bean-And-Beef-Dinner-description-servings--1744773689374.txt |
| User | the date in the tables was not loaded properly. here is the json for the recipes again. Each recipe has instructions and ingredients. The data in the tables for most recipes does not have rows for instructions or ingredients. you can purge all the recipe data from the recipes tables and start over. And use the json pasted in here to create the recipes with all the information | |
| Comment | User | it seems to be working once deployed |
| Requirement | User | alright making progress on the view card let's do a couple of things to make it more readable. On the units if the number has a .0 or 0. then lets not display the .0 or 0 so for 2.0 pounds Shrimp it would be 2 pounds of shrimp and for 0.5 pounds of coconut flakes it would be .5 pounds of coconut flakes. Actually for the decimal part let's convert it into common measurements. Like for .5 it would be 1/2 and .25 would be 1/4 ; next lets put the ingredients and instructions side by side in table format like so that the ingredietns are with the instruxtions that go with that group. So maybe you would have a card for each group and inside the card on the left the ingredients and the right the instructions. It would need to flex so that it's still viewable on a mobile screen so on a smaller device the instructions might show below the ingredient list. |
| User | close there is an instructions column in the grouping card but the instructions are not listed there they are however instruction cards below the ingredients and instructions cards. So you need to add the instructions to the group cards and remove the instructions cards that are below the group cards. If on a mobile device or the screen width is not that wide then in the group card list the instructions below the indgredients | |
| Report Errors with Image | User | here see in this image how the instructions are not listed next to the ingredients it's blank. that's what needs to be fixed |
| Report Errors | User | almost but the standalone instructions are still showing up |
| Requirement Clarification | User | also for 1/2 and 1/4 can we use a font that has them looking more like math factions than typed out. |
| Requirement Clarification | User | lets do the same kind of thing on the edit screen in a group card put the ingredients next to the instructions |
| Requirement Clarification | User | just like before you have duplicate instructions below the group cards that both ingredients and instructions in them you need to remove the duplicate instructions below the groups |
| New Requirement | User | when you click the add new recipe prompt the user with two buttons one that says scan image or pdf and the other manual entry. If they click scan go to a page that prompts them to upload a file make it's an image file or pdf. save the uploaded file in the sourceimagebase64 field. |
| New Requirement | User | on the home page increase the amount of transparency on the background image so that it is a little bit more viewable. on the settings page let's enhance the settings to support multiple AI engines. Let's have a list of ai engines with a radio button to the left of each option. Each option in the list to be in a card like box. The first option would be the existing OpenAI and using the OpenAI API Key have an expander for advanced options and in the advanced options let's let the user edit the AI prompt the system prompt and user prompt system prompt being the prompt part that gives instructions and context to the AI engine. The 2nd option would be Microsoft Azure OpenAI it would need to two parameters the endpoint and spikes both should be stored as secrets with the same advanced exander bar and settings as the openai with an additional checkbox that indicates whether or not to use structured outputs and a text box for the api version. If structured outputs is selected when you make the api call use the azure sdk structured outputs call method. here is the example from the microsoft documentation on structured outputs for python from enum import Enum from typing import Union from pydantic import BaseModel import openai from openai import AzureOpenAI client = AzureOpenAI( azure_endpoint = os.getenv(AZURE_OPENAI_ENDPOINT) api_key=os.getenv(AZURE_OPENAI_API_KEY) api_version=2024-10-21 ) class GetDeliveryDate(BaseModel): order_id: str tools = [openai.pydantic_function_tool(GetDeliveryDate)] messages = [] messages.append({role: system content: You are a helpful customer support assistant. Use the supplied tools to assist the user.}) messages.append({role: user content: Hi can you tell me the delivery date for my order #12345?}) response = client.chat.completions.create( model=MODEL_DEPLOYMENT_NAME # replace with the model deployment name of your gpt-4o 2024-08-06 deployment messages=messages tools=tools ) print(response.choices[0].message.tool_calls[0].function) print(response.model_dump_json(indent=2)) |
| User | on the home page increase the amount of transparency on the background image so that it is a little bit more viewable. on the settings page let's enhance the settings to support multiple AI engines. Let's have a list of ai engines with a radio button to the left of each option. Each option in the list to be in a card like box. The first option would be the existing OpenAI and using the OpenAI API Key have an expander for advanced options and in the advanced options let's let the user edit the AI prompt the system prompt and user prompt system prompt being the prompt part that gives instructions and context to the AI engine. The 2nd option would be Microsoft Azure OpenAI it would need to two parameters the endpoint and spikes both should be stored as secrets with the same advanced exander bar and settings as the openai with an additional checkbox that indicates whether or not to use structured outputs and a text box for the api version. If structured outputs is selected when you make the api call use the azure sdk structured outputs call method. here is the example from the microsoft documentation on structured outputs for python from enum import Enum from typing import Union from pydantic import BaseModel import openai from openai import AzureOpenAI | |
| User | client = AzureOpenAI( azure_endpoint = os.getenv(AZURE_OPENAI_ENDPOINT) api_key=os.getenv(AZURE_OPENAI_API_KEY) api_version=2024-10-21 ) | |
| User | class GetDeliveryDate(BaseModel): order_id: str | |
| User | tools = [openai.pydantic_function_tool(GetDeliveryDate)] | |
| User | messages = [] messages.append({role: system content: You are a helpful customer support assistant. Use the supplied tools to assist the user.}) messages.append({role: user content: Hi can you tell me the delivery date for my order #12345?}) | |
| User | response = client.chat.completions.create( model=MODEL_DEPLOYMENT_NAME # replace with the model deployment name of your gpt-4o 2024-08-06 deployment messages=messages tools=tools ) | |
| User | print(response.choices[0].message.tool_calls[0].function) print(response.model_dump_json(indent=2)) | |
| Report Errors | User | it's not letting me login. I was previously logging in as brady@acm.org |
| Report Errors | User | nope not letting me login |
| Report Errors | User | still nothing click login after entering brady@acm.org and it returns right back to the login page in the preview tab however if i open in a new tab it seems to work. |
| Report Errors | User | it's still not working on the preview page but it does on the new tab on the settings tab we don't need the expander for either option. for microsoft openai we don't need the api version field. The add new recipe in the header does not take you to the page to select upload or manual it goes straight to manual entry. Once the microsoft openai endpoint is set don't show the hint in the text box show the eye icon in the text box that shows the currently set endpoint. |
| Report Errors | User | when uploading a recipe it's checking openAI and not the option that has the radio button set. in this case I have settings for microsoft openai but it won't work because it's checking for openai. |
| Report Errors | User | Error calling AI API: Missing required arguments; Expected either ('messages' and 'model') or ('messages' 'model' and 'stream') arguments to be given. getting this error when recipe is being processed by ai. let's add a text box on the recipe scanning page and show the system prompt user prompt and structure output value for debugging purposes. |
| Report Errors | User | Error calling AI API: Missing required arguments; Expected either ('messages' and 'model') or ('messages' 'model' and 'stream') arguments to be given. getting this error when microsoft ai is used. Let's add two text boxes to the settings page for the microsoft ai. System prompt and user prompt for the system prompt something like ' you are a helpful assistant that reads recipes and translate's them into a json format' user prompt ' read the recipe in this image making sure to group ingredients and instructions together look for nutrition information and all the other data points in the json schema. '. then we can update the prompts without having to update the code. do the same thing for openai. |
In Summary
replit.ai proved to be a very capable AI web app builder. As the large language models continue to get better and the models are updated in replit.ai this is the kind of development environments we are going to see companies and individuals moving too. It may still take some programmer knowledge to deliver a seemless app but it's certainly a technology worth working with and is an indication of the future to come for software developers.
Add comment
Comments