Nowadays we hear more and more about the AI, LLM’s and how they are changing our way to interact with applications such as Microsoft Office 365, Adobe Creative Cloud, searching, among others. Those applications integrate different - and most times, proprietary LLM models - I’m sure that you hear about Anthropic Claude, OpenAI ChatGPT, Microsoft Copilot, Google Gemini, etc.

But what really make difference about these LLM models is how they integrate with already know - and often use - applications that we are already acquainted with (e.g. Windows 11 for example replaced the Cortana assistant with Copilot). Our duty as software engineers is to leverage those LLM tools to solve real problems and even enhance our own applications, integrating those AI/LLM API’s.

In this article, I intent to show you how:

🧠 What are LLMs and why integrate them?

Large language models (LLMs) are large-scale neural networks trained on vast corpora of text that learn linguistic patterns and can generate, summarize, and transform natural language with a high degree of fluency; therefore, they have become practical tools for creating conversational assistants, automatic content generation, interface enrichment (e.g., contextual suggestions and completions in editors), and automation of cognitive tasks that previously required human intervention. Review studies show that, in addition to generation capabilities, LLMs can be integrated into information retrieval pipelines, post-processing tools, and quality control systems to improve accuracy and usability in real-world applications, reducing development time and improving user experience. Recent research also highlights important trade-offs—such as computational cost, latency, biases, and privacy requirements—that should guide architectural decisions and model selection when integrating LLMs into products.

⁉️ Why OpenRouter?

OpenRouter provides a unified API that simplifies access to multiple large language models (LLMs) through a single interface, making it easier for developers to experiment with different providers without rewriting integration code. One of its key advantages is the ability to configure fallback routing: if a primary model is unavailable or fails, OpenRouter can automatically redirect the request to alternative models defined by the developer. This reduces downtime and ensures more reliable user experiences. Additionally, OpenRouter normalizes request and response schemas across providers, which means developers only need to learn one consistent format instead of adapting to each vendor’s unique API. This design makes OpenRouter particularly valuable for applications that require flexibility, scalability, and resilience in their AI integrations.

🏢 Architectural format of both backend and frontend projects

Now, let’s assume that your backend and frontend are organized as it follows:

## backend ##

/public
/app
	/configs
	/controllers
	/db
	/models
	/routers
	/schemas
	/utils
	dependencies.py
	main.py
## frontend ##

 /public
 /src
	 /components
	 /contexts
	 /mocks
	 /routes
	 /services
	 /shared
	 /test
	 /utils

DISCLAIMER: This is a recommendation of project structure and best practices, you may use the code snippets in this article to still implement on different project structures if you prefer.