AI Chat Application

A full-stack AI chat application built with .NET 10 Web API backend and Angular 21 frontend. The application supports multiple AI service providers including Ollama, OpenAI, Azure AI Foundry, and Anthropic, with document management and vector search capabilities.

📋 Table of Contents

• Features
• Architecture
• Tech Stack
• Prerequisites
• Quick Start
• Configuration
• Database Setup
• API Endpoints
• Examples
• Development
• Testing
• Troubleshooting
• Contributing
• License
• Authors
• Acknowledgments

🚀 Features

• Multi-AI Provider Support: Integrate with Ollama, OpenAI, Azure AI Foundry, and Anthropic
• Real-time Chat: Server-sent events for streaming responses
• Document Management: Upload and search documents with vector embeddings
• Session Management: Persistent chat sessions with history
• Modern UI: Responsive Angular frontend with Bootstrap 5
• Vector Search: AI-powered document search using SQL Server Vector Search

🏗️ Architecture

ai-chat/
├── RR.AI-Chat/                 # .NET 10 Web API Backend
│   ├── RR.AI-Chat.Api/         # API Controllers & Program.cs
│   ├── RR.AI-Chat.Service/     # Business Logic Services
│   ├── RR.AI-Chat.Repository/  # Data Access Layer
│   ├── RR.AI-Chat.Entity/      # Entity Framework Models
│   └── RR.AI-Chat.Dto/         # Data Transfer Objects
└── ai-chat-ui/                 # Angular 21 Frontend
    ├── src/app/services/       # HTTP Services
    ├── src/app/dtos/           # TypeScript DTOs
    └── src/environments/       # Environment Configuration

🛠️ Tech Stack

Backend (.NET API)

• .NET 10.0 - Web API Framework
• Entity Framework Core 10.0 - ORM with SQL Server
• SQL Server Vector Search - Vector embeddings storage
• Microsoft.Extensions.AI - AI service abstractions
• Swagger/OpenAPI - API Documentation

Frontend (Angular UI)

• Angular 21 - Frontend Framework
• TypeScript 5.9 - Programming Language
• Bootstrap 5.3 - CSS Framework
• RxJS - Reactive Programming
• Highlight.js - Code Syntax Highlighting
• Markdown-it - Markdown Rendering

AI Service Integrations

• Ollama - Local AI models
• OpenAI - GPT models
• Azure AI Foundry - Azure OpenAI Service
• Anthropic - Claude models

📋 Prerequisites

Required Software

• .NET 10.0 SDK - Download here
• Node.js 18+ - Download here
• SQL Server - Express, Developer, or Full edition
• Angular CLI 21+ - Install via npm install -g @angular/cli

Optional (for local AI)

• Ollama - Install here for local AI models

AI Service API Keys (at least one required)

• OpenAI API Key - For GPT models
• Azure AI Foundry - Endpoint URL and API Key
• Anthropic API Key - For Claude models

🚀 Quick Start

New to the project? Check out our Quick Start Guide for the fastest way to get running!

1. Clone the Repository

git clone https://github.com/RorroRojas3/ai-chat.git
cd ai-chat

2. Setup the Database

# Create database (replace connection string as needed)
# Default: Server=localhost;Database=aichat;Integrated Security=true;Encrypt=true;TrustServerCertificate=true;

3. Configure API Environment Variables

Create user secrets for the API project:

cd RR.AI-Chat/RR.AI-Chat.Api
dotnet user-secrets init

Add your AI service configurations:

# For OpenAI
dotnet user-secrets set "OpenAI:ApiKey" "your-openai-api-key"

# For Azure AI Foundry
dotnet user-secrets set "AzureAIFoundry:Url" "https://your-endpoint.openai.azure.com/"
dotnet user-secrets set "AzureAIFoundry:ApiKey" "your-azure-api-key"
dotnet user-secrets set "AzureAIFoundry:EmbeddingModel" "text-embedding-ada-002"

# For Anthropic
dotnet user-secrets set "Anthropic:ApiKey" "your-anthropic-api-key"

# For custom Ollama URL (optional, defaults to http://localhost:11434/)
dotnet user-secrets set "OllamaUrl" "http://localhost:11434/"

4. Run the API

cd RR.AI-Chat
dotnet restore
dotnet build
dotnet run --project RR.AI-Chat.Api

