AI-Powered E-Commerce App with .NET 9, Angular 20 & RAG

Create an Amazon-like e-commerce experience with microservices in Docker Compose, offering search, filters, cart, checkout, and order tracking in a production-like app with .NET 9, Angular 20, and RAG.

Start building an AI enabled e-commerce app with an Angular UI and .NET microservices, delivering chat-like and semantic search via the embedding engine into PG vector, using Lama.

Create a new blank solution for an AI-enabled e-commerce app and scaffold a minimal web API with endpoints, repositories, providers, and services. Prepare containerization and Azure OpenAI integration.

Explore the Ollama model as a self-hosted local AI provider running on your machine with Docker, enabling chat and embedding tasks without cloud calls.

Create and configure Docker support for an ai service by adding a Dockerfile, Docker compose, and volumes to run Olama locally with a pgx vector persistence.

Set up docker-based postgres with the PKG vector extension and embeddings, configure ai user and ai pass, map ports 5432 and 5433, and implement health checks and volumes.

Define the IPG vector repository interface, implementing insert product with embeddings and vectors, and add vector, keyword, and hybrid search methods to enable semantic retrieval.

Create a models folder and define brand, type, and product as records with id and name fields for search. Then configure the provider to wire these models into the application.

Create an embedding provider that generates embeddings for products, supporting single and batch processing and configurable dimensions to fit different models like Tiny llama, Azure OpenAI, or OpenAI.

Implement an Ollama embedding provider that reads config, constructs a model and prompt, calls the embeddings endpoint, parses json, converts to a float array, and prepares for future batch processing.

Develop and implement a batch method for the Ollama embedding provider, constructing async requests, processing JSON embeddings into arrays, aggregating results, and returning the final results.

Configure app settings to manage chat model providers, OpenAI and Azure, including API keys, and set embedding deployment details such as dimensions, max tokens, and temperature.

Create an IChatProvider interface and an OllamaChatProvider class to chat via an API call. Configure the model, max tokens, and temperature from app settings and prepare for streaming options.

Build a chat provider and embedder that integrates offline and online providers for semantic and vector search. Store embeddings in pkg vector and enable fallback to web search when needed.

Install and configure essential NuGet packages for the PG vector repository, including Postgres vector, Dapper, Entity Framework Core for PostgreSQL, and Swashbuckle, to enable Postgres data access and Swagger support.

Implement a pg vector repository: insert embedding into the product vector with size-based embedding columns and perform vector search using cosine similarity, mapping results with a handwritten mapper.

Implement a pg vector repository to power semantic product search with embedding-based vectors, cosine similarity, and a hybrid fallback to keyword search with top_k control.

Implement data ingestion for an AI-powered e-commerce app by modeling catalog data, including product detail, brand, and type, via a semantic endpoint and vector persistence, with catalog response DTOs.

Create a semantic endpoint to ingest catalog data from a microservice, embed text in batches using an embedding provider, and persist vectors in a PG vector repository with product metadata.

Learn how to ingest data end-to-end, batch embeddings to avoid API overload, and store semantic vectors in PostgreSQL pgvector, with provider choices via app settings.

Create a semantic search endpoint using vector and keyword methods, including vector-based, keyword-based, and hybrid searches, mapped via app.mapPost routes and a repository with embeddings.

Explore three search approaches for an ai-powered e-commerce app: vector (semantic) search, keyword search, and hybrid search. Learn how embeddings convert queries to vectors and fetch top five results.

Implement a chat service in the .NET app, rename semantic endpoints to semantic data endpoints, and model chat responses with results from product DB and web search for context-aware interactions.

Define a web search provider as a chat fallback, with an async search interface and a stubbed result, enabling future integration of engines like Google or Bing.

Create a chat service as the system heart by wiring vector repository, embedding, chat, and web search providers to perform hybrid search and build conversational context.

Understand how a chat service injects dependencies, uses embeddings and semantic vector search in a hybrid approach to surface relevant products, builds conversational context, and falls back to web results.

Implement a chat endpoint as the app’s entry point, mapping post /ask to a chat service with the request from body. Extend routing with a static chat endpoints class.

