Modern enterprise applications increasingly rely on smart automation to enhance user experience. One powerful capability is intelligent form suggestions—where your system predicts field values, autofills information, recommends dropdown options, or validates entries using AI.
This article explains how to implement intelligent form suggestions using OpenAI APIs in an Angular + ASP.NET Core stack, including workflows, architecture diagrams, and code samples.
1. What Are Intelligent Form Suggestions?
Intelligent Form Suggestions (IFS) use AI models to assist users while filling forms by providing:
Autofill suggestions
Predictive dropdown values
Contextual recommendations
Error detection or validation
Summaries or derived values
Smart defaults based on user history
Example use cases
2. High-Level Architecture
┌─────────────────────┐ API Call ┌───────────────────────┐│ Angular UI │ ─────────────▶ │ ASP.NET Core Backend ││(Captures Form Data) │ │(Prepares Prompt) │└─────────────────────┘ └─────────┬─────────────┘
|
| OpenAI API Request
▼
┌─────────────────────────┐
│ OpenAI Model │
│ (GPT-5.1 or fine-tuned) │
└─────────┬──────────────┘
|
▼
┌─────────────────────┐ AI Suggestions ┌──────────────────────┐│ Angular UI │ ◀──────────────────── │ ASP.NET Core Backend ││(Displays Suggestions)│ └──────────────────────┘└─────────────────────┘
3. Workflow Diagram
┌─────────────────────────────────────────┐
│ User starts filling a form in Angular │
└─────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────┐
│ Angular collects partial form data │
└─────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────┐
│ Angular sends data to API (/ai/suggest)│
└─────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────┐
│ API builds prompt with business context │
└─────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────┐
│ API calls OpenAI GPT-5.1 model │
└─────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────┐
│ Model returns JSON suggestions │
└─────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────┐
│ Angular shows inline field suggestions │
└─────────────────────────────────────────┘
4. Designing the Prompt for High Accuracy
Example prompt sent from backend:
You are an AI assistant helping to auto-suggest form values.
The user is filling a Shipping Work Order form.
Here is the partial data:
{
"customerName": "John Mathew",
"country": "USA",
"packageWeight": 12
}
Predict the following:
- Suggested Shipping Method
- Recommended Packaging Type
- Is Insurance Required (Yes/No)
- Any validation warnings
Return JSON only:
{
"shippingMethod": "",
"packageType": "",
"insuranceRequired": "",
"warnings": []
}
Best practices
5. ASP.NET Core Backend Implementation
Install SDK
dotnet add package OpenAI
C# Controller
[HttpPost("suggest")]
public async Task<IActionResult> GetFormSuggestions([FromBody] FormInput input)
{
var client = new OpenAIClient(Environment.GetEnvironmentVariable("OPENAI_API_KEY"));
var prompt = @$"
You are an AI assistant for form suggestions.
Input: {JsonConvert.SerializeObject(input)}
Return JSON only:
{{
""shippingMethod"": """",
""packageType"": """",
""insuranceRequired"": """",
""warnings"": []
}}";
var req = new ChatCompletionRequest
{
Model = "gpt-5.1",
Messages = new[]
{
new ChatMessage("system", "You return JSON only."),
new ChatMessage("user", prompt)
}
};
var response = await client.Chat.CreateAsync(req);
var json = response.Choices.First().Message.Content;
return Ok(JsonConvert.DeserializeObject<dynamic>(json));
}
6. Angular Frontend Implementation
Service
suggestForm(data: any): Observable<any> {
return this.http.post('/api/ai/suggest', data);
}
Component
onFieldChange() {
const partialData = this.formGroup.value;
this.aiService.suggestForm(partialData)
.subscribe(s => {
this.suggestions = s;
});
}
UI Example
<input formControlName="shippingMethod" [placeholder]="suggestions?.shippingMethod" />
<div class="warning" *ngFor="let w of suggestions?.warnings">{{w}}</div>
7. Improving Suggestion Accuracy
✔ Add domain data
✔ Add industry rules
✔ Add sample valid/invalid examples
✔ Use fine-tuned models if needed
✔ Use embeddings for semantic similarity
✔ Cache suggestions to reduce cost
8. Security Considerations
Enable rate-limiting
Mask sensitive data before sending to AI
Avoid sending passwords, card numbers
Use Azure API Management or APIM gateway
Encrypt logs if prompts stored
9. When to Use Fine-tuning vs Few-shot Prompts
| Scenario | Use Fine-Tuning | Use Prompting |
|---|
| Repetitive domain-specific forms | ✔ | |
| Dynamic, varied forms | | ✔ |
| Requires strict structured output | ✔ | ✔ |
| Large enterprise datasets | ✔ | |
10. Final Best Practices Checklist
Backend
Frontend
Overall
Conclusion
By integrating OpenAI APIs into your Angular + ASP.NET Core application, you can implement smart, contextual form suggestions that significantly enhance usability, prevent errors, and accelerate user workflows.
This architecture is scalable, secure, and works for enterprise applications in logistics, manufacturing, finance, HR, and customer onboarding.