The API will start at https://localhost:7045 (HTTPS) and http://localhost:5045 (HTTP).

5. Run the Frontend

cd ai-chat-ui
npm install
npm start

The frontend will start at http://localhost:4200.

6. (Optional) Enable Angular MCP Tools in VS Code

Use the Angular CLI MCP server to supercharge AI-assisted Angular workflows.

Create .vscode/mcp.json in the repo root with one of the following configurations:

{
  "servers": {
    "angular-cli": {
      "command": "npx",
      "args": ["-y", "@angular/cli", "mcp"]
    }
  }
}

6. Access the Application

• Frontend: http://localhost:4200
• API Documentation: https://localhost:7045/swagger

🔧 Configuration

API Configuration (appsettings.json)

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "CorsOrigins": ["http://localhost:4200"],
  "OllamaUrl": "http://localhost:11434/",
  "ConnectionStrings": {
    "DefaultConnection": "Server=localhost;Database=aichat;Integrated Security=true;Encrypt=true;TrustServerCertificate=true;"
  }
}

Frontend Configuration (src/environments/environment.ts)

export const environment = {
  production: false,
  apiUrl: "https://localhost:7045/api/",
};

Environment Variables Reference

Variable	Description	Required	Default
OpenAI:ApiKey	OpenAI API key for GPT models	No*	-
AzureAIFoundry:Url	Azure OpenAI endpoint URL	No*	-
AzureAIFoundry:ApiKey	Azure OpenAI API key	No*	-
AzureAIFoundry:EmbeddingModel	Embedding model name	No	text-embedding-ada-002
Anthropic:ApiKey	Anthropic API key for Claude models	No*	-
OllamaUrl	Ollama server URL	No	http://localhost:11434/
ConnectionStrings:DefaultConnection	SQL Server connection string	Yes	See above

*At least one AI service must be configured.

🧪 Database Setup

The application uses Entity Framework migrations. To set up the database:

1. Update Connection String: Modify the connection string in appsettings.json or set via user secrets:

   dotnet user-secrets set "ConnectionStrings:DefaultConnection" "your-connection-string"

2. Run Migrations (when available):

   cd RR.AI-Chat
   dotnet ef database update --project RR.AI-Chat.Api

📚 API Endpoints

Chat Endpoints

• POST /api/chats/sessions/{sessionId}/stream - Stream chat responses
• POST /api/chats/sessions/{sessionId}/completion - Get chat completion

Session Management

• GET /api/sessions - Get all sessions
• POST /api/sessions - Create new session
• GET /api/sessions/{id} - Get session by ID
• DELETE /api/sessions/{id} - Delete session

Document Management

• POST /api/documents - Upload document
• GET /api/documents - Get all documents
• POST /api/documents/search - Search documents

Models

• GET /api/models - Get available AI models

📝 Examples

Example 1: Starting a Chat Session

