A customizable chat widget that provides AI-powered chat functionality based on your repository information. Available for both React and Vanilla JavaScript applications.
# Using npm
npm install @entelligence-ai/chat-widget
# Using pnpm
pnpm add @entelligence-ai/chat-widgetimport { EntelligenceChat } from '@entelligence-ai/chat-widget/react';
// Import styles separately
import '@entelligence-ai/chat-widget/style.css';
function App() {
return (
<EntelligenceChat
analyticsData={{
apiKey: "your-api-key",
repoName: "your-repo",
organization: "your-org",
companyName: "Your Company",
theme: "light"
}}
/>
);
}<script type="module">
import { EntelligenceChatInit } from '@entelligence-ai/chat-widget';
import '@entelligence-ai/chat-widget/style.css';
EntelligenceChatInit({
analyticsData: {
apiKey: "your-api-key",
repoName: "your-repo",
organization: "your-org",
companyName: "Your Company",
theme: "light"
}
});
</script>- Node.js 18+
- pnpm (recommended) or npm
# Create .env file
cp .env.example .env
# Add your API keys to .env
VITE_API_KEY=your_api_key
VITE_ORGANIZATION=your_organization
VITE_REPO_NAME=your_repo_name
VITE_COMPANY_NAME=your_company_name
# Start development server
pnpm devThe development server will start at http://localhost:5173 with HMR enabled.
# Start in development mode
pnpm dev
# Build and watch for changes
pnpm build --watch
# Test production build locally
pnpm build && pnpm preview# Build both React and Vanilla versions
pnpm build
# Build specific versions
pnpm build:react # React version only
pnpm build:vanilla # Vanilla JS version onlysrc/
├── react/ # React-specific code
├── app/ # Main application components
├── types/ # TypeScript definitions
├── utils/ # Utility functions
├── main.tsx # React entry point
├── main-vanilla.tsx # Vanilla JS entry point
└── react.tsx # Main React component
The application follows this initialization flow:
- Vite uses index.html as the entry point:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="node_modules/@entelligence-ai/chat-widget/style.css">
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>- The index.tsx file bootstraps the React application:
// src/index.tsx
import { createRoot } from 'react-dom/client';
import { App } from './app';
import '@entelligence-ai/chat-widget/style.css';
const root = createRoot(document.getElementById('root')!);
root.render(<App />);- The main application component (App) initializes the chat:
// src/app/index.tsx
export const App = ({
apiKey,
repoName,
organization,
theme,
}: AnalyticsData) => {
return (
<div className={theme}>
<ChatErrorBoundary>
<DocsChat
apiKey={apiKey}
organization={organization}
repoName={repoName}
companyName={companyName}
/>
</ChatErrorBoundary>
</div>
);
};The package includes two CSS bundles:
@entelligence-ai/chat-widget/style.css- Main styles for the widget@entelligence-ai/chat-widget/styles.css- Additional styles (if needed)
You must import at least the main style.css for the widget to work properly:
import '@entelligence-ai/chat-widget/style.css';Create a .env file in the root directory with:
VITE_API_KEY=your_api_key
VITE_ORGANIZATION=your_organization
VITE_REPO_NAME=your_repo_name# Build the package
pnpm build
# Create a local tarball
pnpm pack
# Install in another project
cd ../your-test-project
pnpm add ../chat-widget/entelligence-ai-chat-widget-0.0.4.tgz- Chrome 60+
- Firefox 60+
- Safari 12+
- Edge 79+
- Opera 47+
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
MIT License - see the LICENSE file for details
- GitHub Issues: Report a bug
- Email: [email protected]