npm package: @projintel-ai/chat-widget
Description: Standalone chat widget script for ProjIntel AI SDK (API: https://api.projintel.ai)
Latest version: 1.1.7

<div align="center">
  <img src="https://widget.projintel.ai/projintel.svg" alt="ProjIntelAI Logo" width="200" />
  <h1>ProjIntelAI Chat Widget</h1>
  <p>
    <strong>Turn your project documentation into an intelligent conversation.</strong>
  </p>
  <p>
    <a href="https://projintel.ai">Website</a> | <a href="https://panel.projintel.ai">Get API Key</a>
  </p>
  <br />
</div>

<div align="center">
  <img src="https://widget.projintel.ai/chat-widget-preview.png" alt="ProjIntel AI Chat Widget Preview" width="600" style="border-radius: 10px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);" />
</div>

<br />

## 🚀 Why ProjIntel AI?

Securely access your project knowledge instantly. ProjIntel AI connects to your **Jira, Trello, GitLab, Bitbucket , GitHub, Notion, and Asana** to answer questions instantly.

- **🔍 Unified Knowledge:** precise answers citing sources from all your tools.
- **⚡ Instant Integration:** Add a powerful AI assistant to your site in **under 2 minutes**.
- **🎨 Fully Customizable:** Matches your brand's look and feel perfectly.
- **🔒 Enterprise Secure:** Role-based access and secure data handling.

> **Ready to get started?**  
> [Sign up at panel.projintel.ai](https://panel.projintel.ai) to create your project and get your **API Key** today!

---

A standalone, embeddable chat widget that can be added to any website with a single script tag or React component.

## Quick Start

### Method 1: React (Recommended)

Install the package:

```bash
npm install @projintel-ai/chat-widget
```

Import and use the `Widget` component:

```tsx
import { Widget } from '@projintel-ai/chat-widget';

function App() {
  return (
    <Widget 
      projectId="YOUR_PROJECT_ID"
      apiKey="YOUR_API_KEY"
      // Optional: Pass user identity for secure mode
      user={{
        id: "user_123",
        email: "user@example.com"
      }}
    />
  );
}
```

This component manages its own lifecycle, automatically destroying the widget when unmounted (e.g., on logout).

### Method 2: Data Attributes (Simplest for HTML)

Add this single script tag to your HTML `<head>` or before `</body>`:

```html
<script 
  src="https://widget.projintel.ai/widget.js"
  data-project-id="your-project-id"
  data-api-key="your-api-key"
  data-position="bottom-right"
></script>
```

That's it! The widget will automatically:
- Validate your API key and project ID
- Fetch organization details from the backend
- Show a floating chat button

**Note:** Base URL defaults to `https://api.projintel.ai` (backend API). You can override it with `data-base-url` if you are using an on-premise instance. Organization ID is fetched automatically.

### Method 3: Global Config Object

```html
<script>
  window.ProjIntelAIChatConfig = {
    projectId: 'your-project-id',
    apiKey: 'your-api-key',
    baseUrl: 'https://api.projintel.ai', // Optional - Defaults to production API
    position: 'bottom-right',
    buttonColor: '#4f46e5'
  };
</script>
<script src="https://widget.projintel.ai/widget.js"></script>
```

### Method 4: Manual Initialization

```html
<script src="https://widget.projintel.ai/widget.js"></script>
<script>
  window.ProjIntelAIChatInstance = new window.ProjIntelAIChatWidget({
    projectId: 'your-project-id',
    apiKey: 'your-api-key'
    // baseUrl defaults to https://api.projintel.ai
  });
</script>
```

## Configuration Options

| Option | Type | Required | Default | Description |
|--------|------|----------|---------|-------------|
| `projectId` | `string` | Yes | - | Your project ID |
| `apiKey` | `string` | Yes | - | Your API key |
| `baseUrl` | `string` | No | `https://api.projintel.ai` | Backend API base URL |
| `position` | `string` | No | `bottom-right` | Button position: `bottom-right`, `bottom-left`, `top-right`, `top-left` |
| `buttonColor` | `string` | No | `#4f46e5` | Button background color (hex) |

**Note:** `organizationId` is automatically fetched from the backend using your project ID and API key.

## Data Attributes

When using Method 1, you can configure via data attributes:

- `data-project-id` → `projectId` (required)
- `data-api-key` → `apiKey` (required)
- `data-base-url` → `baseUrl` (optional - defaults to `https://api.projintel.ai`)
- `data-position` → `position` (optional)
- `data-button-color` → `buttonColor` (optional)



## API

### Destroy Widget

```javascript
window.ProjIntelAIChatInstance.destroy()
```

Removes the widget from the page.

## Features

- ✅ **Zero Dependencies** - Works on any website
- ✅ **Auto-initialization** - Just add the script tag
- ✅ **Customizable** - Position, colors, and more
- ✅ **Responsive** - Works on mobile and desktop
- ✅ **Source Citations** - Shows sources for AI responses
- ✅ **Modern UI** - Beautiful, clean interface

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)



## TypeScript Support

If you are using TypeScript, you can add these type definitions to your `src/vite-env.d.ts` or `src/types/global.d.ts` file to get full type safety:

```typescript
export {};

declare global {
  interface ProjIntelAIConfig {
    projectId: string;
    apiKey: string;
    baseUrl?: string;
    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
    user?: {
      id: string;
      email?: string;
      name?: string;
    };
  }

  interface ProjIntelAI {
    init: (config: ProjIntelAIConfig) => void;
    identify: (user: { id: string; email?: string; name?: string }) => void;
  }

  interface Window {
    ProjIntelAI?: ProjIntelAI;
  }
}
```

## Contact & Support

For help, feedback, or feature requests, please reach out to us:

- **Email:** [support@projintel.ai](mailto:support@projintel.ai)
- **Website:** [projintel.ai](https://projintel.ai)

## License


MIT