Backend (C# API Call):

// Create a new chat session
var session = new SessionDto
{
    Name = "My AI Conversation",
    CreatedAt = DateTime.UtcNow
};

// POST to /api/sessions
var response = await httpClient.PostAsJsonAsync("api/sessions", session);
var createdSession = await response.Content.ReadFromJsonAsync<SessionDto>();

Frontend (TypeScript/Angular):

// Using the SessionService
this.sessionService.createSession("My AI Conversation").subscribe((session) => {
  console.log("Session created:", session.id);
  this.currentSessionId = session.id;
});

Example 2: Sending a Chat Message and Streaming Response

Backend (C# Controller):

[HttpPost("sessions/{sessionId}/stream")]
public async IAsyncEnumerable<string> StreamChatCompletion(
    Guid sessionId,
    [FromBody] ChatCompletionDto request,
    [EnumeratorCancellation] CancellationToken cancellationToken)
{
    await foreach (var chunk in _chatService.StreamCompletionAsync(
        sessionId,
        request,
        cancellationToken))
    {
        yield return chunk;
    }
}

Frontend (TypeScript/Angular with SSE):

// Stream chat response
sendMessage(sessionId: string, message: string, model: string) {
  const request = {
    prompt: message,
    model: model,
    systemPrompt: 'You are a helpful assistant.'
  };

  this.chatService.streamCompletion(sessionId, request).subscribe({
    next: (chunk) => {
      // Append chunk to message display
      this.currentMessage += chunk;
    },
    complete: () => {
      console.log('Streaming completed');
    }
  });
}

Example 3: Document Upload and Vector Search

Upload a Document:

// C# Example
var formData = new MultipartFormDataContent();
formData.Add(new StreamContent(fileStream), "file", fileName);

var response = await httpClient.PostAsync("api/documents", formData);
var document = await response.Content.ReadFromJsonAsync<DocumentDto>();

Search Documents:

// C# Example - Vector search with AI embeddings
var searchRequest = new DocumentSearchDto
{
    Query = "What are the system requirements?",
    TopK = 5
};

var response = await httpClient.PostAsJsonAsync("api/documents/search", searchRequest);
var results = await response.Content.ReadFromJsonAsync<List<DocumentDto>>();

Example 4: Using Different AI Providers

OpenAI (GPT-4):

const request = {
  prompt: "Explain quantum computing",
  model: "gpt-4",
  systemPrompt: "You are a physics expert.",
};

this.chatService.getCompletion(sessionId, request).subscribe((response) => {
  console.log(response.content);
});

Ollama (Local Model):

const request = {
  prompt: "Write a haiku about coding",
  model: "llama3.2:latest",
  systemPrompt: "You are a creative poet.",
};

this.chatService.getCompletion(sessionId, request).subscribe((response) => {
  console.log(response.content);
});

Anthropic (Claude):

const request = {
  prompt: "Help me debug this code",
  model: "claude-3-5-sonnet-20241022",
  systemPrompt: "You are an expert programmer.",
};

this.chatService.getCompletion(sessionId, request).subscribe((response) => {
  console.log(response.content);
});

Example 5: Session Management

List All Sessions:

// Get all chat sessions
this.sessionService.getSessions().subscribe((sessions) => {
  sessions.forEach((session) => {
    console.log(`${session.name} - Created: ${session.createdAt}`);
  });
});

Delete a Session:

// Delete a specific session
this.sessionService.deleteSession(sessionId).subscribe(() => {
  console.log("Session deleted successfully");
});

Example 6: Configuration with User Secrets

Setting up OpenAI:

cd RR.AI-Chat/RR.AI-Chat.Api
dotnet user-secrets set "OpenAI:ApiKey" "sk-proj-xxxxxxxxxxxxx"

Setting up Azure AI Foundry:

dotnet user-secrets set "AzureAIFoundry:Url" "https://my-resource.openai.azure.com/"
dotnet user-secrets set "AzureAIFoundry:ApiKey" "your-azure-key"
dotnet user-secrets set "AzureAIFoundry:EmbeddingModel" "text-embedding-ada-002"

Setting up Anthropic:

dotnet user-secrets set "Anthropic:ApiKey" "sk-ant-xxxxxxxxxxxxx"

🔧 Development

Contributing? See our Development Guide for detailed development tips and best practices.

Running Tests

Backend Tests:

cd RR.AI-Chat
dotnet test

Frontend Tests:

cd ai-chat-ui
npm test

Building for Production

Backend:

cd RR.AI-Chat
dotnet publish -c Release -o ./publish

Frontend:

cd ai-chat-ui
npm run build

🧪 Testing

Test Framework

• Backend: The project uses .NET testing frameworks. Test projects can be added following the pattern [ProjectName].Tests
• Frontend: Angular uses Jasmine and Karma for unit testing

Running Backend Tests

cd RR.AI-Chat
dotnet test --verbosity normal

Running Frontend Tests

cd ai-chat-ui
npm test

For continuous test watching during development:

npm test -- --watch

Code Coverage

To generate code coverage reports:

Backend (using dotnet-coverage):

dotnet tool install -g dotnet-coverage
cd RR.AI-Chat
dotnet-coverage collect -f cobertura -o coverage.cobertura.xml dotnet test

Frontend:

cd ai-chat-ui
npm test -- --code-coverage

Coverage reports will be generated in the coverage/ directory.

🐛 Troubleshooting

Common Issues

1. .NET SDK Version Error

Error: The current .NET SDK does not support targeting .NET 10.0

Solution: Install .NET 10.0 SDK from Microsoft's download page.

2. Database Connection Issues

Error: Cannot connect to SQL Server

Solutions:

• Ensure SQL Server is running
• Verify connection string in appsettings.json
• Check if Windows Authentication is enabled (for Integrated Security)
• For Docker SQL Server, ensure proper port mapping

3. CORS Errors

Error: CORS policy blocking requests from frontend

Solutions:

• Verify CorsOrigins in appsettings.json includes your frontend URL
• Ensure the API is running on the expected port
• Check if HTTPS redirects are causing issues

4. AI Service Errors

Error: API key authentication failed

Solutions:

• Verify API keys are correctly set in user secrets
• Check if the AI service endpoint URLs are correct
• Ensure at least one AI service is properly configured

5. Vector Search Issues

Error: Vector search operations failing

Solutions:

• Ensure SQL Server supports Vector Search (SQL Server 2022+)
• Verify EFCore.SqlServer.VectorSearch package is installed
• Check if embedding model is properly configured

6. Node.js/Angular Issues

Error: Node.js version compatibility

Solutions:

• Use Node.js 18+ (recommended: LTS version)
• Clear npm cache: npm cache clean --force
• Delete node_modules and run npm install again

8. Angular MCP CLI Error

Error: Error: Unknown arguments: read-only, mcp

Cause: An older Angular CLI (e.g., v19) is being resolved by npx.

Solutions:

• Configure VS Code MCP to use the workspace-local CLI binary (Windows example):

  • File: .vscode/mcp.json

  • Snippet:

    {
      "servers": {
        "angular-cli": {
          "type": "stdio",
          "command": "ai-chat-ui/node_modules/.bin/ng.cmd",
          "args": ["mcp", "--read-only"]
        }
      }
    }

• Or pin CLI v21 when using npx:

  npx -y @angular/cli@21 mcp --read-only

Docs: https://angular.dev/ai/mcp

7. Port Conflicts

Error: Port already in use

Solutions:

• API: Modify launchSettings.json to use different ports
• Frontend: Use ng serve --port 4201 to specify different port

Logs and Debugging

• API Logs: Check console output when running dotnet run
• Frontend Logs: Open browser developer tools (F12)
• Database: Use SQL Server Management Studio or Azure Data Studio

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Code Style Guidelines

• Backend (.NET): Follow standard C# conventions and SOLID principles
• Frontend (Angular): Follow Angular style guide and use TypeScript strict mode
• Ensure all tests pass before submitting PR
• Add tests for new features
• Update documentation as needed

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Copyright (c) 2025 Rodrigo Ignacio Rojas Garcia

👥 Authors

Rodrigo Ignacio Rojas Garcia - Creator and Maintainer

• GitHub: @RorroRojas3

🙏 Acknowledgments

AI Service Providers

• OpenAI - GPT models and embeddings
• Anthropic - Claude AI models
• Microsoft Azure AI - Azure OpenAI Service
• Ollama - Local AI model runtime

Key Technologies & Libraries

Backend (.NET)

• ASP.NET Core - Web framework
• Entity Framework Core - ORM and database access
• Microsoft.Extensions.AI - AI service abstractions
• OllamaSharp - Ollama .NET client
• Anthropic.SDK - Anthropic .NET SDK
• Swashbuckle - OpenAPI/Swagger documentation
• Hangfire - Background job processing

Frontend (Angular)

• Angular - Frontend framework
• Bootstrap - UI component library
• Bootstrap Icons - Icon library
• highlight.js - Syntax highlighting
• markdown-it - Markdown parser and renderer
• RxJS - Reactive programming library
• MSAL Angular - Microsoft Authentication Library

Database & Search

• SQL Server - Database engine
• EFCore.SqlServer.VectorSearch - Vector search capabilities

Development Tools

• Visual Studio Code - Code editor
• .NET SDK - Development framework
• Node.js - JavaScript runtime
• Angular CLI - Angular development tools

Inspiration

This project combines modern AI capabilities with traditional web development practices to create a flexible, multi-provider chat interface suitable for various AI use cases.

🆘 Support

If you encounter any issues or have questions:

1. Check the Troubleshooting section
2. Review the API documentation when the API is running
3. Create an issue in the GitHub repository

🔗 Useful Links

• .NET 9 Documentation
• Angular Documentation
• Entity Framework Core
• OpenAI API Reference
• Azure OpenAI Service
• Anthropic API
• Ollama Documentation