# Prodact.ai — Full Technical Reference

> AI agent SDK that turns any website into an intelligent AI assistant with DOM automation capabilities.

## Product Overview

Prodact.ai provides an AI SDK that, when added to any website via a single script tag, creates an AI-powered chat agent. This agent:

1. **Reads the current page's DOM** — identifying all interactive elements (buttons, links, inputs, selects, textareas, etc.)
2. **Accesses a knowledge base** — indexed from the website's content, uploaded documents, and custom sources
3. **Understands user intent** — using large language models to parse natural language requests
4. **Takes DOM actions** — clicking, typing, navigating, scrolling, selecting, hovering, and more
5. **Calls APIs** — executing backend operations defined by the site owner

This creates an experience where users can accomplish tasks by simply describing what they want in natural language, and the AI does it for them.

## Technical Architecture

### SDK Integration

The Prodact.ai SDK is a lightweight JavaScript library that:
- Injects a chat widget UI into the host page
- Scans the DOM for interactive elements and assigns each a `pd-id` attribute
- Captures page content and structure for AI context
- Communicates with the Prodact.ai backend via WebSocket/REST
- Executes DOM task plans returned by the AI (click events, input events, navigation)

Integration methods:
- **CDN script tag**: `<script src="https://backend.prodact.ai/api/v1/sdk/embed.js?v=YOUR_KEY" async></script>`
- **NPM package**: `@prodact.ai/sdk` with full TypeScript support
- **WordPress plugin**: Zero-code installation via WP admin

### SDK Configuration Options

The SDK can be configured via data attributes or JavaScript API:

```html
<script
  src="https://backend.prodact.ai/api/v1/sdk/embed.js?v=YOUR_KEY"
  data-position="bottom-right"
  data-theme="dark"
  data-language="en"
  async
></script>
```

Or programmatically:
```javascript
import { ProdactSDK } from '@prodact.ai/sdk'

ProdactSDK.init({
  projectKey: 'YOUR_KEY',
  position: 'bottom-right',
  theme: 'dark',
  language: 'en',
})
```

### DOM Task Execution

When the AI determines a DOM action is needed, it returns a structured task plan:

```json
{
  "summary": "Click the Sign Up button",
  "actions": [
    {
      "type": "click",
      "pdId": "pd-42",
      "selector": "button#signup",
      "description": "Click the Sign Up button"
    }
  ]
}
```

Supported action types:
- `click` — Click any element (buttons, links, cards, etc.)
- `type` — Type text into inputs (with `value` parameter)
- `clear` — Clear an input field before typing
- `scroll_to` — Scroll to a specific element on the page
- `select` — Choose an option from a dropdown/select
- `set_date` — Set date/datetime inputs using ISO format
- `check` / `uncheck` — Toggle checkboxes
- `focus` — Focus an input field
- `hover` — Hover over an element (for tooltips, menus)
- `navigate` — Go to a URL (same-origin only)
- `wait` — Pause between actions (e.g., loading states)
- `highlight` — Visually highlight an element to show the user

Each action targets elements using `pdId` (preferred), CSS `selector`, or visible `text`. The SDK uses a retry mechanism with fallback strategies to find elements reliably.

### Confirmation-First Principle

The AI follows a strict two-step confirmation flow:
1. **Propose**: AI describes the intended action in plain language and asks for confirmation
2. **Execute**: Only after user confirms ("yes", "go ahead", "do it"), the AI generates the DOM task plan

For destructive actions (delete, cancel), the AI explicitly warns about consequences before asking for confirmation. This ensures users maintain full control.

### Knowledge Base

The knowledge base supports multiple content sources:
- **Website crawling**: Automatic indexing of pages from a given root URL. The crawler follows links within the same domain and extracts text content, headings, and structure.
- **Document upload**: PDF, DOCX, TXT, Markdown files. Documents are chunked and processed for semantic search.
- **Custom content**: Manual text entries for FAQs, guides, or specific information.
- **API schema**: OpenAPI/Swagger specifications that define API endpoints the AI can call.

