Summer Note with AI Chatbot
Creating an intelligent and user-friendly AI chatbot doesn’t end at just text replies. Users today expect chat interfaces to support rich text formatting, downloadable outputs, and interactive responses. That’s where Summer Note, a lightweight WYSIWYG editor, comes in handy.
In this tutorial, we will cover:
- How to generate HTML responses from your AI backend (Gemini Vertex AI)
- Render them beautifully using Summer Note on the frontend
- Export those responses to PDF or Word for user download
Backend: Generating Summer Note-Compatible HTML
Ensure your AI engine (e.g., Gemini, GPT, or custom logic) returns HTML-formatted responses that can be rendered directly. Here’s a sample API output format that integrates perfectly with Summer Note:
{
"sender": "Gemini AI",
"message": "<p><strong>Summary:</strong> This document explains the integration of Vertex AI with Spring Boot.</p>"
}
To ensure Gemini always replies in Summer Note-ready HTML, set the instruction in your prompt like this:
instruction-text: |
Always respond using valid HTML compatible with Summer Note WYSIWYG editor.
Use tags like <p>, <strong>, <ul>, <li>, <h1>-<h6>, <pre>, <code>, and inline styles if needed.
Avoid script or iframe tags.
In your Java, Python, or Node.js backend, ensure you pass this instruction into your Gemini request payload or use it as your system prompt.
Frontend: Rendering Chat with Summer Note
We’ll now render this response using Summer Note inside a chat interface.
JavaScript to Display Messages:
function appendMessage(sender, message) {
var div = document.createElement("div");
div.style.marginBottom = "10px";
var summernoteContainer = document.createElement("div");
summernoteContainer.innerHTML = '<strong>' + sender + ':</strong><br><div class="summernote-render">' + message + '</div>';
div.appendChild(summernoteContainer);
chatBody.appendChild(div);
chatBody.scrollTop = chatBody.scrollHeight;
}
Rendering via Summer Note:
$('.summernote-render').each(function () {
$(this).summernote({
toolbar: false,
airMode: true,
disableResizeEditor: true,
height: null,
focus: false
});
});
This renders the Gemini AI output exactly as intended with proper HTML styling.
Exporting Summer Note Content to Word or PDF
Allow your users to download chat responses as Word or PDF files.
Export to Word (.doc):
function exportToWord() {
var htmlContent = $('.summernote-render').html();
var html = "<html><head><meta charset='utf-8'></head><body>" + htmlContent + "</body></html>";
var blob = new Blob(['\ufeff', html], { type: 'application/msword' });
var link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'chat.doc';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
Export to PDF (using jsPDF):
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
function exportToPDF() {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
var htmlContent = $('.summernote-render').html();
doc.html(htmlContent, {
callback: function (doc) {
doc.save('chat.pdf');
},
x: 10,
y: 10
});
}
Security Best Practices
- Use a trusted HTML sanitizer library such as DOMPurify before rendering any user-generated HTML
- Strip any script, iframe, or embed tags before passing to Summer Note
- Use Content-Security-Policy (CSP) headers to restrict what can be executed on your page
Conclusion
By integrating Summer Note in your chatbot interface, you:
- Enhance the user experience with beautifully styled AI responses
- Enable users to download formatted content as Word or PDF
- Support rich documentation, reporting, or chatbot transcription use cases
Whether you are building a legal assistant, a banking chatbot, or a report generator, this setup provides exceptional flexibility and usability.
Author: Team CodeNib – AI Integration Series
Published On: July 2025
0 Comments