Building Intelligent Form Suggestions using OpenAI APIs

Rajesh Gami

Introduction

Forms remain a central part of every web application—registration forms, checkout forms, CRM inputs, audit forms, and operational systems. However, users often struggle with lengthy forms, unclear fields, or repetitive data entry. Intelligent form assistance can significantly improve usability by predicting user inputs, auto-suggesting values, validating entries, and reducing time required for completion.

In this article, we explore how to build AI-driven form suggestions using OpenAI APIs in a modern web stack (Angular + ASP.NET Core + SQL Server). The goal is to show beginners and experienced developers how to incorporate AI capabilities into everyday business workflows.

Problem Statement

Traditional forms require manual entry for every field. Users face issues such as:

Repetitive data entry.
Difficulty in understanding field expectations.
Selecting values from long dropdowns.
Incorrect formatting or incomplete information.

We want to design a system where AI can:

Predict likely values based on user behaviour and past history.
Provide contextual hints.
Suggest auto-complete options.
Validate entries intelligently.
Learn continuously from new inputs.

Proposed Solution

We will integrate OpenAI models (GPT-4.1, GPT-4o, or any required model) with an ASP.NET Core backend and Angular frontend. The form data and user preferences will be stored in SQL Server. AI suggestions will be generated using OpenAI REST API.

Key features

AI-driven suggestions for each form field.
Domain-aware suggestions (e.g., aviation, healthcare, retail).
Smart validation and formatting recommendations.
Secure data handling using backend-based API calls.
Configurable prompts for different forms.

High-Level Workflow Diagram

                +-------------+
                |   Browser   |
                | (Angular)   |
                +------+------+
                       |
                       | 1. User starts filling form
                       |
                +------v------+
                | ASP.NET API |
                +------+------+
                       |
                       | 2. Request suggestions for fields
                       |
                +------v------+
                |  OpenAI API |
                +------+------+
                       |
                       | 3. AI returns predicted suggestions
                       |
                +------v------+
                | ASP.NET API |
                +------+------+
                       |
                       | 4. Send suggestions to Angular app
                       |
                +------v------+
                |   Browser   |
                | (Angular)   |
                +-------------+

Architecture Diagram (Visio Style)

+--------------------------------------------------------+
|                    Presentation Layer                  |
|                (Angular 17+ Frontend SPA)              |
|  - Dynamic Form Controls                                |
|  - API Services                                         |
|  - Suggestion UI/UX                                     |
+----------------------------+---------------------------+
                             |
                             | REST API Calls
                             |
+----------------------------v---------------------------+
|                      Application Layer                 |
|                  (ASP.NET Core Web API)                |
|  - AIService (OpenAI Integration)                       |
|  - SuggestionController                                  |
|  - ValidationService                                     |
|  - Business Rules Engine                                 |
+----------------------------+---------------------------+
                             |
                             | Database + AI API Fetch
                             |
+----------------------------v---------------------------+
|                       Data Layer                       |
|                      (SQL Server)                      |
|  - UserHistory Table                                     |
|  - FormDefinitions Table                                  |
|  - FieldMetadata Table                                   |
|  - SuggestionLogs Table                                  |
+----------------------------+---------------------------+
                             |
                             | External API Call
                             |
+----------------------------v---------------------------+
|                        OpenAI API                      |
|  - GPT Models                                             |
|  - Embeddings                                             |
|  - Fine-tuning (Optional)                                |
+--------------------------------------------------------+

ER Diagram

+--------------------+         +---------------------+
|   UserHistory      |         |   FormDefinitions   |
+--------------------+         +---------------------+
| UserHistoryId (PK) |   --->  | FormId (PK)         |
| UserId             |         | FormName            |
| FieldId (FK)       |         | Description         |
| InputValue         |         | CreatedDate         |
| Timestamp          |         | ModifiedDate        |
+--------------------+         +---------------------+

               +---------------------+
               |    FieldMetadata    |
               +---------------------+
               | FieldId (PK)        |
               | FormId (FK)         |
               | FieldName           |
               | FieldType           |
               | Required            |
               | ValidationRules     |
               +---------------------+

+--------------------+
|   SuggestionLogs   |
+--------------------+
| SuggestionId (PK)  |
| FieldId (FK)       |
| SuggestedValue     |
| RawPrompt          |
| RawResponse        |
| Timestamp          |
+--------------------+

Sequence Diagram

User            Angular App        ASP.NET API         OpenAI API
 |                   |                   |                  |
 | Start Typing      |                   |                  |
 |------------------>|                   |                  |
 |                   | Call GetSuggestions                |
 |                   |------------------>|                  |
 |                   |                   | Prepare Prompt  |
 |                   |                   |----------------->|
 |                   |                   |                  |
 |                   |                   | AI Response     |
 |                   |                   |<-----------------|
 |                   | Receive suggestions                  |
 |                   |<------------------|                  |
 | Display suggestions to user                               |
 |<---------------------------------------------------------|

Implementation Steps

1. Setup OpenAI Integration in ASP.NET Core

public class AIService
{
    private readonly HttpClient _httpClient;
    private readonly IConfiguration _config;

    public AIService(HttpClient client, IConfiguration config)
    {
        _httpClient = client;
        _config = config;
    }

    public async Task<string> GetSuggestionAsync(string fieldName, string userInput)
    {
        var prompt = $"Suggest likely value for field '{fieldName}' based on input: {userInput}";

        var body = new
        {
            model = "gpt-4.1",
            messages = new[]
            {
                new { role = "user", content = prompt }
            }
        };

        var response = await _httpClient.PostAsJsonAsync(
            "https://api.openai.com/v1/chat/completions",
            body
        );

        var result = await response.Content.ReadFromJsonAsync<dynamic>();
        return result.choices[0].message.content;
    }
}

2. Angular Service to Fetch Suggestions

getSuggestions(fieldName: string, input: string): Observable<any> {
  return this.http.post('/api/suggestions', {
    fieldName,
    userInput: input
  });
}

3. Dynamic Suggestion Rendering

onFieldChange(fieldName: string, value: string) {
  this.service.getSuggestions(fieldName, value).subscribe(res => {
    this.suggestions[fieldName] = res;
  });
}

Use Cases

1. Address Suggestions

AI predicts locality, city, pin code, state, country.

2. Product Entry Suggestions

Useful for e-commerce product creation forms.

3. Customer CRM Forms

Autofill gender, city, category, customer type.

4. Aviation / Warehouse Forms

Predict part numbers, ATA codes, bin locations.

Security Considerations

Never send sensitive user data to OpenAI.
Use backend to store API keys—not frontend.
Mask personally identifiable information.
Implement request throttling.
Log only anonymised suggestions.

Best Practices

Keep prompts short and domain focused.
Cache frequent suggestions.
Maintain suggestion logs for audit.
Train embeddings if domain-specific data is large.
Enable modular prompts for different forms.

Conclusion

Intelligent form suggestions driven by OpenAI can dramatically improve user productivity and experience. By integrating Angular, ASP.NET Core, SQL Server, and OpenAI, developers can create smart, adaptive forms that guide users, reduce errors, and collect more consistent data.

ASP.NET Core AI Angular OpenAIform suggestions

Comments

Join the conversation! Your thoughts help the community grow.