https://github.com/boluwatifee4/foisit
Foisit: Control Any UI with Natural Language. REACT, ANGULAR & VUE
https://github.com/boluwatifee4/foisit
ai assistant-chat-bots chatbot nlp web
Last synced: 4 months ago
JSON representation
Foisit: Control Any UI with Natural Language. REACT, ANGULAR & VUE
- Host: GitHub
- URL: https://github.com/boluwatifee4/foisit
- Owner: boluwatifee4
- Created: 2024-12-21T10:36:57.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2026-02-07T13:15:23.000Z (4 months ago)
- Last Synced: 2026-02-07T22:08:45.987Z (4 months ago)
- Topics: ai, assistant-chat-bots, chatbot, nlp, web
- Language: TypeScript
- Homepage: https://ng-foisit-demo.netlify.app
- Size: 1.36 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Foisit: AI-Powered Voice & UI Assistant
**Foisit** is an AI-powered assistant for web applications that combines natural language processing with a modern UI overlay.
> [!NOTE] > **Voice Support Status**: Voice recognition and responses are currently in development and will be released in a future update. The current version focuses on high-performance text-based interactions and AI intent matching.
---
## Currently Supported
- **Text-First Assistant**: A sleek, interactive chat overlay for all user queries.
- **Smart Intent (AI)**: Natural language understanding (securely proxied).
- **Critical Actions**: Automated confirmation flow for safe execution of sensitive commands.
- **Deterministic Matching**: Ultra-fast exact matching for predefined commands.
- **Gesture Activation**: Trigger the overlay via a floating watermark (double-click/tap).
- **Framework Wrappers**: Full support for Angular, React, and Vue.
---
## Framework Wrappers
Install the wrapper specifically for your framework. The core engine is included automatically.
| Package | Framework | Installation |
| :-------------------------------------------------- | :-------- | :------------------------------------ |
| [`@foisit/angular-wrapper`](./libs/angular-wrapper) | Angular | `npm install @foisit/angular-wrapper` |
| [`@foisit/react-wrapper`](./libs/react-wrapper) | React | `npm install @foisit/react-wrapper` |
| [`@foisit/vue-wrapper`](./libs/vue-wrapper) | Vue | `npm install @foisit/vue-wrapper` |
---
## Live Demos
Try Foisit in action with our interactive demos:
| Framework | Demo Link | Development Server |
| :-------- | :----------------------------------------------- | :-------------------------- |
| Angular | [View Demo](https://ng-foisit-demo.netlify.app/) | `npx nx serve foisit-ng` |
| React | [View Demo](https://foisit-react.netlify.app/) | `npx nx serve foisit-react` |
| Vue | [View Demo](https://foisit-vue.netlify.app/) | `npx nx serve foisit-vue` |
---
## Quick Start (React Example)
```tsx
import { AssistantProvider } from '@foisit/react-wrapper';
const config = {
enableSmartIntent: true,
introMessage: 'How can I help you today?',
commands: [
{
command: 'dark mode',
action: () => setDarkMode(true),
keywords: ['lights out', 'night'],
},
{
command: 'delete order',
critical: true,
description: 'delete your last order',
action: () => deleteOrder(),
},
],
};
function App() {
return (
);
}
```
---
## Critical Action Confirmation
Foisit automatically handles confirmation for commands marked as `critical: true`.
**User:** "Delete my order"
**Assistant:** "Are you sure you want to delete your last order?"
**Buttons:** [Yes] [No]
---
## Theme Customization
Foisit supports two theme modes:
- **Glass** (default): Glassmorphism with blur effects, adapts to light/dark mode
- **Solid**: Opaque UI with fully customizable colors
```tsx
const config = {
theme: 'solid',
themeColors: {
background: '#1e1e2e',
text: '#cdd6f4',
accent: '#89b4fa',
},
commands: [...],
};
```
---
## Development (Nx Monorepo)
```bash
# Serve Angular Demo
npx nx serve foisit-ng
# Serve React Demo
npx nx serve foisit-react
# Serve Vue Demo
npx nx serve foisit-vue
```
---
## License
Licensed under the **MIT License**.