Content is chunked, embedded using vector embeddings, and stored for semantic retrieval during conversations. The AI combines knowledge base results with the current page content to give comprehensive answers.

### Chat Observability & Analytics

Every conversation is logged with full observability:
- **Message history**: Complete user + AI message log
- **Token usage**: Per-message and per-session token consumption
- **DOM actions**: Every action executed, with target element, status (success/fail), and timing
- **Page context**: URL, page title, and visible content at time of each message
- **Sentiment analysis**: Per-message sentiment scoring (positive, negative, neutral)
- **Session metadata**: Browser, OS, viewport size, page URL, referrer, visit duration
- **Session recordings**: Visual replay of the user's interaction with the chat widget

### Security & Privacy

- All communication uses HTTPS/WSS encryption
- SDK keys are scoped per project with domain allowlisting
- No personally identifiable information (PII) is stored by default
- GDPR-compatible data handling
- Same-origin policy enforced for DOM actions and navigation
- Content Security Policy (CSP) compatible

## API Actions

Site owners can define API endpoints that the AI can call during conversations:

```json
{
  "name": "Create Project",
  "method": "POST",
  "endpoint": "/api/projects",
  "parameters": [
    { "name": "name", "type": "string", "required": true },
    { "name": "description", "type": "string", "required": false }
  ],
  "description": "Create a new project in the user's account"
}
```

When a user says "Create a new project called My App", the AI:
1. Extracts the parameters from the user's message
2. Asks for confirmation before executing
3. Calls the API endpoint with the extracted parameters
4. Reports the result back to the user

API schemas can be imported from OpenAPI/Swagger specs or defined manually in the dashboard.

## Pricing Details

| Plan | Price | Chat Messages | SDK Actions | Projects | Team Members | Knowledge Sources |
|------|-------|--------------|-------------|----------|--------------|-------------------|
| Free | $0/mo | 500/mo | 2,500/mo | 1 | 2 | 2 |
| Starter | $5/mo | 5,000/mo | 25,000/mo | 5 | 5 | 10 |
| Pro | $15/mo | 50,000/mo | Unlimited | 20 | 20 | 50 |

All plans include:
- AI-powered chat widget with DOM automation
- Knowledge base with website crawling
- Chat analytics, insights, and message history
- DOM action execution (click, type, navigate, etc.)
- Multi-language AI responses
- Custom welcome messages and suggested questions

Starter and Pro add:
- Custom branding (colors, logo, position, avatar)
- Session recordings
- Priority email support
- Advanced analytics and sentiment tracking
- API action definitions (Pro)
- SSO / Single Sign-On (Pro)

## Competitive Comparison

| Feature | Prodact.ai | Intercom | Drift | Zendesk Chat |
|---------|-----------|----------|-------|-------------|
| Answer questions from KB | ✅ | ✅ | ✅ | ✅ |
| Click buttons on page | ✅ | ❌ | ❌ | ❌ |
| Fill forms automatically | ✅ | ❌ | ❌ | ❌ |
| Navigate between pages | ✅ | ❌ | ❌ | ❌ |
| Call APIs from chat | ✅ | ❌ | ❌ | ❌ |
| Read current page DOM | ✅ | ❌ | ❌ | ❌ |
| One-line integration | ✅ | ✅ | ✅ | ✅ |
| Starting price | Free ($0) | $39/seat | $50/seat | $55/agent |
| WordPress plugin | ✅ | ✅ | ❌ | ✅ |
| Session recordings | ✅ | ❌ | ❌ | ❌ |

Key differentiators:
- **DOM awareness**: AI understands every interactive element on the current page
- **Action execution**: AI clicks, fills, navigates — not just generates text responses
- **One-line setup**: No deep integration or engineering effort required
- **Affordable**: Starts free; $5-15/mo for teams vs $39-99/seat/mo for competitors

## Use Cases — Detailed Examples

### SaaS Onboarding
A new user signs up and asks: "How do I create my first project?" The AI sees a "Create Project" button on the dashboard, proposes to click it, and walks the user through each field — filling in the project name, selecting a template, and clicking "Save". The entire onboarding flow happens from a conversation.

