Programming with LLM (using MCPs)

[Regular Developer]

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.

 

[Regular Developer]

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]

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]

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]

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]

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