Build an AI-Powered Content Creation App in Blazor Using Structured Prompting Webinar Show Notes

Summarize this blog post with:

TL;DR: Learn how to build a Blazor AI content generation application using Syncfusion AI AssistView, structured prompting, and Gemini integration. Explore mode-aware workflows for blogs and knowledge bases, add document attachments as AI context, enable speech-to-text and text-to-speech features, and improve content consistency through structured output templates and guided prompt design.

AI can generate content quickly, but the result may not always match the appropriate purpose, tone, or structure. Without clear guidance, the AI model must decide how the content should be written and organized.

In the webinar on August 4, 2026, Syncfusion® Software Engineer Prabhavathi Kannan demonstrated how structured prompting can create a more guided and consistent content creation experience using the Blazor AI AssistView.

If you missed the webinar or would like to revisit the implementation, watch the recording embedded below or on our YouTube channel.

Session at a glance

This session demonstrated how to:

  • Build a conversational content creation app using the Syncfusion Blazor AI AssistView.
  • Create blog and knowledge base modes with dedicated instructions and prompt suggestions.
  • Generate more consistent results using a structured prompt with a mode-specific output template.
  • Integrate Gemini for AI-powered content generation.
  • Use attachments as reference context.
  • Enable speech-to-text, text-to-speech, and clear prompts.

Time stamps

[00:00] Welcome and session introduction

[00:56] Session agenda and objectives

[01:32] Poll: Common challenges with generic AI prompts

[02:07] Why generic prompts produce inconsistent content

[03:42] Introducing structured prompting

[04:44] Poll: What improves AI consistency?

[05:17] Application architecture overview

[07:19] Prerequisites and project setup

[07:53] Preparing the Blazor project

[10:00] Building the AI AssistView interface

[10:55] Creating content modes for blogs and knowledge bases

[12:49] Building the content type selector

[14:10] Running the initial application

[15:28] Connecting Gemini to structured prompting

[16:19] Building the structured prompt template

[17:40] Sending prompts to Gemini

[19:05] Testing blog content generation

[20:53] Testing knowledge base generation

[22:42] Adding document attachment support

[23:06] Building the attachment API controller

[24:56] Connecting attachments to AI AssistView

[26:50] Reading uploaded reference documents

[28:21] Adding attachment content to structured prompts

[30:18] Processing attachments during prompt generation

[30:51] Testing attachment-based content generation

[33:34] Adding speech-to-text and text-to-speech

[35:59] Testing voice features and conversation controls

[38:47] Key takeaways and best practices

[40:14] Closing remarks and Q&A

The challenge with generic prompts

Consider a user entering the following request into an AI-powered content creation application:

“Create content about our latest product update.”

The request provides a topic but does not specify the content type, intended audience, tone, level of detail, or expected structure. As a result, the AI model must make those decisions itself.

One response may be brief and promotional, while another may be detailed, technical, or organized differently. The challenge is not generating content; it is providing enough structured guidance to produce consistent, purpose-specific results.

Why structured prompting matters

Structured prompting gives the AI model a clearer content guide. Instead of sending only the user’s request, the application creates a more complete instruction that combines:

  • The model’s role.
  • Formatting and accuracy rules.
  • The expected output structure.
  • The user’s request.
  • Optional reference content.

This creates clear responsibilities: The user defines what content is needed, the application defines how it should be produced, the AI model generates the first draft, and the user reviews and controls the final result.

The goal is to make prompt design an intentional part of application design.

Introducing mode-aware prompting

Mode-aware prompting allows the application to adjust the system instruction, prompt suggestions, and output template based on the selected workflow.

Blog mode uses a content-writer instruction to produce reader-friendly content, while knowledge base mode uses a support-writer instruction focused on resolution and troubleshooting.

Switching modes clears the previous prompt history, preventing the previous workflow’s conversation from carrying over. This configuration-based design also makes it easier to add workflows such as for emails, release notes, or product descriptions.

How the application works

  1. The Syncfusion Blazor AI AssistView collects the user’s request.
  2. The selected mode provides its instructions, prompt suggestions, and output template.
  3. The application builds the structured prompt using shared rules, the mode-specific output template, the user’s request, and optional attachment content.
  4. The configured AI model generates the response, which is displayed in the AI AssistView.

The webinar used Gemini 3.5 Flash, but the workflow can be adapted to models from other AI providers.

Prerequisites

  • .NET 10 SDK (or your target SDK).
  • A Blazor web app.
  • Google.GenAI configured with an API key (Gemini).
  • A valid Syncfusion license key.
  • Browser permission for microphone and speech synthesis.

Developers who do not already have a valid Syncfusion license can start with the 30-day free trial.

What we built

The webinar divided the implementation into four progressive runs.

Run 1

Implementation highlights

  • Rendered the Syncfusion Blazor AI AssistView.
  • Defined blog and knowledge base modes with dedicated system instructions and prompt suggestions.
  • Added a content type selector to switch modes and update the displayed suggestions.
  • Cleared the previous prompt history when the selected mode changed.

Demo result: Blog mode was selected by default and displayed blog-specific suggestions. Switching to knowledge base mode cleared the previous history and displayed suggestions for the selected workflow.

