Programming with LLM (using MCPs)

Regular Developer

Supporter
Joined
Jun 2, 2012
Messages
10,219
Reputation
2,917
Daps
29,278
Reppin
NJ
I'm working on a personal project that I have no intentions on making available for others to use. But I'm using LLM MCPs after finding how easy it was to edit low quality code provided by another developer for front end. So I was going to just reply to this thread with instructions and maybe screenshots. The goal would just to have a resource for any programmers that want to build something but haven't spent 15 years constantly building software projects.

So far, this method hasn't introduced any bugs and has been waaaaay faster than any project I've ever worked on. Only issue is that it will only functionally get your front end (web or mobile) working, at least so far, and not make nice fancy impressive UIs (or i may be a rookie, lol). I think I'll be able to replace the front end easily with the structure of the functionality.

small background:
I'm pretty bad at getting tasks and chores done and keeping track of things. I generally day dreamed about having an app that would help. The whole thought was to just gamify my todo list. So I'm basically creating a mobile app that will grant me XP when I do tasks I decide for the day, and deduct points or health (still deciding) when I do things like leave the dishes in the sink or dont fold the clothes after drying them.
 
Last edited:

Regular Developer

Supporter
Joined
Jun 2, 2012
Messages
10,219
Reputation
2,917
Daps
29,278
Reppin
NJ
So the first thing I did using ChatGPT, but I think you can use any of the popular LLMs, is create a project. And within that project I have a main chat. This is where I ask all my general questions and get help kind of back and forthing my ideas, and determine what's the scope of an MVP. I also kind of asked it about MCPs. But once here, I started asking what type of assistants I would need. We decided to go with Architect, UI/UX, Front end Dev, and Tester. I think I may also add a documentation assistant, but those 4 for now. You need to ask chatgpt to create the MCPs for each of these, based on your project, then copy and paste or share as a document to new chat windows.

My last project used React Native, so i decided to go with that. Its a javascript library, but the Architect decided we should do typescript since it does static typing (as a backend dev, HOORAY!, lol). So one of the first things I asked the architect to do is to come up with coding standards, naming conventions, and folder structure. I then created a git repo and asked it to create it as downloadable md (markdown) files that I would be able to share with the Front End Dev MCP. The reason I did this is because I outsourced to a "full stack developer" on upwork for my last project and it was a mess. Its akin to getting a spades partner and finding out after that they only know the rules, they dont really know how to play spades. So now, with this, I'll be able to follow along and where things go makes so much sense.

So then, I shared these documents with the front end dev. and that's how we got started. Its save so much time, though I do enjoy the long hours in the dark trying to figure out how to get something to work, I much prefer that things are already working from the jump and having a working prototype is much more encouraging. But I'll post next my interaction with the UI/UX assistant and more in depth with the Front End Dev assistant.

