New to Telerik Document Processing? Download free 30-day trial

Telerik Document Processing - SpreadProcessing Analyse with Agent Tools

Loading Demo...

EXAMPLE
VIEW SOURCE

                    analyse_with_agent_tools.cshtml
                
                    AnalyseWithAgentToolsController.cs
                
                    DemoSession.cs
                
                    DemoSessionBase.cs
                
                    DemoSessionManager.cs
                
                    SpreadDemoSession.cs
                
                    AgentResponseHelper.cs

API REFERENCE

Analyse with Agent Tools

Chat with the AI assistant to analyze spreadsheet data

Telerik DPL AI Assistant

The Telerik DPL AI Assistant is here to help you analyze spreadsheet data.

Try these prompt suggestions:

AI responses can be inaccurate or misleading

.main__container { width: 100%; font-family: 'Roboto', Arial, sans-serif; font-size: 14px; display: flex; gap: 14px; } .main__panel--left { display: flex; align-items: center; justify-content: flex-start; flex-grow: 1; flex-direction: column; min-width: 0; } .main__container input, .main__container textarea { font: inherit; color: inherit; } .main__heading--document { text-align: center; font-size: 24px; font-weight: 700; width: 540px; margin-top: -14px; margin-bottom: 20px; } .main__list { list-style: none; margin: 0; padding: 0; } .main__description--document { display: flex; width: 540px; align-items: center; color: #3D3D3D; padding: 4px; text-align: justify; margin-bottom: 8px; font-size: 15px; font-weight: bold; } #documentImageContainer { width: 540px; height: 679px; border: 1px solid #e0e0e0; background-color: #f5f5f5; overflow: hidden; display: flex; align-items: flex-start; justify-content: center; } #documentImage { width: 100%; height: auto; display: block; } .main__panel--right { display: flex; flex-shrink: 0; width: 400px; flex-direction: column; } .main__controls-container { background-color: #FAFAFA; border: 1px solid #00000014; border-top: none; padding: 8px 11px; } .main__response-container { text-align: center; } .main__response-header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; border: 1px solid #21252921; padding: 5px 20px; max-height: 40px; } .main__response-header > div { display: flex; align-items: center; gap: 8px; } .main__header-actions { display: flex; gap: 4px; } .main__response-title { font-size: 16px; color: #FF6358; } .main__collapse-header { display: flex; align-items: center; cursor: pointer; user-select: none; padding: 2px 0; } .main__collapse-header span:first-child { margin-right: 8px; transition: transform 0.3s ease; } .main__collapse-header span:first-child.rotated { transform: rotate(180deg); } .main__collapsible-buttons { display: flex; flex-direction: column; gap: 10px; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease; max-height: 200px; opacity: 1; margin-top: 10px; } .main__collapsible-buttons.collapsed { max-height: 0; opacity: 0; margin-top: 0; } .main__response-area { height: 521px; display: flex; flex-direction: column; width: 100%; min-height: 150px; overflow-y: auto; padding: 0px 11.5px 0px 16px; border-top: none; border-bottom: none; border-right: none; background-color: #f9f9f9; font-family: inherit; white-space: pre-wrap; word-wrap: break-word; } .main__button-container { display: flex; flex-direction: column; text-align: left; } .main__button--suggestion { justify-content: left; height: 28px; border: 1px solid #00000033; color: #3D3D3D; background-color: #FFFFFF80; text-align: left; white-space: normal; overflow: hidden; text-overflow: ellipsis; } .main__button--suggestion-high { height: 44px; } .main__input-group { display: flex; align-items: stretch; gap: 10px; height: 114px; padding: 8px; border: 1px solid #c9c9c9; border-radius: 4px; background-color: #fff; } .main__input { flex: 1; border: none; outline: none; resize: none; } .main__input-controls { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: space-between; } .main__button--submit { height: 30px; width: 30px; border: none; background: transparent; padding: 0; } .main__input-clear { height: 30px; width: 30px; } .main__question-info { display: flex; align-items: center; justify-content: flex-start; color: #3D3D3D; font-size: 12px; padding: 4px; margin-top: 8px; } .main__question-info > .k-icon { font-size: 14px; } .main__question-info > span { margin-left: 3px; } .main__response-placeholder { height: 192px; display: flex; flex-direction: column; border: 1px solid transparent; gap: 12px; border-radius: 8px; background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #FF635880, #0357FF80); background-origin: border-box; background-clip: content-box, border-box; } .main__response-placeholder > div { padding: 14.5px; } .main__response-placeholder > img { margin-top: 16px; height: 75px; width: auto; } .main__skeleton-placeholder { display: flex; flex-direction: column; border: 1px solid transparent; width: 100%; padding: 8px 16px 16px 16px; border-radius: 8px; background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #FF635880, #0357FF80); background-origin: padding-box, border-box; background-clip: padding-box, border-box; } .main__skeleton-title > img { height: 16px; } .main__skeleton-title { display: flex; gap: 10px; } .main__skeleton-content { margin-top: 4px; display: flex; flex-direction: column; gap: 8px; border-radius: 4px; } .k-skeleton-rectangle { border-radius: 4px; } .main__response-command { align-self: flex-end; max-width: 304px; text-align: left; background-color: #E7F1F7; border-radius: 8px; padding: 4px; margin-top: 24px; margin-bottom: 24px; } .main__response-command > p { padding: 4px; line-height: 142%; margin: 0; } .main__response-bubble { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 8px 16px 16px 16px; border-radius: 8px; border: 1px solid transparent; background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #FF635880, #0357FF80); background-origin: padding-box, border-box; background-clip: padding-box, border-box; } .main__bubble-title { display: flex; flex-direction: row; gap: 10px; } .main__bubble-title > img { height: 16px; } .main__bubble-text, .main__bubble-error { line-height: 1.42; text-align: left; vertical-align: middle; word-break: break-word; } .main__bubble-error { color: #CA1400; } .main__bubble-warning { line-height: 1.42; text-align: left; vertical-align: middle; word-break: break-word; color: #FF8A00; background-color: #FFF3E6; padding: 8px; border-radius: 4px; border-left: 4px solid #FF8A00; } .main__bubble-controls { display: flex; gap: 10px; } .main__tool-bubble { border: 1px solid #d0d7de; border-radius: 6px; padding: 8px 12px; margin: 4px 0; background-color: #f6f8fa; font-size: 12px; font-family: 'Consolas', 'Courier New', monospace; text-align: left; } .main__tool-header { display: flex; align-items: center; gap: 6px; font-weight: 600; font-family: 'Roboto', Arial, sans-serif; color: #5746af; margin-bottom: 4px; } .main__tool-header .k-icon { font-size: 14px; } .main__tool-name { color: #5746af; } .main__tool-params { padding-left: 20px; } .main__tool-param { line-height: 1.5; word-break: break-all; } .main__tool-param-key { color: #0550ae; } .main__tool-param-value { color: #24292f; } .main__tool-result-text { word-break: break-word; white-space: pre-wrap; line-height: 1.5; } .main__tool-result--success { border-left: 3px solid #1a7f37; } .main__tool-result--success .main__tool-header { color: #1a7f37; } .main__tool-result--error { border-left: 3px solid #CA1400; } .main__tool-result--error .main__tool-header { color: #CA1400; } .main__response-area::-webkit-scrollbar { width: 6px; } .main__response-area::-webkit-scrollbar-thumb { background-color: rgba(83, 96, 113, 0.53); border-radius: 7px; } .main__response-scroll { padding: 16px 5px 16px 0px; background: #f9f9f9; border-right: 1px solid #00000014; border-bottom: 1px solid #00000014; border-left: 1px solid #00000014; } .main__question-container { margin-bottom: 8px; } .k-button-clear-primary:focus::after { display: none !important; } $(document).ready(function () { var responseArea = $("#responseContent"); var downloadUrl = '/spreadprocessing/getcurrentxlsx'; var receiveQuestionUrl = '/spreadprocessing/receivespreadquestion'; var resetSessionUrl = '/spreadprocessing/resetspreadsession'; var warmupStatusUrl = '/spreadprocessing/spreadwarmupstatus'; var lastQuestion = null; function getAntiForgeryToken() { return $('input[name="__RequestVerificationToken"]').val(); } $.ajaxSetup({ beforeSend: function (xhr, settings) { if (settings.type === 'POST' && !this.crossDomain) { var token = getAntiForgeryToken(); if (token) { xhr.setRequestHeader("X-CSRF-TOKEN", token); } } } }); $.ajax({ url: warmupStatusUrl, type: "GET", success: function(r) { if (!r.ready) { $(".main__button--submit").prop('disabled', true).css('opacity', '0.5'); var pollInterval = setInterval(function() { $.ajax({ url: warmupStatusUrl, type: "GET", success: function(r2) { if (r2.ready) { clearInterval(pollInterval); $(".main__button--submit").prop('disabled', false).css('opacity', '1'); } }}); }, 2000); } }}); initializeCollapse(); function initializeCollapse() { $(".main__collapse-header").on("click", function () { var buttons = $(".main__collapsible-buttons"); var chevron = $(".main__chevron-icon"); if (buttons.hasClass("collapsed")) { buttons.removeClass("collapsed"); chevron.removeClass("rotated"); } else { buttons.addClass("collapsed"); chevron.addClass("rotated"); } }); } function disableControls() { $(".main__button--submit").prop('disabled', true).css('opacity', '0.5'); $(".main__input-clear").prop('disabled', true).css('opacity', '0.5'); $(".main__button--suggestion").prop('disabled', true).css('opacity', '0.5'); } function enableControls() { $(".main__button--submit").prop('disabled', false).css('opacity', '1'); $(".main__input-clear").prop('disabled', false).css('opacity', '1'); $(".main__button--suggestion").prop('disabled', false).css('opacity', '1'); } function escapeHtml(text) { var div = document.createElement('div'); div.appendChild(document.createTextNode(text)); return div.innerHTML; } function appendUserBubble(text) { responseArea.append( '<div class="main__response-command"><p>' + escapeHtml(text) + '</p></div>'); } function appendAssistantBubble(text) { responseArea.append( '<div class="main__response-bubble">' + '<div class="main__bubble-title">' + '<img src="/shared/web/pdfprocessing/dpl_ai_assistant.svg" />' + '<span>AI Assistant</span>' + '</div>' + '<div class="main__bubble-text">' + escapeHtml(text).replace(/\n/g, '<br>') + '</div>' + '<div class="main__bubble-controls">' + '<button type="button" class="main__bubble-copy k-button k-button-md k-rounded k-button-clear">' + '<span class="k-icon k-i-copy" title="Copy to clipboard"></span>' + '</button>' + '<button type="button" class="main__bubble-retry k-button k-button-md k-rounded k-button-clear">' + '<span class="k-icon k-i-reload" title="Retry"></span>' + '</button>' + '</div>' + '</div>'); } function appendToolCallBubble(name, args) { var paramsHtml = ''; if (args) { for (var key in args) { if (args.hasOwnProperty(key)) { paramsHtml += '<div class="main__tool-param">' + '<span class="main__tool-param-key">' + escapeHtml(key) + ':</span> ' + '<span class="main__tool-param-value">' + escapeHtml(args[key]) + '</span>' + '</div>'; } } } responseArea.append( '<div class="main__tool-bubble">' + '<div class="main__tool-header">' + '<span class="k-icon k-i-gear"></span>' + '<span class="main__tool-name">' + escapeHtml(name) + '</span>' + '</div>' + (paramsHtml ? '<div class="main__tool-params">' + paramsHtml + '</div>' : '') + '</div>'); } function appendToolResultBubble(result, isError) { var cssClass = isError ? 'main__tool-result--error' : 'main__tool-result--success'; var icon = isError ? 'k-i-x-outline' : 'k-i-check-outline'; responseArea.append( '<div class="main__tool-bubble ' + cssClass + '">' + '<div class="main__tool-header">' + '<span class="k-icon ' + icon + '"></span>' + '<span>Result</span>' + '</div>' + '<div class="main__tool-result-text">' + escapeHtml(result) + '</div>' + '</div>'); } function renderSegments(segments) { if (!segments || !segments.length) return; for (var i = 0; i < segments.length; i++) { var seg = segments[i]; if (seg.type === 'text') { appendAssistantBubble(seg.text); } else if (seg.type === 'toolCall') { appendToolCallBubble(seg.name, seg.arguments); } else if (seg.type === 'toolResult') { appendToolResultBubble(seg.result, seg.isError); } else if (seg.type === 'warning') { appendErrorBubble(seg.text, true); } } responseArea.scrollTop(responseArea[0].scrollHeight); } function appendErrorBubble(text, isWarning) { var errorClass = isWarning ? "main__bubble-warning" : "main__bubble-error"; responseArea.append( '<div class="main__response-bubble">' + '<div class="main__bubble-title">' + '<img src="/shared/web/pdfprocessing/dpl_ai_assistant.svg" />' + '<span>AI Assistant</span>' + '</div>' + '<div class="' + errorClass + '">' + escapeHtml(text) + '</div>' + '<div class="main__bubble-controls">' + (!isWarning ? '<button type="button" class="main__bubble-retry k-button k-button-md k-rounded k-button-clear">' + '<span class="k-icon k-i-reload" title="Retry"></span>' + '</button>' : '') + '</div>' + '</div>'); responseArea.scrollTop(responseArea[0].scrollHeight); } function showSkeleton() { responseArea.append( '<div class="main__skeleton-placeholder k-skeleton-animate" id="activeSkeleton">' + '<div class="main__skeleton-title">' + '<img src="/shared/web/pdfprocessing/dpl_ai_assistant.svg" />' + '<span>AI Assistant</span>' + '</div>' + '<div class="main__skeleton-content">' + '<div class="k-skeleton k-skeleton-rectangle k-skeleton-pulse" style="width: 30%; height: 16px;"></div>' + '<div class="k-skeleton k-skeleton-rectangle k-skeleton-pulse" style="width: 100%; height: 16px;"></div>' + '<div class="k-skeleton k-skeleton-rectangle k-skeleton-pulse" style="width: 100%; height: 16px;"></div>' + '<div class="k-skeleton k-skeleton-rectangle k-skeleton-pulse" style="width: 100%; height: 16px;"></div>' + '</div>' + '</div>'); responseArea.scrollTop(responseArea[0].scrollHeight); } function hideSkeleton() { $("#activeSkeleton").remove(); } function sendQuestion(question) { if (!question || !question.trim()) return; lastQuestion = question; $(".main__response-placeholder").remove(); disableControls(); appendUserBubble(question); showSkeleton(); $.ajax({ url: receiveQuestionUrl, type: "POST", contentType: "application/json", data: JSON.stringify({ question: question }), success: function (response) { hideSkeleton(); enableControls(); if (response.success) { if (response.sessionReset) { var allBubbles = responseArea.children('.main__response-command, .main__response-bubble'); if (allBubbles.length > 1) { var lastUserBubble = responseArea.children('.main__response-command').last(); responseArea.children().not(lastUserBubble).remove(); appendErrorBubble('Your previous session has expired. A new session was started.', true); } } renderSegments(response.segments); } else { var isRateLimit = response.rateLimitExceeded === true; appendErrorBubble( response.error || "Something went wrong.", isRateLimit); } }, error: function (xhr) { hideSkeleton(); enableControls(); if (xhr.status === 429) { var msg = "Rate limit exceeded. Please wait before making another request."; try { var resp = JSON.parse(xhr.responseText); if (resp.error) msg = resp.error; } catch (e) { } appendErrorBubble(msg, true); } else if (xhr.status === 400) { try { var resp = JSON.parse(xhr.responseText); if (resp.antiForgeryValidationFailed) { appendErrorBubble("Session expired. Please refresh the page.", false); return; } } catch (e) { } appendErrorBubble("Something went wrong.", false); } else { appendErrorBubble("Something went wrong.", false); } } }); } $(".main__button--submit").on("click", function () { var question = $(".main__input").val().trim(); if (question) { sendQuestion(question); $(".main__input").val(""); } }); $(".main__input").on("keypress", function (e) { if (e.which === 13) { e.preventDefault(); $(".main__button--submit").click(); } }); $(".main__input-clear").on("click", function () { $(".main__input").val("").focus(); }); $(document).on("click", ".main__button--suggestion", function () { var prompt = $(this).data("prompt"); if (prompt) { sendQuestion(prompt); } }); $(document).on("click", ".main__bubble-copy", function () { var text = $(this).closest('.main__response-bubble').find('.main__bubble-text').text(); var icon = $(this).find('.k-icon'); navigator.clipboard.writeText(text).then(function () { icon.removeClass('k-i-copy').addClass('k-i-check'); setTimeout(function () { icon.removeClass('k-i-check').addClass('k-i-copy'); }, 2000); }); }); $(document).on("click", ".main__bubble-retry", function () { if (lastQuestion) { sendQuestion(lastQuestion); } }); $(document).on("click", ".main__button--download, .main__button--download-xlsx", function () { window.location.href = downloadUrl + "?t=" + Date.now(); }); });

Description

This example demonstrates the Telerik Document Processing AI Agent Tools for SpreadProcessing analysis. Chat with an AI assistant powered by Azure OpenAI to analyze spreadsheet data — describe data structure, aggregate values, filter rows, and explore datasets using natural language. The demo uses a sample file with 10,000 rows. Download the file and verify the answers the AI provides to your questions.

Additional Libraries

This SpreadProcessing example is part of Document Processing demos, with which you can see all Telerik Document Processing libraries and their features in action.

Telerik Document Processing - SpreadProcessing Analyse with Agent Tools

Description

Additional Libraries

Support & Learning Resources

Additional Resources