A React-based chat widget for integrating the Proactive AI Language (PAL) system into web applications. This widget provides a seamless chat interface for users to interact with PAL.
- 🎨 Beautiful, modern UI with gradient backgrounds
- 💬 Real-time chat interface
- 🔄 Loading states and typing indicators
- 🎯 Message history management
- 🌈 Clean and responsive design
- 🔒 Secure API key handling
npm install @proactive-ai-lab/pal-web-widget@<INSERT_VERSION_HERE>
# or
yarn add @proactive-ai-lab/pal-web-widget@<INSERT_VERSION_HERE>
Create a .env.local
file in your project root and add:
NEXT_PUBLIC_PAL_PROJECT_NAME=your_project_name
NEXT_PUBLIC_PAL_API_URL=palona_api_url_here
NEXT_PUBLIC_PAL_API_KEY=your_api_key_here
- Import the widget with the following line at the top of your file:
import { PalWebWidget } from '@proactive-ai-lab/pal-web-widget';
- Add it to your React component:
<div id="Your Component">
<PalWebWidget
userId="Insert User Here"
apiKey="Insert API Key Here"
projectName="Insert Project Name Here"
initialMessage="" // optional
loadingMessage="" // optional
context="" // optional
showIntroVideo={false} // optional
borderStyle="2px solid rgba(0, 0, 0, 0.15)" // optional
/>
</div>
Your code should look similar to the following:
import "./styles.css";
import { PalWebWidget } from '@proactive-ai-lab/pal-web-widget';
export default function App() {
return (
<div id="Your Component">
<PalWebWidget
userId="Insert User Here"
apikey="Insert API Key Here"
projectName="Insert Project Name Here"
/>
</div>
);
}
For more info for PAL members, see this following article: https://www.notion.so/proactiveailab/Web-SDK-Installation-Guide-1578c0822e498054a82bc6afefdd46e2
The widget accepts the following props:
Prop | Type | Required | Description |
---|---|---|---|
apiKey | string | Yes | Your PAL API key for authentication |
userId | string | Yes | Identifier for the current user |
projectName | string | Yes | Identifier for your business' custom agent |
initialMessage | string | No | Your custom initial message |
loadingMessage | string | No | Your custom loading message |
context | string | No | Agent context |
showIntroVideo | boolean | No | |
borderStyle | string | No | Border style |
- Clone the repository:
git clone this-repo
- Install dependencies:
npm install
- Start the development server:
npm run dev
- Build for production:
npm run build
pal-sdk-web/
├── app/ # Next.js app directory
│ ├── page.tsx # Demo page
│ └── layout.tsx # Root layout
├── components/ # React components
│ ├── chat/ # Chat-related components
│ └── pal-web-widget.tsx # Main widget component
├── lib/ # Utility functions
├── hooks/ # Custom React hooks
└── types/ # TypeScript type definitions