How to Create a Document AI Assistant Using Bold AI Agent

Bold AI Agent allows you to build a Document AI Assistant that uses your existing support articles, documentation pages, and help content to provide accurate, context‑aware answers. By connecting your documentation to a Library, the assistant retrieves relevant information and responds reliably.

You can publish this assistant as a widget and embed it into your documentation or support site, enabling users to get help directly on the page they are viewing. For page‑specific responses, enable URL Context so the assistant can understand and respond based on the user’s current documentation page.

This KB specifically guides you on how to add a Document AI Assistant for Syncfusion React documentation.

Prerequisites

• Access to BoldAgent
• Permission to create Libraries and Agents
• Documentation available as PDF, DOCX, or public sitemap URLs
• Predefined Q&A for important topics

Create a Library

A library stores all documentation that your assistant will use for answering questions.

To Create a Library

1. Go to Libraries.
2. Select Create Library.
3. Enter Name, Description (optional), and Access.
4. Select Create.

Add Content to the Library

Upload Documentation Files

1. Open the Library.
2. Go to Files.
3. Select Add Files and upload documents.

Add Documentation Website URLs

1. Open the Library.
2. Go to Website.
3. Choose how you want to add website content:
   • Sitemap: Import multiple pages using a sitemap.
   • Web Crawl: Crawl pages starting from a URL and follow links.
   • Individual Site: Add a single URL.
4. The system will index the page and eligible child pages.

Add Q&A

1. Open the Library.
2. Go to Q&A.
3. Select Add Q&A.
4. Enter the question and answer.

For more information on creating a Library, refer to the article: How to Create a Library for AI Agent.

Create the Document AI Assistant

1. Open Agent Builder.
2. Select Create Agent.
3. Enter Name, Description, Model, and Access Level.
4. Select Create.

Link the Library to the Agent

1. Open the agent.
2. Go to Libraries.
3. Select Link Library.
4. Choose the documentation library created for the Document AI Assistant.

Add Instructions

Instructions define how the assistant should use your documentation. Use this area to set the assistant’s behavior, tone, citation style, and how it should use Library content and URL Context.

1. Open Instructions.
2. Add or modify the instruction text.
3. Select Update.

Recommended Instruction (Document AI Assistant)

Use the prompt below as your default instruction. Copy it into Instructions and, if needed, enhance the wording to match your product tone or content policies.

# Document Assistant AI Agent

You are an expert **Documentation Intelligence Agent** and **Technical Knowledge Navigator** specializing in structured document analysis across webpages, multi-page documentation systems, and private knowledge libraries.

Your sole focus is to accurately read, interpret, summarize, extract, analyze, and explain documentation using available reading tools.

Available tools:
- Read specific webpage
- Read currently open webpage
- Read internal linked library

You must provide structured, source-grounded, technically accurate responses without hallucination, assumption, or fabrication.

---

## 1) Objectives

- Provide accurate, source-grounded answers based only on retrieved content.
- Automatically use the linked internal library for documentation-related queries.
- Read all retrieved content before answering.
- Structure responses clearly and professionally.
- Support developers, architects, product managers, and technical teams.
- Clearly distinguish between documented facts, summaries, and explicitly requested analytical insights.
- Never invent undocumented APIs, features, parameters, or behavior.

---

## 2) Source Selection & Tool Usage Rules

The internal linked library is the default and primary documentation source.

Default behavior for documentation questions:
→ Automatically retrieve relevant content from the internal linked library.

Tool usage:
- When a URL is provided → **Read specific webpage**
- When the user refers to “this page” → **Read currently open webpage**
- When multiple sources are referenced → Retrieve all relevant ones
- When unrelated to documentation → Respond normally without retrieval

Never guess or fill gaps with external knowledge.

---

## 3) Grounding Rules (Non-Negotiable)

- Use only retrieved documentation.
- Never fabricate missing sections or behaviors.
- Do not merge unrelated documents.
- Do not assume behavior not explicitly documented.
- If something is missing → State: “This is not mentioned in the documentation.”
- If contradictions exist → Highlight both sides.
- If version is unclear → Request version info.

---

## 4) Response Structure Standards

Unless otherwise requested, follow this structure:

### Overview  
### Key Concepts / Components  
### How It Works  
### Code Examples (preserve exact formatting)  
### Configuration / Parameters  
### Limitations / Notes  

Responses must be structured, clean, and scannable.

---

## 5) Supported Request Types

- Summaries (TL;DR, executive summary, section summaries)
- Extractions (APIs, props, configuration options, warnings, examples)
- Comparisons (documents, versions, features, breaking changes)
- Navigation (locating topics, related sections)
- Transformations (FAQ, implementation checklist, architecture outline)

---

## 6) Multi-Page Documentation Handling

- Identify documentation hierarchy.
- Detect linked or related sections.
- Retrieve multiple pages when needed.
- Never assume undocumented relationships.

---

## 7) Library Handling Rules

- Treat the internal library as authoritative.
- Do not mix with external sources unless requested.
- Choose the most relevant document when multiple match.
- Ask for version clarification when conflicts occur.

---

## 8) Code Handling Rules

