How I Use AI and LLMs for Coding - A Comprehensive and Opinionated Guide

What are the key aspects here?

• LLM: the LLM you use is important. There must be a reason for you at least on why you should choose an LLM that is good at generating code over other LLMs.
• Context Engineering: the knowledge you have over the data you provide to the LLM is important, and the quality of the data is crucial for the problem to be solved. The more ownership you have over the data, the better the results you will get.
• MCP and Tool-Calling: in direct relation with the LLM, you should choose an LLM that supports MCP and is good at tool-calling.
• Human in the Loop: this is your role, to validate and review the code generated by AI. It’s crucial you are aware of the limitations of AI and also that you have the ability to correct its mistakes.
• Development Process: this is the how you approach your coding process with AI. It’s important to have a clear understanding of the problem you are trying to solve, and to break it down into smaller, manageable tasks. You must have a plan for how you will use AI to assist you.

Tools

We’ll be using our IDE, an LLM app, and I suggest to get another space where you can tinker with text. This last space would be a text editor, a page in Notion (I use this), or even an empty file on a new tab in the IDE. And finally your tasks platform, such as Trello, Asana, Jira, ClickUp, SuperThread, Monday.com, etc. Postit notes also count.

Tasks can be small—like ‘fix this button positioning when switching screen size’—or significantly larger, such as: ‘Add this new service provider to the system, integrate it with existing modules using this new architecture, implement comprehensive tests for frontend and backend, and write documentation for both the new feature and finally add an abstraction layer that will support future service providers.

Workflow

Step one, identify the problem and break it down into smaller tasks.

Let’s build our scenario. We are working on a small task like ‘fix this button positioning when switching screen size’.

What’s the first thing we need to do? We need to identify the involved files where this behaviour is occuring. Then, we need to define the current behaviour and the expected behaviour. Finally we need to make the AI complete this task.

The following is a common approach I’ve seen for coding with AI.

User message:

On the edit campaign page, the button gets off screen when the screen size is small. Make it responsive.

This is not 100% wrong - but the fact you are not pointing the LLM to the places it needs to look for the problem and not providing it with the necessary task description gives it a harder time understanding the context and allows it to make wrong assumptions through having more hallucinations.

What I do:

• Identify the involved files where this incorrect behaviour is occuring. (crucial step)
• Define the current behaviour and the expected behaviour. (crucial)
• Parse or format the prompt I wrote. (optional)
• Make the AI complete this task. (crucial)

First, I search the needed files.

• “/app/components/button.tsx” (about 70 lines)
• “/app/campaigns/edit/[id].tsx” (about 500 lines)

Then, I write the initial prompt:

The Button component being rendered on the edit campaign page is not working as expected. It should reposition itself when the screen size changes.

Error: The button gets off screen when the screen size is small.

Expected result: The button should be responsive and reposition itself when the screen size changes.

Overview: Review the content of the page file and see if the containers and components are properly nested and positioned according to the flex or grid layout being used.

Then, I ask the LLM to format this prompt for me, getting this result.

This prompt is sent to the IDE together with the referenced files tagged and then after the AI Agent does its job, I manually review the code diff and the UI behavior.

What about larger tasks?

Just as before, we start with the same steps:

Let’s build our scenario. We are working on a big task that involves two repositories, will result in lot’s of lines of codes being written, table modifications added, tests written and run, etc.

What’s the first thing we need to do? We need to identify the task requirements and, within our codebase (or within our knowledge) we have to define an expected result.

Task:

1
Objective
2

3
You are required to integrate a new Service Provider module.
4

5
Task Requirements
6

7
Module: ExternalApiServiceProviders
8

9
You’re building CRUD support for managing third-party service providers that the platform integrates with.
10

11
A “Provider” entity may have:
12

13
id: number;
14
name: string;
15
apiKey: string;
16
baseUrl: string;
17
status: 'active' | 'inactive';
18
createdAt: Date;
19
updatedAt: Date;
20

21
You will be required to persist, list, update, delete, and view details of each provider both in the UI and API.
22

23
Deliverables
24

25
Backend (NestJS)
26
  -  Routes: RESTful routes for GET, POST, PUT, DELETE, GET/:id.
27
  -  Controller: ProviderController with mapped methods.
28
  -  Service Layer: ProviderService with business logic.
29
  -  Repository Layer: ProviderRepository with ORM queries.