(For this project, I'm using vscode, windows terminal with oh-my-posh, wsl/ubuntu 24, and expo (with react navigation))
 

Ty Daniels

Superstar
Joined
Dec 13, 2019
Messages
2,218
Reputation
3,926
Daps
15,589
So the first thing I did using ChatGPT, but I think you can use any of the popular LLMs, is create a project. And within that project I have a main chat. This is where I ask all my general questions and get help kind of back and forthing my ideas, and determine what's the scope of an MVP. I also kind of asked it about MCPs. But once here, I started asking what type of assistants I would need. We decided to go with Architect, UI/UX, Front end Dev, and Tester. I think I may also add a documentation assistant, but those 4 for now. You need to ask chatgpt to create the MCPs for each of these, based on your project, then copy and paste or share as a document to new chat windows.

My last project used React Native, so i decided to go with that. Its a javascript library, but the Architect decided we should do typescript since it does static typing (as a backend dev, HOORAY!, lol). So one of the first things I asked the architect to do is to come up with coding standards, naming conventions, and folder structure. I then created a git repo and asked it to create it as downloadable md (markdown) files that I would be able to share with the Front End Dev MCP. The reason I did this is because I outsourced to a "full stack developer" on upwork for my last project and it was a mess. Its akin to getting a spades partner and finding out after that they only know the rules, they dont really know how to play spades. So now, with this, I'll be able to follow along and where things go makes so much sense.

So then, I shared these documents with the front end dev. and that's how we got started. Its save so much time, though I do enjoy the long hours in the dark trying to figure out how to get something to work, I much prefer that things are already working from the jump and having a working prototype is much more encouraging. But I'll post next my interaction with the UI/UX assistant and more in depth with the Front End Dev assistant.

(For this project, I'm using vscode, windows terminal with oh-my-posh, wsl/ubuntu 24, and expo (with react navigation))


You mentioned not having a "Fancy UI", have you considered using a UI Library, especially if you are using React/React-Native?

There are many that have many UI components already built, and it would save even more time, if you are building components/component elements from scratch (that is if you are building the base components from scratch).

https://blog.logrocket.com/best-react-native-ui-component-libraries/

Also if you are familiar with UI tools like (Figma or Sketch, or Adobe XD), there are plugins that turn designs into coded components, that can help speed up the process:

https://www.figma.com/community/plugin/821138713091291738/figma-react-native
 

Regular Developer

Supporter
Joined
Jun 2, 2012
Messages
10,219
Reputation
2,917
Daps
29,278
Reppin
NJ
O, i forgot to put this in. I just wanted to explain the roles, because these kind of match up to what you might have a team of for bigger projects

- Architect: Ask overall questions. Like in a real project, they'll help determine things like coding language, git tech to use, documentation system to use, standards. So that's what the assistant pretty much does. I asked it about free APIs where I can get daily weather data (though i could have probably asked the front end dev as well) and it gave me the most popular ones and some of the pros and cons

- UI/UX: SO what I was hoping to get was a actual graphic designer, but I think what I realized is the best this can do is take the functional requirements and tell you what the app flow would be and the actual functionality of each screen. Then it would break each screen into its base components. You can then ask it for to generate an md document for each screen and hand these off to the Front End Developer

- Front End Developer: For this project, everything is self contained in the app for now. So taking the standards from the architect, I feed it each "blueprint" from the UI/UX, and it will be able to build out the screen. Things won't be perfect, but with Expo, I can do rapid prototyping and then ask it to make adjustments. For isntance, on android, the contents were sowing up under the buttons on the bottom. It was able to adjust it so that there's a safe screen area.

- Tester: Haven't used it yet, but basically I learned about automated testing later in my career and it makes things sooooo much easier. Its role is to come up with test cases and then maybe help with coding them. So instead of having to manually test everything, you can just have the test software run through all the test cases and let you know if anything broke/isn't working as expected.
 

Regular Developer

Supporter
Joined
Jun 2, 2012
Messages
10,219
Reputation
2,917
Daps
29,278
Reppin
NJ
You mentioned not having a "Fancy UI", have you considered using a UI Library, especially if you are using React/React-Native?

There are many that have many UI components already built, and it would save even more time, if you are building components/component elements from scratch (that is if you are building the base components from scratch).

https://blog.logrocket.com/best-react-native-ui-component-libraries/

Also if you are familiar with UI tools like (Figma or Sketch, or Adobe XD), there are plugins that turn designs into coded components, that can help speed up the process:

https://www.figma.com/community/plugin/821138713091291738/figma-react-native
I was looking for some design that would more gamily the UI, but I couldn't figure out how to find it on those links. I did only spend like 1 minute looking through the first screens, but everything made the ui feel like another social media app, which isn't what I wanted. But I think this would absolutely help.
 

Regular Developer

Supporter
Joined
Jun 2, 2012
Messages
10,219
Reputation
2,917
Daps
29,278
Reppin
NJ
Not much of an update today, just truckin along. But 1 suggestion I say is, don't be so passive when putting this together. Ask questions of the llm and help it teach you why its making certain decisions or what would happen if you did a or b. Don't just let this be about the end result, enjoy the journey here. This is a collaborative thing
 

null

...
Joined
Nov 12, 2014
Messages
33,974
Reputation
6,665
Daps
52,415
Reppin
UK, DE, GY, DMV

Regular Developer

Supporter
Joined
Jun 2, 2012
Messages
10,219
Reputation
2,917
Daps
29,278
Reppin
NJ
I officially got into vibe coding, using Cursor (AI Wrapper for VSCode). I think I may be done writing long blocks of code after this current job. I know there's some learnings that might be missed out, but I think this will allow me learn more about business logic. I don't think I'll ever hire a cheap freelance developer again
 

Regular Developer

Supporter
Joined
Jun 2, 2012
Messages
10,219
Reputation
2,917
Daps
29,278
Reppin
NJ
So, instead of having to spend hours, days, and weeks trying to figure out how to implement something, I can spend more time talking to the end user/customers or for independent projects, I can spend time studying techniques or whatever logic is involved in that system, and just prompt cursor to create an app that handles it, add features, and then I can quickly test the changes.

This really taps into the Lean Startup model, where rapid prototyping is like the most important thing. A new feature can quickly be added and get put in front of users to quickly assess if its good, bad, or needs tweaks.
 

Regular Developer

Supporter
Joined
Jun 2, 2012
Messages
10,219
Reputation
2,917
Daps
29,278
Reppin
NJ
I decided to split out the language learning portion of the app into its own app, with more games. This is so much fun, lol. I once again started off by working with AI to design a project document, then using that, had the AI create coding standards and naming conventions, and even asked it to create multiple agents, all in one Md in the directory for it to refer to. Smooth sailing here. so far
 
Top