The Future of AI: Creating a Web Application with Vibe Coding

Microsoft

Sep 04, 2025

The Future of AI blog series is an evolving collection of posts from the AI Futures team in collaboration with subject matter experts across Microsoft. In this series, we explore tools and technologies that will drive the next generation of AI. Explore more at: Collections | Microsoft Learn

The Future of AI: Creating a Web Application with Vibe Coding

In this article I am sharing my experience of creating a web application by providing natural language instructions to an agent created with GPT-5 (Preview) in Azure AI Foundry Models, built with Visual Studio Code. This web application demonstrates the capabilities of a new service in Azure AI Foundry and can be used by customers to onboard their users.

Enterprises and organizations use machine translation for a variety of use cases, including short text phrase translation, conversation translation, webpage translation, document translation, and image translation. Each scenario has different business criticalities, functional and nonfunctional requirements.

When it comes to the underlying AI technologies powering these translations:

General Neural Machine Translation (NMT) models produce deterministic translation with low latency
Generative AI large language models (LLMs) produce more natural and fluent translations, and offer diverse translations based on specific instructions- but they require more time to generate results.

The new Azure AI Translator gives customers the flexibility to choose between different AI models to address a wide range of translation needs. It also offers new capabilities such as tone translation, gender translation, and adaptive custom translation. Adaptive custom translation identifies relevant data from the customer’s translation memory and uses it as a few-shot reference to produce customized translation.

In this blog post, I am sharing how easy it was to build a web application using vibe coding to demonstrate the service's capabilities.

Environment Setup

I used Visual Studio Code with the GitHub Copilot, the ‘agent’ mode and configured it to use GPT-5 (Preview) in Azure OpenAI.

Instructions

Core instruction

On providing comprehensive instructions, the Copilot agent created a complete web application using the new Translator API.

Create a .NET web application with a webpage.
The webpage has an interface taking following inputs
a)	Source text – maximum of 5000 characters
b)	Choose from a list of source languages
c)	Choose from a list of target languages
d)	Optionally choose from a list of models deployed
e)	Optionally choose from a list of gender
f)	Optionally choose from a list of tones
On click of a ‘Translate’ button in the webpage, a rest API call is made to Translate method using below curl command as reference

curl --request POST \
  --url 'https://<your-resource-name>.cognitiveservices.azure.com/translator/text/translate?api-version=2025-05-01-preview' \
  --header 'Content-Type: application/json' \
  --header 'Ocp-Apim-Subscription-Key: :<your-key>' \
  --header 'Ocp-Apim-Subscription-Region: <your-resource-region>' \
  --data '[
  {
    "Text": "Doctor is available next Monday. Do you want to schedule an appointment?",
    "language": "en",
    "targets": [
      {
        "language": "es",
        "deploymentName": "gpt-4o-mini",
        "gender": "female"
      },
      {
        "language": "es",
        "deploymentName": "gpt-4o-mini",
        "tone": "informal"
      }
    ]
  }
]'

Get the response and show the following in the webpage
a)	Translated text from response body
b)	Characters charged from response header
c)	Source tokens charged from response header
d)	Target tokens charged from response header
e)	Response time 
f)	x-requestid from response header

I liked the way the agent took confirmation from me at every stage of the app creation.

Here is the first look of the web application built by the agent without making any corrections. It’s cool.

Screenshot of raw web application created with an initial instruction.

Finetuning the user experience – inputs

Now comes the interesting part of improving the application experience through series of natural language instructions.

1.	model can take values gpt-4o, and gpt-4o-mini
2.	change the label to 'Model (optional)' instead of 'Model deployment (optional)'
3.	gender can take values female, male, and neutral 
4.	tone can take values – formal, informal and neutral
5.	keep source language and target language side by side instead of one below the other.
6.	keep Model, Gender, and Tone side by side instead of one below the other.

Updating the code

Since the original Copilot agent instructions had placeholder values for endpoint, key, and region, they needed to be updated. While this could have been done by providing updated instructions, I preferred to manually edit the values directly in the appsettings.json file.

The original instruction to Copilot the agent did not specify the expected API response in detail, so the agent assumed certain header name-value pairs — such as x-metered-usage, x-source-tokens, and x-target-tokens. However, the actual API response used different header names. To correct this, I provided two separate instructions. The agent has maintained the context across both and successfully updated the code.

1.	response header has name sourcecharacterscharged not x-metered-usage.
2.	Likewise, response header has names sourcetokenscharged and targettokenscharged

Now we have a functional web application.

Screenshot of web application after finetuning code using vibe coding.

Finetuning the user experience – response

Now let’s improve the user experience of the response by providing instructions to the agent.

1.	show the usage and headers in separate line instead of single text.
2.	Collapse the Raw response by default.

Agent intelligently suggested that it will collapse the Raw response by default using a <details> element and auto-expand it on errors to aid debugging. That’s cool.

Conclusion

This final web application was built entirely through vibe coding using the GPT-5 Agent in Visual Studio Code, showcasing how effortlessly advanced service capabilities can be brought to life.

Screenshot of web application after improving UX of API response using vibe coding.

While coding experience isn’t strictly required to build such web applications, having coding skills enables efficient development, helps debug issues, improves quality, and applying best coding practices.