- Preserve exact syntax and formatting.
- Do not modify code unless explicitly requested.
- Identify language when possible.
- If incomplete, state that the snippet appears partial.

---

## 9) Edge Case Handling

- If the page is empty → Inform the user.
- If content is partial → Note incompleteness.
- If requested information is missing → State it is not documented.
- If contradictions exist → Present them clearly.
- Ask for clarification only when essential.

---

## 10) Analytical Mode (When Explicitly Requested)

When analysis is requested:
- Separate documented facts from analysis.
- Base reasoning strictly on documented capabilities and limitations.

---

## 11) Communication Style

- Professional  
- Clear  
- Structured  
- Technically precise  
- Concise but complete  

Avoid:
- Marketing language  
- Casual tone  
- Unsupported claims  

Use grounding phrases:
- “The documentation states…”  
- “According to the retrieved content…”  
- “This is not mentioned in the documentation.”  

---

## 12) Safety & Accuracy Enforcement

Before finalizing any response:
- Verify all facts come from retrieved documentation.
- Remove assumptions.
- Avoid inventing APIs, features, or behavior.
- State uncertainty when applicable.

---

## 13) Default Output Behavior

- Use structured headings.
- Prefer bullet points.
- Keep paragraphs short.
- Preserve terminology exactly as documented.
- Ensure information is suitable for technical teams.

---

## 14) Product Scope Restriction (Mandatory)

This assistant is **restricted exclusively to Syncfusion React documentation**.

If a user request is outside this domain, respond exactly with:

> **“This assistant is restricted to Syncfusion React documentation. The requested information is outside the supported scope.”**

No additional details should be provided.

This restriction overrides all other instructions.

---

You may copy-and-use the instruction as-is or enhance it (adjust tone, length, or citation style). After updating Instructions, test the agent in Playground and iterate until output meets your expectations.

Enable Page‑Aware Answers (URL Context)

The URL Context Tool allows the assistant to read and summarize content from a user’s currently open webpage. Enable this option when you want the agent to provide page‑specific answers based on the documentation page the user is viewing.

1. Open the agent and go to Settings → Built‑in Tools.
2. Turn on URL Context Tool (available for supported OpenAI models).
3. Ensure Web Search remains turned off to keep responses restricted to your documentation and page content.

Select Update to save the changes.

Test the Document AI Assistant

Use Playground to verify the behavior:

• The assistant responds using information from your documentation library.
• Page‑specific answers are generated when URL Context Tool is enabled.
• The tone, formatting, and structure of the responses match your agent instructions.

Publish the Agent

When the agent behaves as expected, publish the current draft as a new version.

1. Select Publish.
2. Review the version that is ready to be released.
3. Click Publish vX.0 (for example, Publish v3.0).

Share the Agent

After publishing the agent, share it as a widget so users can access the Document AI Assistant directly from your documentation site.

1. Open the agent.
2. Select Widget.
3. If you do not have a widget yet, select Create Widget.

When you create a widget, you will configure it across three tabs:

• Widget Appearance: Controls the launcher look and placement.
• Chat Experience: Controls what users see inside the widget (welcome, placeholder, suggested prompts).
• Share: Provides the embed code to add the widget to your website.

Configure Widget Appearance

Use this tab to design how the launcher looks on your site.

1. Set Brand Color.
2. Select a Launcher Type:
   • Icon and Text
   • Text Only
   • Image Only
3. Configure launcher details as needed:
   • Launcher Text (if your launcher type supports text)
   • Upload Launcher Icon (if your launcher type supports an icon or image)
   • Launcher Position (for example, right or left)
4. Select Create to generate the widget.

Configure Chat Experience

Use this tab to control the in-widget messaging experience.

1. Enter Welcome Text.
   • This greeting is shown when users open the widget.
2. Enter Placeholder Text.
   • This text appears in the message input before the user types.

Suggested Prompts

Suggested prompts are clickable prompt templates that help users start a conversation quickly. They appear inside the widget (typically near the chat area) and can reduce “blank page” friction for first-time users.

Add Suggested Prompts

1. In Chat Experience, find Suggested Prompts.
2. Select Add Prompts.
3. Add one or more prompts that match your most common user needs (for example: “Summarize this page”)

If you select the prompt “Summarize the page” in the widget, the agent will use the URL Context Tool to read the webpage and return a summarized version of the page’s content.

Share

After publishing your agent, you can integrate it into your documentation or website so that users can access the Document AI Assistant whenever they need help. You can share the agent in two ways, depending on how you want it to appear on your site.

Share Using Embedded Code (Auto‑Load Chat Widget)

Use this option when you want the assistant to appear as a floating chat widget across your documentation site.

1. Open Widget → Share.
2. Copy the embedded code.
3. Paste it just before the closing </body> tag on your website.
4. Republish your website.

Your Document AI Assistant is now available on your site as a widget. With URL Context enabled, the assistant can tailor answers to the specific documentation page the user is viewing.

Share Using Iframe (Sidebar or Panel View)

Use this option when you want the assistant to open inside a sidebar, slider panel, or drawer—similar to GitBook-style right‑side help panels in your documenation site.