Run 2

Implementation highlights

  • Connected the selected mode’s system instruction to the AI request.
  • Built the structured prompt using shared rules, the mode-specific output template, and the user’s request.
  • Integrated Gemini and added stop-responding behavior.

Demo result: The application generated specific blog and knowledge base content using a suggested prompt and a manually entered prompt.

Run 3

Implementation highlights

  • Added endpoints for saving and removing attachments.
  • Stored uploaded files in the App_Data/Attachments directory with file name and path validation.
  • Read supported files as UTF-8 text.
  • Added the extracted content to the structured prompt as reference context.

Demo result: The application used a Markdown (.md) file as reference material and generated a structured blog post based on the document’s content.

Run 4

Implementation highlights

  • Added speech-to-text, text-to-speech, and clear prompts.
  • Added a banner introducing the voice capabilities.

Demo result: Users could dictate prompts, listen to generated responses, and clear the conversation without changing the selected content mode.

Production considerations

For production use, consider:

  • Securing attachment endpoints.
  • Supporting additional document formats.
  • Adding a model/provider abstraction.
  • Logging prompts and responses for evaluation.
  • Reviewing generated content before publishing.

Q&A

Q: Why Gemini AI?

A: Gemini provides a modern and developer-friendly API for building AI-powered applications and integrating large language models into Blazor workflows. For this webinar, we used Gemini to demonstrate how structured prompting can work with a different AI provider while showcasing the flexibility of the AI AssistView architecture. The same structured prompting approach can also be adapted to Azure OpenAI and other compatible AI services.

Q: You are using VS Code and not Syncfusion Code Studio—any special reason for that? Wouldn’t Code Studio be the better choice??

A: The sample is designed to work regardless of the development environment, so we used VS Code for demonstration purposes because it is widely used by developers across platforms. Syncfusion Code Studio is also an excellent choice, especially for developers looking for an AI-assisted development experience with built-in support for modern application workflows. Both tools can be used successfully to build and run this application.

Q: Can you create an application using Visual Studio Community 2026?

A: Absolutely. The application can be built using Visual Studio Community 2026, Visual Studio Professional, Visual Studio Enterprise, or VS Code. As long as the required .NET SDK, NuGet packages, and AI provider configuration are available, the sample will work in your preferred development environment.

Q: If you ask to generate the same KB article several times in a row, how similar will the responses be and how do you make them more consistent?

A: AI models are probabilistic, so even with the same prompt, the wording, examples, order of sections, and level of detail may vary between runs. However, with structured prompting, the overall format and key content should become much more consistent.

To improve consistency, you can:

  • Use a fixed output template.
  • Provide detailed system instructions.
  • Include examples (few-shot prompting).
  • Reduce model randomness.
  • Use reference content.
  • Apply validation rules.

Q: How do I build more complicated API requests, e.g., sending different kinds of files, extracting particular parts of forms or data from these files, OCR, or defining JSON schema to be attached in an API request?

That’s where structured prompting becomes part of a larger AI workflow rather than just text generation. For complex scenarios, we typically preprocess files before sending data to the LLM. For example, PDFs, images, Word documents, and forms can be uploaded, OCR can extract text, and document-processing services can identify specific fields such as invoice numbers. The extracted content is then passed to the model as structured context.

For reliable data extraction, instead of asking the model to return free-form text, we define a JSON schema and instruct the model to produce output that matches that schema. This makes the response easier to validate, store in databases, and integrate with downstream systems.

In a Blazor application, the AI AssistView can serve as the user interface, while separate services handle document processing, OCR, schema validation, and model integration behind the scenes.

Q: Was the voice assistance a service from Gemini, or is voice help assistance from Cognitive Services (Microsoft)?

A: In the demo, SpeechRecognition and SpeechSynthesis were used. Those are browser-based web speech APIs that provide speech-to-text and text-to-speech capabilities directly through the browser.

Gemini’s role is typically the AI content generation part. Microsoft Cognitive Services (Azure AI Speech) would only be involved if the application explicitly integrates Azure Speech APIs.

Q: I am using OpenAI and Foundry. Is the Gemini AI model inside your demo paid?

A: Currently, the demo is using the free tier, with no billing set up. Gemini API access is free but subject to rate limits for the model used in the demo, Gemini 3.5 Flash. A paid tier would be needed only for higher usage limits.

Final thoughts

Structured and mode-aware prompting helps transform a basic AI interaction into a guided, purpose-specific content workflow. Combined with Syncfusion Blazor AI AssistView capabilities such as attachments, speech-to-text, text-to-speech, and clear prompts, the application becomes more practical and user-friendly.

Related resources

Be the first to get updates

Prabhavathi KannanPrabhavathi Kannan profile icon

Meet the Author

Prabhavathi Kannan

Prabhavathi Kannan serves on Syncfusion’s Essential Studio growth team, bringing focused expertise in JavaScript and Angular to support developer success and product adoption. Passionate about front-end innovation, she contributes to enabling teams worldwide to create responsive, scalable web experiences with Syncfusion’s comprehensive UI controls and tools.

Leave a comment