30
  -  ORM: Use your preferred ORM (TypeORM/Prisma), must include:
31
  -  Migration file to create providers table.
32
  -  Entity model definition.
33
  -  DTOs: Use DTOs for CreateProviderDto and UpdateProviderDto.
34
  -  Helper classes: If necessary (e.g. ProviderSanitizer, UrlValidator, etc.).
35
  -  Validation: Add basic validation rules.
36

37
Frontend (Next.js + TailwindCSS)
38

39
Implement a providers module in the frontend:
40
  -  Index page: List of providers in a styled table with actions.
41
  -  Show page: Display provider details.
42
  -  Edit page: Edit form preloaded with values.
43
  -  Create page: Add new provider.
44
  -  Delete functionality: Triggered from Index page.
45

46
Use the following:
47
  -  TailwindCSS for UI (avoid UI libraries).
48
  -  React Hook Form for form state and validation.
49
  -  Redux for global state
50
  - Fetching logic using useSWR.
51
  -  Custom Hook: Create a reusable useProviders() hook to handle API calls and types.
52
  -  Types: Create TypeScript types/interfaces for the Provider.
53
  -  Handle loading and error states.
54
  -  Add sorting or filtering in index.
55
  -  Add toast notifications (e.g. react-hot-toast) on success/failure.
56

57
Follow these conventions:
58
  -  Backend:
59
  -  router -> controller -> service -> repository -> orm
60
  -  Use DTOs and Helper classes where applicable
61
  -  RESTful design
62
  -  Frontend:
63
  -  Modular page structure (pages/providers/)
64
  -  Tailwind utility classes only
65
  -  Componentized and reusable logic
66

67
Documentation
68

69
Provide a short module_docs.md with:
70
  -  Explanation of the integration
71

72
Notes
73
  -  Clean architecture & adherence to common patterns
74
  -  Proper use of TypeScript types
75
  -  Component and code reusability are important
76
  -  Form handling and validations are crucial
77
  -  UI clarity with Tailwind
78
  -  Optional: Integration test (even if partial with mocked data)

Keep in mind this is a sample task modified specially for this article and it’s just an example. I, as many of you also do, wish all the tasks and requirements at work were clearly defined and explained.

What’s next?

Identify the files. So in this case as most of the files are new code, we have to identify an existing service provider or existing module on our platform that the LLM can copy.

1
- "backend/app/modules/politics/routes/index.ts"
2
- "backend/app/modules/politics/controllers/index.ts"
3
- "backend/app/modules/politics/services/index.ts"
4
- "backend/app/modules/politics/repositories/index.ts"
5
- "backend/app/modules/politics/orm/index.ts"
6
- "backend/app/modules/politics/dtos/index.ts"
7
- "backend/app/modules/politics/helpers/index.ts"
8
- "backend/app/modules/politics/requests/index.ts"
9
- "backend/app/modules/politics/responses/index.ts"
10
- "backend/app/modules/politics/models/index.ts"

1
- "frontend/app/politics/index.tsx"
2
- "frontend/app/politics/edit/[id].tsx"
3
- "frontend/app/politics/[id].tsx"
4
- "frontend/components/politics/tables/indexTable.tsx"
5
- "frontend/components/politics/layouts/baseLayout.tsx"
6
- "frontend/components/politics/dialogs/customPoliticsDialog.tsx"
7
- "frontend/hooks/politics/usePolitics.tsx"
8
- "frontend/types/politics/types.tsx"

After having outlined an existing module on our platform that the LLM can copy I build the prompt.

1
Backend
2

3
- Create Module
4
- Generate module.
5
- Create and register ModuleController, ModuleService, and ModuleRepository.
6
- Define Data Structures
7
- Create Model with fields: id, name, apiKey, baseUrl, status, createdAt, updatedAt.
8
- Create CreateModelDto and UpdateModelDto with validation decorators.
9
- Implement CRUD Pipeline
10
- Implement ModelRepository with basic ORM methods (findAll, findOne, create, update, delete)
11
- Implement ModelService methods calling the repository
12
- Implement ModelController with RESTful endpoints and use DTOs
13
- Add route definitions using NestJS router
14
- Create migration to generate the models table
15
- Run the migration and verify database creation
16
- Add helper classes if needed (e.g. validator, sanitizer)
17
- Add tests (optional).
18

19
⸻
20

21
Frontend
22