### E-commerce Checkout
A shopper asks: "Add the blue running shoes in size 10 to my cart." The AI navigates to the product page, selects size 10 from the dropdown, and clicks "Add to Cart". The shopper then says "Take me to checkout" and the AI navigates to the cart and checkout page.

### Customer Support Deflection
A user asks: "How do I cancel my subscription?" Instead of routing to a human agent, the AI answers from the knowledge base, explains the cancellation policy, and offers to navigate to the Billing page. After confirmation, it clicks through the cancellation flow — saving a support ticket.

### Internal Tool Navigation
An employee asks: "Show me last month's revenue report." The AI navigates to the Reports section, selects "Revenue" from the report type dropdown, sets the date range to last month, and clicks "Generate Report".

## Company Information

- **Company name**: Prodact.ai
- **Founded**: 2025
- **Category**: AI Agent SDK / Website AI / Conversational AI Platform
- **Website**: https://prodact.ai
- **Documentation**: https://docs.prodact.ai
- **App/Dashboard**: https://app.prodact.ai
- **Support email**: hello@prodact.ai
- **Sales email**: sales@prodact.ai
- **GitHub**: https://github.com/prodact-ai
- **Twitter/X**: https://x.com/prodactai

## Blog & Resources

- [Prodact.ai vs Intercom: AI Agent That Acts vs Traditional Chatbot](https://prodact.ai/blog/prodact-ai-vs-intercom)
- [How to Add an AI Agent to WordPress in 2 Minutes](https://prodact.ai/blog/add-ai-to-wordpress)
- [What Is an AI Agent for Websites? (And Why It's Not a Chatbot)](https://prodact.ai/blog/what-is-ai-agent-for-websites)
- [5 Ways AI Agents Reduce Support Tickets by 60%](https://prodact.ai/blog/reduce-support-tickets-with-ai)
- [AI Agent vs Chatbot vs Copilot: What's the Difference?](https://prodact.ai/blog/ai-agent-vs-chatbot-vs-copilot)

## Frequently Asked Questions

### What is Prodact.ai?
Prodact.ai is an AI SDK that turns any website into an AI agent. Add one script tag, and users interact with your site using natural language. The AI reads the page DOM, clicks buttons, fills forms, navigates — it acts, not just answers.

### What makes it different from a chatbot?
Traditional chatbots (Intercom, Drift, Zendesk Chat) respond with text instructions: "Go to Settings → Billing." Prodact.ai's AI agent actually navigates to Settings, opens Billing, and performs the action for the user. It understands the page's DOM and can interact with any element.

### How do I install it?
Add one `<script>` tag to your HTML `<head>`, or `npm install @prodact.ai/sdk` for React/Next.js, or install the WordPress plugin. Setup takes under 2 minutes.

### How much does it cost?
Free plan: $0/month with 500 chat messages. Starter: $5/month. Pro: $15/month. No credit card required to start.

### What websites does it work with?
Any website — React, Next.js, Vue, Angular, Svelte, WordPress, Shopify, Wix, Squarespace, static HTML, Ruby on Rails, Django, or any platform that renders HTML.

### What can the AI agent do on a page?
Click buttons, fill forms, navigate between pages, scroll to elements, select dropdown options, set dates, toggle checkboxes, hover over elements, highlight elements, and call backend APIs — all triggered by natural language.

### Is it secure?
Yes. All communication is encrypted (HTTPS/WSS). SDK keys are scoped per project with domain allowlisting. No PII is stored by default. Same-origin policy is enforced for all DOM actions. GDPR-compatible.

### Can I customize how the AI responds?
Yes. Each project has custom instructions, tone settings, language preferences, and knowledge base configuration. You control what the AI knows and how it behaves.

### Does it work with single-page applications (SPAs)?
Yes. The SDK detects route changes in SPAs and automatically re-scans the DOM for new interactive elements. Works with React Router, Next.js App Router, Vue Router, and other SPA frameworks.

### Can the AI call my backend APIs?
Yes. Define API actions in your dashboard using method, endpoint, parameters, and description. The AI extracts parameters from user messages and calls your APIs after user confirmation.