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

Telerik Document Processing - PdfProcessing Agent Tools

Loading Demo...

EXAMPLE
VIEW SOURCE

                    agent_tools.cshtml
                
                    AgentToolsController.cs
                
                    DemoSession.cs
                
                    DemoSessionBase.cs
                
                    DemoSessionManager.cs
                
                    AgentResponseHelper.cs

API REFERENCE

Agent Tools

Chat with the AI assistant to create and modify PDF documents

Telerik DPL AI Assistant

The Telerik DPL AI Assistant is here to help you create and modify PDF documents.

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; font-size: 15px; font-weight: bold; margin-bottom: 8px; } #pdfViewerContainer { position: relative; width: 540px; height: 679px; } #pdfViewer { width: 100%; height: 100%; border: 1px solid #e0e0e0; background-color: #eaeaea; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; } #pdfViewer::-webkit-scrollbar { width: 6px; } #pdfViewer::-webkit-scrollbar-thumb { background-color: rgba(83, 96, 113, 0.53); border-radius: 7px; } .main__pdf-page { display: block; margin: 6px auto; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .main__pdf-error { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f5f5f5; border: 1px solid #e0e0e0; color: #666; gap: 12px; } .main__pdf-error .k-icon { font-size: 32px; color: #CA1400; } .main__pdf-error p { margin: 0; text-align: center; } .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: nowrap; overflow: hidden; text-overflow: ellipsis; } .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 pdfViewerUrl = '/pdfprocessing/getcurrentpdf'; var receiveQuestionUrl = '/pdfprocessing/receivequestion'; var resetSessionUrl = '/pdfprocessing/resetsession'; var currentPdfDoc = null; var pdfjsReady = false; var pdfjsLib = null; (function loadPdfJs() { var script = document.createElement('script'); script.src = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js'; script.onload = function () { pdfjsLib = window.pdfjsLib; pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js'; pdfjsReady = true; reloadPdfViewer(); }; document.head.appendChild(script); })(); 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); } } } }); 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 showPdfError() { var viewer = document.getElementById('pdfViewer'); var errorOverlay = document.getElementById('pdfError'); viewer.innerHTML = ''; viewer.style.display = 'none'; errorOverlay.style.display = 'flex'; } function reloadPdfViewer() { if (!pdfjsReady) return; var viewer = document.getElementById('pdfViewer'); var errorOverlay = document.getElementById('pdfError'); fetch(pdfViewerUrl + '?t=' + Date.now()) .then(function (response) { if (!response.ok) { throw new Error('Server returned ' + response.status); } var contentType = response.headers.get('Content-Type') || ''; if (contentType.indexOf('application/pdf') === -1) { throw new Error('Response is not a PDF'); } return response.arrayBuffer(); }) .then(function (data) { if (currentPdfDoc) { currentPdfDoc.destroy(); currentPdfDoc = null; } return pdfjsLib.getDocument({ data: data }).promise; }) .then(function (pdf) { currentPdfDoc = pdf; viewer.innerHTML = ''; viewer.style.display = ''; errorOverlay.style.display = 'none'; var renderWidth = viewer.clientWidth - 10; var devicePixelRatio = window.devicePixelRatio || 1; function renderPage(pageNum) { if (pageNum > pdf.numPages) return Promise.resolve(); return pdf.getPage(pageNum).then(function (page) { var viewport = page.getViewport({ scale: 1 }); var scale = renderWidth / viewport.width; var scaledViewport = page.getViewport({ scale: scale }); var canvas = document.createElement('canvas'); canvas.className = 'main__pdf-page'; var context = canvas.getContext('2d'); canvas.width = Math.floor(scaledViewport.width * devicePixelRatio); canvas.height = Math.floor(scaledViewport.height * devicePixelRatio); canvas.style.width = Math.floor(scaledViewport.width) + 'px'; canvas.style.height = Math.floor(scaledViewport.height) + 'px'; context.scale(devicePixelRatio, devicePixelRatio); viewer.appendChild(canvas); return page.render({ canvasContext: context, viewport: scaledViewport }).promise.then(function () { return renderPage(pageNum + 1); }); }); } return renderPage(1); }) .catch(function () { showPdfError(); }); } 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); reloadPdfViewer(); } } renderSegments(response.segments); if (response.documentChanged) { reloadPdfViewer(); } } 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--retry-pdf", function () { reloadPdfViewer(); }); $(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-pdf", function () { window.location.href = pdfViewerUrl + "?download=true&t=" + Date.now(); }); $(".main__button--new-doc").on("click", function () { if (!confirm("Start a new document? This will clear your current session.")) { return; } $.ajax({ url: resetSessionUrl, type: "POST", success: function () { $("#responseContent").html( '<div class="main__response-placeholder">' + '<img src="/shared/web/pdfprocessing/ai_big_sparkles.svg" />' + '<div>The Telerik DPL AI Assistant is here to help you create and modify PDF documents.</div>' + '</div>'); reloadPdfViewer(); }, error: function () { alert("Failed to reset session. Please refresh the page."); } }); }); });

Description

This example demonstrates the Telerik Document Processing AI Agent Tools for PDF documents. Chat with an AI assistant powered by Azure OpenAI to create documents, add content, manipulate pages, work with form fields, and more — all while viewing live updates in the PDF viewer.

Additional Libraries

This PdfProcessing 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 - PdfProcessing Agent Tools

Description

Additional Libraries

Support & Learning Resources

Additional Resources