How I Build My AI Chat App from Scratch (Architecture + Challenges)

While using AI tools daily, I realized I had never built one myself.

That curiosity led me to develop a fully functional AI chat app — handling streaming responses, dynamic UI updates, and API reliability issues.

This article is not just about what worked, but also the problems that forced me to think like a real-world developer.

Project Overview

I have developed an AI Chat App named - "My Assistant". Its is a windows based AI Chat App. It used to help for content generation, prepare documentation, help in solving logical problems, provide summary, and explain model data.

"MyAssistant" - provide core features; Send prompts 'n get AI response, on spot streaming responses, live ui update while streaming response. Also provide features like - chat history, new chat create option, read chats, delete chats, chat sidebar toggling.

Why I built it

I built this project out of both curiosity and the desire to grow as a developer.

AI chat applications are everywhere, but I wanted to understand how they actually work behind the scenes — from handling user input to rendering responses in real time.

At the same time, I wanted to challenge myself with real-world problems like asynchronous data flow, and responsive UI design.

This project became a hands-on way to explore all of these areas in a single application.

Tech Stack

I have been developing projects on .NET for the past 3 years, primarily building desktop applications using WinForms and WPF and web applications using ASP.NET core MVC and C#.

For this AI chat application, I used the WPF with C# for high quality UI feature. Implement MVVM design pattern for streaming responses. For integrating AI capabilities, I used an SDK which made it easier to communicate with the API. It handled request formatting and response parsing, allowing me to focus more on application logic rather than low-level HTTP operations.

SDK (Software Development Kit): OllamaSharp an open source SDK API.

Tools: Visual Studio 2026, Sqlite for chat storing.

Architecture Design

To keep the application scalable and maintainable, I followed a layered architecture based on the MVVM (Model-View-ViewModel) pattern. This helped me separate UI logic from business logic and API handling.

The application is divided into following layers:

UI Layer (WPF): The UI layer is responsible for rendering the chat interface and handling user interactions.

• Built using WPF for a desktop experience.
• Displays chat messages in a conversational format.
• Handles user input (typing and sending messages).
• Binds UI elements to the ViewModel. The UI itself contains minimal logic and relies entirely on data binding to reflect changes dynamically.

ViewModel (Binding & Commands): The ViewModel acts as the bridge between the UI and the backend logic.

• Exposes properties bound to the UI (e.g., User Prompt, AI response, Creation Time).
• Maintains an ObservableCollection to update chat messages in real time.
• Controls the flow of data between UI and services. This layer ensures that the UI updates automatically whenever the underlying data changes.

Service Layer (API Calls): The Service layer handles all external communication, especially with the AI API.

• Sends user prompts to the AI service.
• Receives and processes responses.
• Manages asynchronous calls.
• Handles errors and retry logic. By isolating API logic in this layer, the application remains clean and easier to maintain or extend.

Model: The Model represents the structure of the data used in the application. Defines chat message properties (e.g., user prompt, AI response, creation time, role). Acts as a data container shared across layers.Keeps the data structure consistent throughout the app.

Data Layer: To make the application more practical and stateful, I introduced a dedicated data layer for storing chat history and configuration.

1. SQLite (Chat History): Stores past conversations locally. Enables persistence across sessions. Helps in restoring chat history when the app restarts. Lightweight and efficient for desktop applications.
2. XML (Configuration): Stores chat configuration details like - chat name, chat id, creation time.

Chat Flow

The interaction between these layers follows a clear flow:
User Input → UI Layer → ViewModel → Service Layer → API Response → ViewModel → Data Layer → UI Update

• The user enters a message in the UI.
• The ViewModel captures the input via command binding.
• The Service layer sends the request to the SDK API.
• The response is returned to the ViewModel.
• The conversation is stored in SQLite.
• The UI updates automatically through data binding.

Key Challenges & Solutions

Before started building this application I faced version incompatibility problem because initially using IDE - Visual Studio 2019 with .NET Framework 4 along with C# version below 7 which does not support the latest SDK version of OllamaSharp and the C# coding syntax. So, used older version that support .NET Framework. I built first console application with stream response. But it does not support generating stream that means I had to wait until the complete stream response is returned by API.

Then I install visual Studio 2026 with .NET 10 and install latest version OllamaSharp SDK. I build with WPF which provide high quality UI. I used WPF because it provide customise controls template features. I implement live streaming response by AI along with real time UI Update which only can be implemented by using MVVM design pattern.

MVVM design pattern provide solution to bind the data with UI by separating the business logic and UI.

I tried with two different methods for generating ai response. First I tried with ChatRequest. This make UI real time chat, it does not provide streaming response. It wait for api response while the api generate the response on server and return the complete response. Second I tried with GenerateRequest. It make api continues response in stream while generating request on server.

UI Design Decisions

Every developer think and imagine the form of ui create on paper. I designed a chat bubble, how it should looks with customised borders, font colours, and text. Set the alignment for both user prompt and AI response on behalf of role (left for AI and right for user).

Implement auto scroll behaviour and Clean UX decisions.

What I Learned

• Importance of asynchronous programming: Avoiding UI blocking, Managing background tasks, Updating UI safely from async operations.
• State management in UI: How ObservableCollection works, Why proper data binding matters, Challenges like auto-scroll and UI refresh issues.
• Debugging Real Problems: I faced multiple real-world issues like - (UI not updating correctly, Scroll position resetting, Stream handling challenges)
• Thinking beyond "Just Code": Thinking Like a System Designer. This project shifted my mindset from “How do I write this code?” to “How should this system be designed?”

Future Improvement

Current I am working on this project, I will implement more features like - voice input, file upload, image generating, multi-model support.

Conclusion

Building this project helped me move from just writing code to actually designing a system.

If you're a developer, I highly recommend building something like this. It teaches far more than tutorials ever will.