1. In Widget → Share, copy the widget iframe URL or iframe snippet.
2. Add an Ask button to your site.
3. On click, inject the iframe into a right-side panel (or modal) and toggle it open.

Example (button click → open widget):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Website with Bold Agent Iframe</title>
  <style>
    :root{--panel-width:420px;--panel-bg:#fff;--panel-border:#e5e7eb;--launcher-bg:#f3f4f6;--brand:#099250}
    body,html{height:100%;margin:0;font-family:system-ui,Segoe UI,Roboto,Arial}
    .page{display:flex;height:100vh;transition:margin-right .28s ease}
    .content{flex:1;padding:24px;overflow:auto}
    /* Ask launcher button (header style) */
    .ask-launcher{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:1400;display:flex;align-items:center;gap:8px;background:var(--launcher-bg);border-radius:999px;padding:8px 12px;box-shadow:0 4px 12px rgba(12,12,12,.06);cursor:pointer;border:0}
    .ask-launcher .icon{width:20px;height:20px;border-radius:6px;background:var(--brand);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px}
    .ask-launcher .label{font-weight:600;color:#111;font-size:14px}

     /* Right-side iframe panel
       CSS variables (root) control panel size and colors. Adjust these to change
       the panel width, background, border color, launcher background, and brand color.
       The iframe itself has a 1px top border and 2px margin for visual separation.
     */
    .iframe-panel{position:fixed;top:0;right:0;height:100vh;width:0;overflow:hidden;background:var(--panel-bg);background-clip:padding-box;box-shadow:none;z-index:1500;transition:width .28s ease}
    .iframe-panel.open{width:var(--panel-width);border-left:2px solid var(--panel-border)}
    .iframe-panel .panel-head{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid #eee}
    .iframe-panel .panel-head .title{font-weight:600}
     .iframe-panel .panel-body{height:calc(100vh);position:relative}
     /* The iframe is preloaded in the DOM below. It has a small margin and a top border
       so it visually separates from the panel header. Change --panel-border to alter color. */
     .iframe-panel iframe{width:calc(100% - 4px);height:calc(100% - 4px);border:0;margin:2px;box-sizing:border-box;border-top:1px solid var(--panel-border)}

    /* When panel open, add right margin to content so it doesn't hide under iframe */
    .with-panel{margin-right:var(--panel-width)}
    @media(max-width:700px){
      .iframe-panel.open{width:100vw;border-left:2px solid var(--panel-border)}
      .with-panel{margin-right:0}
      .ask-launcher{right:12px;left:auto}
    }

    /* Overrides default welcome header margin values */
    .welcome-header {
        margin-top: 150px !important;
    }
  </style>
</head>
<body>

  <div class="page">
    <main class="content" id="mainContent">
    </main>
  </div>

  <!-- Ask launcher button -->
  <button class="ask-launcher" id="askBtn" aria-expanded="false" title="Ask">
    <div class="icon">AI</div>
    <div class="label">Ask</div>
  </button>

  <!-- Right-side iframe panel (initially closed) -->
  <aside class="iframe-panel" id="iframePanel" aria-hidden="true">
    <div class="panel-body">
      <iframe id="agentIframe"
        src="https://yourdomain.com/widgetscript-api/v1/widgets/{WIDGET_ID}/iframe"
        allow="microphone"
        referrerpolicy="no-referrer-when-downgrade"
        title="Document AI Assistant"></iframe>
    </div>
  </aside>

  <script>
    (function(){
      // `askBtn` - the page launcher button that toggles the widget panel
      // `panel`  - the right-hand iframe panel containing the preloaded widget
      // `main`   - the main content area; we add a margin when the panel is open
      const askBtn = document.getElementById('askBtn');
      const panel = document.getElementById('iframePanel');
      const main = document.getElementById('mainContent');

      /**
       * Open the iframe panel.
       * - adds the `open` class to expand the panel width via CSS
       * - updates ARIA attributes to knows the panel is visible
       * - adds a content margin so page content does not sit underneath the panel
       */
      function openPanel(){
        panel.classList.add('open');
        panel.setAttribute('aria-hidden','false');
        askBtn.setAttribute('aria-expanded','true');
        main.classList.add('with-panel');
      }

      /**
       * Close the iframe panel.
       * - removes the `open` CSS class to collapse the panel
       * - restores ARIA states and removes the content margin
       */
      function closePanel(){
        panel.classList.remove('open');
        panel.setAttribute('aria-hidden','true');
        askBtn.setAttribute('aria-expanded','false');
        main.classList.remove('with-panel');
      }

      // --- Event handlers ------------------------------------------
      // Toggle panel open/close when the Ask launcher is clicked.
      askBtn.addEventListener('click', function(){
        if (panel.classList.contains('open')) closePanel(); else openPanel();
      });

      // Close the panel on `Escape` for keyboard users (accessibility).
      window.addEventListener('keydown', function(e){
        if (e.key === 'Escape') closePanel();
      });
    })();
  </script>
</body>
</html>

With URL Context enabled, the assistant can tailor answers to the specific documentation page the user is viewing.