Create a sanity check embedding endpoint that uses an embedding provider to embed text and return provider, dimensions, and length for connectivity across llama and OpenAI.

Wire up program.cs by configuring dependency injection, cors policy, api explorer, and vector-based embedding with Postgres data source, setting up a singleton repository and a provider switch for the app.

Register and configure embedding, chat, and web search providers, set http clients with base addresses and timeouts, wire to catalog API through the gateway, and expose health and swagger endpoints.

Test the app in docker compose by running the ai service locally and validating the chat endpoint and embedding flow from the catalog api into pg vector for semantic search.

Demonstrate a chat demo that powers an Angular bot and search using keyword, hybrid, and vector search to fetch product results with database and web search fallback.

Resolve a null brand name issue by correcting capitalization and mapping, verify across searches, and demonstrate a ready-to-implement fix before moving to the Azure Open AI module.

Learn to build and host an Azure OpenAI provider from scratch, using embeddings and semantic search for fast hybrid keyword and semantic retrieval in an AI-powered e-commerce app.

Implement and extend the OpenAI embedding provider for a .NET 9 and Angular 20 RAG app, configure the model, batch requests, and parse JSON to float vectors.

Explore how the OpenAI embedding provider batches requests natively and parse JSON into a two-dimensional float32 vector array for each embedding in an AI-powered e-commerce app.

Extend the chat provider to implement an OpenAI chat provider, reading configuration from settings, injecting dependencies, and posting to chat/completions to parse the first choice content as the response.

Learn how to implement an Azure OpenAI embedding provider in a .NET app, configure deployment, model size, and API version, and handle embedding batch responses to produce vectors.

Create a chat completion response model for a chat provider, defining classes for choice and message, and returning a JSON-shaped structure with role and content.

Implement an Azure OpenAI chat provider by building a new provider class, configuring an HTTP client and settings, and defining system and user prompts to guide an AI shopping assistant.

Deploy chat completion and embeddings with Azure AI Foundry, hosting the embedding provider on Azure AI, and access models, hub projects, and SDKs across Python, C#, JavaScript, TypeScript, and Java.

Create an Azure resource group from portal.azure.com by selecting a region, naming it, adding an environment tag, and reviewing before creation, then access the group to deploy Azure AI services.

Create and configure an Azure OpenAI resource, fetch its endpoint and API key, update app settings, and deploy embedding and chat deployments for integration.

Select models from the catalog, create deployments such as GPT-4 mini, and set up embedding deployments. Configure deployment details, pricing, region, and authentication, then test swagger with Azure Open AI.

Debug a 'exceeded max' rate limit while loading catalog product embeddings into a vector store using Swagger and semantic load, with retries during intermittent batch operations.

Explore Azure OpenAI integration for an e-commerce app, showcasing embeddings, vector search, semantic and keyword hybrid search, and fast responses in a .NET 9 and Angular 20 architecture.

Integrate your Angular app with Azure AI experience to enable catalog, semantic, and hybrid search powered by GPT and text embeddings, using cosine similarity for relevant results.

Explore front-end integration to add ai-enabled, amazon-inspired ecommerce features, including semantic keyword search, hybrid search, and a chat box, wired to backend models.

Modify the navbar search to capture the user’s term and a search mode, then navigate with query params to update the url, defaulting the mode to catalog.

Modify the navbar markup to add a search mode selector with catalog, semantic, and hybrid options, bound to ngModel and styled in sass.

Extend the product service to add semantic and hybrid search using a private AI service, exposing vector and hybrid endpoints that return products with top k.

Iterate on the store page by wiring search mode, query params, and load logic to support catalog, semantic, and hybrid search using the product service, updating products and total count.

Configure and test the site search by tuning top K, validating keyword and semantic results, and wiring the AI service with text embeddings and a hybrid search workflow.

Resolve the filtering issue in the catalog by aligning semantic and hybrid search filters with brand and type IDs, implementing query-based filtering, and validating results across search scenarios.

Create chat models for an e-commerce app by defining chat message and chat response interfaces, organizing a models folder, and implementing a chat service to handle messages, products, and sources.

Create an injectable chat service in Angular, inject HttpClient, configure the chat/ask endpoint, and implement ask(message: string) to post and return the chat response observable.