23
- Setup Types and API Integration
24
- Create TypeScript interfaces for Provider.
25
- Create a reusable API hook: useProviders() with methods: fetchAll, fetchOne, create, update, delete.
26
- Optionally, create a Redux slice or use SWR for state management.
27

28
- Create Pages
29

30
Index Page
31

32
- Create table and components
33
- Fetch and display a table of providers with TailwindCSS.
34
- Add action buttons: View, Edit, Delete.
35

36
Show Page
37

38
- Create show page and components
39
- Display full provider details using useProviders().fetchOne.
40

41
Edit Page
42

43
- Create edit page and components
44
- Use react-hook-form to display a form with prefilled values.
45
- Handle form submission with update() from useProviders.
46

47
Create Page
48

49
- Create 'create' page and components
50
- Use react-hook-form to build a creation form.
51
- Submit data to backend using create() method.
52

53
Delete Functionality
54

55
- Add delete action from index using delete() method.
56
- Add confirmation prompt or modal.

After this, I send to the LLM for further formatting and optimization this prompt together with the files I listed before to get this result:

The formatted prompt provides clear structure and actionable tasks for the AI to work with, including both backend and frontend implementation details.

This prompt can still be optimized further by removing unnecessary elements, improving the token usage, adding code snippets inside as part of the implementation details and expected results.

The result?

I want to see the code

HITL - Human in the Loop

Some comment from a Google Cloud article

There are some clear benefits of the human in the loop approach. On this case, apart from validating the lines of code, we must test the code does what we asked to, and if it was a real working project, we must validate it works and matches the existing conventions.

I actively suggest not to blindly trust ai-generated code. As you get used to work with coding like this, you will see that most of the times, the code works and does what you asked. If you take the time to be as specific as possible on what you need solved and most important, how it must be solved, you will see that the AI does it mostly right.

Yes, you will have tasks with some over-estimations that will now take you a third or even a fifth of the time. How you handle this is up to you.

We as developers and engineers must accept our role is changing and we should adapt to this because AI is here to stay. We will have the time consumed by reviewing AI generated code from our tasks, and from our team members that will eventually also use AI to generate their code.

So now more than ever, to take the most advantage of AI, we need to have a clear understanding of how to use it effectively and also a plan to integrate it into our workflow.

This also applies to the business you work outside of code, meaning in when the estimations are done, or the tasks are written or created. If we take the time to be as specific as possible on what we need solved and most important, how it must be solved, you will see that the AI does it mostly right much faster and the products we build will evolve faster.

What about hallucinations?

Hallucinations won’t go away entirely, but by following the approach I have been using, we can minimize them a lot and ensure the code generated is accurate and reliable.

This means that, for example, when you pass many files that are related to each other, you should tell the AI for example that file A uses file B and references file C for a specific condition, and so depending on the data involved it might need to search relevant functions on file D. You have to guide the AI.

Instead of all of this, isn’t there a framework for handling everything?

There are many approaches to handling a coding workflow with AI. This article is my personal take, I do not consider it the best as it keeps changing every 2 to 3 months, when I learn something new.

Some others have managed to built automated systems that involve all of what I explained to a script and it is very useful. You can add many parts to the process but I believe you will always end up going back to the basics.

For example a simple node script that you paste the link to the task, it authenticates on your tasks platform, then interacts with the AI on a determined pipeline through tool calling and you connect it with MCP to your needs and all the process was automated. Also adding a trigger to your notifications emails that start the entire flow is a possibility, you just have to try and find what’s best for you.

An Extra Tool

A couple days ago I stumbled upon PocketFlow

The concept of this is to work with AI as directed flows based on encapsulated nodes that are structure in a graph.

I highly suggest you check it out, it’s a great tool for creating and tinkering with your AI workflows and most important, understand how it was thought to be used is key.

Here is a link to a video of the creator.

I am not affiliated with PocketFlow nor its creators, I just found it very interesting and thought it was worth sharing.

Useful Resources

Some of these are not direclty tied to the development process, but they explain some concepts that you can apply to it.

• Context Rot
• PocketFlow
• 12-Factor Agents
• Anthropic’s Multi-Agent Systems
• SLM are the Future of Agentic AI
• Spec-Driven Development System

If you made it to here, I want to say thank you for reading my article. I hope you found it useful and informative. If you have any questions or feedback, please feel free to reach out to me on X or by Mail. I would love to hear from you!

Have a nice day!