Design and wire a standalone chat bot component in Angular 20, using signals to manage open state, user input, and messages, and connect to a chat service for bot responses.

Build a toggleable chatbot interface for the ai-powered e-commerce app, featuring chat header and body, product cards, typing indicator, and an input-driven footer.

Discover an ai-powered e-commerce app built with .NET 9, Angular 20 and RAG, featuring a chatbot, cart, checkout, and order history.

Explore integrating speech synthesis and text-to-speech with Azure Cognitive Services, enabling voice input, mic control, and text-to-speech summaries in an Angular e-commerce app, with a minimal C# backend endpoint.

Create a voice input model and interface for speech-to-text transformation, using a voice request and form file to transcribe audio and synthesize text into bytes via the Ivi service.

Create a skeleton voice service, implement the ivi service, and set up a placeholder for speech-to-text and text-to-speech with async stubs for later SDK integration.

Create a speech to text endpoint that accepts an audio file via multipart form data, validates content type, and uses Azure SDK to transcribe and return results.

Implement a text-to-speech endpoint in the ai-powered e-commerce app, validating input, synthesizing speech via a voice service, and returning wav audio bytes.

Register the voice endpoint in program.cs by adding a scoped voice service and mapping it with endpoints, then build to verify the integration before moving to Azure SDK.

Install the Microsoft Cognitive Services Speech NuGet package, update app settings, and wire the speech service into the Azure Open AI workflow.

Implement speech to text by configuring Azure speech key and region from config, setting up wav audio input, and using a recognizer to handle recognized, no match, and canceled results.

Implement text-to-speech with Azure Cognitive Services Speech SDK, configure the Ana neural voice, and stream audio via memory and binary output streams while handling 16 kHz mono PCM audio.

Learn to set up Azure Speech Service within Azure Cognitive Services, select a pricing tier, obtain keys and endpoint, and wire it into an Angular app with managed keys.

Demonstrates testing a text-to-service endpoint with Postman, receiving audio bytes, and verifying a downloaded WAV file, which lacks a proper WAV header and uses PCM encoding.

Fix the wav format by enforcing synthesize async to return a proper wav file with the riff wav header, avoiding raw pcm for playable audio in the AI-powered e-commerce assistant.

Wrap the advice endpoint keys in an object and integrate speech-to-text and text-to-audio in the chat service, with UI updates for recording and audio transmission.

Showcases integrating speech capability and text capability with a synthesizer into an AI-powered e-commerce app, enabling voice and semantic search for kitbags and shoes, with brands like Yonex and Babolat.

Introduce contextual memory with embeddings to query a product catalog, demonstrating how to retrieve cheapest and costliest bags and extend the module with contextual memory.

Define models for a chat feature: a conversation message record with id, conversationId, role, content, and createdOn; add chat request and response models with history limits, and plan Postgres table.

Set up and create sql tables to support contextual memory in an ai-powered ecommerce app, including product vectors, ai conversations, and embeddings with extensions and repositories.

Create a conversation repository interface with methods to create conversations, check existence, append messages, and fetch recent messages (oldest to newest), with cancellation tokens.

Implement a repository to power server-side conversational memory by persisting conversation metadata and ids, appending user and assistant messages, and retrieving recent messages for multi-turn context.

Extend a stateless endpoint to a context aware endpoint by validating and resolving conversation id, loading recent chat history, and wiring a conversation repository for contextual responses.

Create a context aware endpoint that manages conversation history with a twofold batch approach, retrieves chat history, calls the chat service, and persists each turn using the conversation ID.

Contrast constructor-based mapping with positional parameters in a Postman demo to fix dapper db initialization, wire the conversation repository, and preserve context with a conversation ID.

Improve follow-up query handling by preserving context and conversation id, extracting the real topic from user messages, grounding queries at the dotnet backend, and prep for angular integration.

Wire angular changes to update the chat flow by passing a conversation id with messages, introduce chat ask response models, and align front-end and back-end implementations for seamless conversation context.

Explore an application demo that translates natural language queries into domain logic via a hybrid pipeline and vector context to surface the best and cheapest kit bags.