├── .github └── workflows │ └── build-and-lint.yml ├── .gitignore ├── .prettierrc ├── ATTRIBUTION.md ├── LICENSE ├── README.md ├── SECURITY.md ├── assets └── demo.mp4 ├── docs ├── next.config.mjs ├── package-lock.json ├── package.json ├── pages │ ├── _app.jsx │ ├── _meta.jsx │ ├── advanced │ │ ├── _meta.jsx │ │ ├── database_options.mdx │ │ ├── speech_recognition_options.mdx │ │ ├── structured_generation.mdx │ │ ├── text_generation_options.mdx │ │ ├── text_to_speech_options.mdx │ │ └── web_worker.mdx │ ├── api_reference │ │ ├── _meta.jsx │ │ ├── browserai_class.mdx │ │ ├── database.mdx │ │ ├── error_handling.mdx │ │ ├── events.mdx │ │ ├── generate_text.mdx │ │ ├── start_recording.mdx │ │ ├── stop_recording.mdx │ │ ├── text_to_speech.mdx │ │ └── transcribe_audio.mdx │ ├── contributing.mdx │ ├── demo │ │ ├── _meta.jsx │ │ ├── audio_demo.mdx │ │ └── text_demo.mdx │ ├── feature_requests.mdx │ ├── getting_started │ │ ├── _meta.jsx │ │ ├── core_features_and_usage.mdx │ │ └── installation.mdx │ ├── index.mdx │ ├── supported_models.mdx │ └── troubleshooting.mdx └── theme.config.jsx ├── eslint.config.js ├── eslintrc.config.js ├── examples ├── WIP-browser-agent-demo │ ├── .gitignore │ ├── README.md │ ├── eslint.config.js │ ├── index.html │ ├── package.json │ ├── postcss.config.js │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── components │ │ │ ├── AgentChat.css │ │ │ ├── AgentChat.tsx │ │ │ ├── BrowserView.css │ │ │ └── BrowserView.tsx │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tailwind.config.js │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── audio-demo │ ├── .gitignore │ ├── README.md │ ├── eslint.config.js │ ├── index.html │ ├── package.json │ ├── public │ │ ├── _headers │ │ ├── _routes.json │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── components │ │ │ └── ChatInterface.tsx │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── chat-demo │ ├── .gitignore │ ├── README.md │ ├── eslint.config.js │ ├── index.html │ ├── package.json │ ├── postcss.config.js │ ├── public │ │ ├── _headers │ │ ├── _routes.json │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── assets │ │ │ ├── Browserai-logo.png │ │ │ └── react.svg │ │ ├── components │ │ │ ├── ChatInterface.tsx │ │ │ ├── EnhancedChatInterface.tsx │ │ │ ├── MessageContent.tsx │ │ │ └── MessageFormatting │ │ │ │ ├── CodeBlock.tsx │ │ │ │ ├── Latex.tsx │ │ │ │ └── index.ts │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tailwind.config.js │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── database-demos │ └── indexeddb-demo │ │ ├── .gitignore │ │ ├── README.md │ │ ├── eslint.config.js │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ └── vite.svg │ │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── components │ │ │ ├── DatabaseDemo.css │ │ │ └── DatabaseDemo.tsx │ │ ├── index.css │ │ ├── main.tsx │ │ ├── types.ts │ │ └── vite-env.d.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.node.json │ │ └── vite.config.ts ├── realtime-chat-demo │ ├── .gitignore │ ├── README.md │ ├── eslint.config.js │ ├── index.html │ ├── package.json │ ├── postcss.config.js │ ├── public │ │ ├── _headers │ │ ├── _routes.json │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── components │ │ │ ├── chat-message.tsx │ │ │ └── info-banner.tsx │ │ ├── index.css │ │ ├── lib │ │ │ └── utils.ts │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tailwind.config.js │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── schema-llm │ ├── .gitignore │ ├── README.md │ ├── eslint.config.js │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── examples.ts │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── tts-demo │ ├── .gitignore │ ├── README.md │ ├── eslint.config.js │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts └── voice-demo │ ├── .gitignore │ ├── README.md │ ├── eslint.config.js │ ├── index.html │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.css │ ├── App.tsx │ ├── assets │ │ └── react.svg │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── extensions └── chrome │ ├── README.md │ ├── eslint.config.js │ ├── index.html │ ├── package.json │ ├── postcss.config.js │ ├── public │ ├── background.js │ ├── content-script.css │ ├── content-script.js │ ├── icons │ │ ├── icon128.png │ │ ├── icon16.png │ │ ├── icon32.png │ │ └── icon64.png │ ├── manifest.json │ ├── sidepanel.html │ └── vite.svg │ ├── sidepanel.html │ ├── src │ ├── App.css │ ├── App.tsx │ ├── assets │ │ └── react.svg │ ├── components │ │ ├── HTMLCleanerTest.tsx │ │ ├── Header.tsx │ │ └── ui │ │ │ ├── accordion.tsx │ │ │ ├── alert-dialog.tsx │ │ │ ├── alert.tsx │ │ │ ├── aspect-ratio.tsx │ │ │ ├── avatar.tsx │ │ │ ├── badge.tsx │ │ │ ├── breadcrumb.tsx │ │ │ ├── button.tsx │ │ │ ├── card.tsx │ │ │ ├── checkbox.tsx │ │ │ ├── collapsible.tsx │ │ │ ├── command.tsx │ │ │ ├── context-menu.tsx │ │ │ ├── dialog.tsx │ │ │ ├── drawer.tsx │ │ │ ├── dropdown-menu.tsx │ │ │ ├── form.tsx │ │ │ ├── hover-card.tsx │ │ │ ├── input.tsx │ │ │ ├── label.tsx │ │ │ ├── menubar.tsx │ │ │ ├── navigation-menu.tsx │ │ │ ├── pagination.tsx │ │ │ ├── popover.tsx │ │ │ ├── progress.tsx │ │ │ ├── radio-group.tsx │ │ │ ├── resizable.tsx │ │ │ ├── scroll-area.tsx │ │ │ ├── select.tsx │ │ │ ├── separator.tsx │ │ │ ├── sheet.tsx │ │ │ ├── sidebar.tsx │ │ │ ├── skeleton.tsx │ │ │ ├── slider.tsx │ │ │ ├── switch.tsx │ │ │ ├── table.tsx │ │ │ ├── tabs.tsx │ │ │ ├── textarea.tsx │ │ │ ├── toast.tsx │ │ │ ├── toaster.tsx │ │ │ ├── toggle-group.tsx │ │ │ ├── toggle.tsx │ │ │ ├── tooltip.tsx │ │ │ ├── use-mobile.tsx │ │ │ └── use-toast.ts │ ├── core │ │ ├── browser-actions-api.ts │ │ └── browser-actions.ts │ ├── helpers │ │ └── executors.tsx │ ├── hooks │ │ ├── use-mobile.tsx │ │ └── use-toast.ts │ ├── index.css │ ├── lib │ │ └── utils.ts │ ├── main.tsx │ ├── popup │ │ ├── chat-interface.tsx │ │ ├── header.tsx │ │ ├── navigation.tsx │ │ ├── popup.tsx │ │ ├── workflow-list.tsx │ │ └── workflow-view.tsx │ ├── sidepanel.tsx │ ├── sidepanel │ │ ├── content-identifier-test.tsx │ │ └── workflow-runner.tsx │ └── vite-env.d.ts │ ├── tailwind.config.js │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── package.json ├── src ├── config │ └── models │ │ ├── mlc-models.json │ │ ├── transformers-models.json │ │ └── types.ts ├── core │ ├── agent │ │ ├── browser-actions.ts │ │ ├── browser-agent.ts │ │ ├── content-identifier.ts │ │ ├── dom-analyzer.ts │ │ ├── html-cleaner.test.ts │ │ ├── html-cleaner.ts │ │ ├── index.ts │ │ └── types.ts │ ├── common │ │ └── grammar.ts │ ├── database │ │ ├── implementation │ │ │ ├── indexeddb.ts │ │ │ └── sqlite.ts │ │ ├── index.ts │ │ ├── storage.ts │ │ ├── types.ts │ │ └── vectorstore.ts │ ├── llm │ │ └── index.ts │ └── parsers │ │ ├── csv.ts │ │ ├── docx.ts │ │ ├── image.ts │ │ └── pdf.ts ├── engines │ ├── mlc-engine-wrapper.ts │ ├── transformer-engine-wrapper.ts │ └── tts-engine.ts ├── index.ts ├── libs │ └── transformers │ │ ├── Huggingface-LICENSE │ │ ├── backends │ │ ├── onnx.ts │ │ └── ort-wasm-simd-threaded.jsep.wasm │ │ ├── base │ │ ├── feature_extraction_utils.ts │ │ ├── image_processors_utils.ts │ │ └── processing_utils.ts │ │ ├── configs.ts │ │ ├── env.ts │ │ ├── generation │ │ ├── configuration_utils.ts │ │ ├── logits_process.ts │ │ ├── logits_sampler.ts │ │ ├── parameters.ts │ │ ├── stopping_criteria.ts │ │ └── streamers.ts │ │ ├── models.ts │ │ ├── models │ │ ├── audio_spectrogram_transformer │ │ │ └── feature_extraction_audio_spectrogram_transformer.ts │ │ ├── auto │ │ │ ├── feature_extraction_auto.ts │ │ │ ├── image_processing_auto.ts │ │ │ └── processing_auto.ts │ │ ├── bit │ │ │ └── image_processing_bit.ts │ │ ├── chinese_clip │ │ │ └── image_processing_chinese_clip.ts │ │ ├── clap │ │ │ └── feature_extraction_clap.ts │ │ ├── clip │ │ │ └── image_processing_clip.ts │ │ ├── convnext │ │ │ └── image_processing_convnext.ts │ │ ├── deit │ │ │ └── image_processing_deit.ts │ │ ├── donut │ │ │ └── image_processing_donut.ts │ │ ├── feature_extractors.ts │ │ ├── florence2 │ │ │ └── processing_florence2.ts │ │ ├── idefics3 │ │ │ ├── image_processing_idefics3.ts │ │ │ └── processing_idefics3.ts │ │ ├── image_processors.ts │ │ ├── janus │ │ │ ├── image_processing_janus.ts │ │ │ └── processing_janus.ts │ │ ├── jina_clip │ │ │ ├── image_processing_jina_clip.ts │ │ │ └── processing_jina_clip.ts │ │ ├── llava_onevision │ │ │ └── image_processing_llava_onevision.ts │ │ ├── mgp_str │ │ │ └── processing_mgp_str.ts │ │ ├── moonshine │ │ │ ├── feature_extraction_moonshine.ts │ │ │ └── processing_moonshine.ts │ │ ├── paligemma │ │ │ └── processing_paligemma.ts │ │ ├── phi3_v │ │ │ ├── image_processing_phi3_v.ts │ │ │ └── processing_phi3_v.ts │ │ ├── processors.ts │ │ ├── pyannote │ │ │ ├── feature_extraction_pyannote.ts │ │ │ └── processing_pyannote.ts │ │ ├── qwen2_vl │ │ │ ├── image_processing_qwen2_vl.ts │ │ │ └── processing_qwen2_vl.ts │ │ ├── sam │ │ │ ├── image_processing_sam.ts │ │ │ └── processing_sam.ts │ │ ├── seamless_m4t │ │ │ └── feature_extraction_seamless_m4t.ts │ │ ├── siglip │ │ │ └── image_processing_siglip.ts │ │ ├── speecht5 │ │ │ ├── feature_extraction_speecht5.ts │ │ │ └── processing_speecht5.ts │ │ ├── swin2sr │ │ │ └── image_processing_swin2sr.ts │ │ ├── vitmatte │ │ │ └── image_processing_vitmatte.ts │ │ ├── vitpose │ │ │ └── image_processing_vitpose.ts │ │ ├── wav2vec2 │ │ │ ├── feature_extraction_wav2vec2.ts │ │ │ └── processing_wav2vec2.ts │ │ ├── wespeaker │ │ │ └── feature_extraction_wespeaker.ts │ │ └── whisper │ │ │ ├── common_whisper.ts │ │ │ ├── feature_extraction_whisper.ts │ │ │ ├── generation_whisper.ts │ │ │ └── processing_whisper.ts │ │ ├── ops │ │ └── registry.ts │ │ ├── pipelines.ts │ │ ├── tokenizers.ts │ │ ├── transformers.ts │ │ ├── types.ts │ │ └── utils │ │ ├── audio.ts │ │ ├── constants.d.ts │ │ ├── constants.ts │ │ ├── core.ts │ │ ├── data-structures.ts │ │ ├── devices.ts │ │ ├── dtypes.ts │ │ ├── generic.ts │ │ ├── hub.ts │ │ ├── image.ts │ │ ├── maths.ts │ │ ├── phonemize.ts │ │ ├── pipelines.ts │ │ ├── tensor.ts │ │ └── voices.ts └── types │ ├── backends.d.ts │ ├── base.d.ts │ ├── generation.d.ts │ ├── models.d.ts │ ├── ops.d.ts │ └── utils.d.ts ├── tsconfig.json ├── tsup.config.ts ├── vite.config.js └── vite.config.ts /.github/workflows/build-and-lint.yml: -------------------------------------------------------------------------------- 1 | name: Build and Lint 2 | 3 | on: 4 | push: 5 | branches: [ '**' ] # Runs on all branches 6 | pull_request: 7 | branches: [ '**' ] # Runs on PRs targeting any branch 8 | 9 | jobs: 10 | build-and-lint: 11 | runs-on: ubuntu-latest 12 | 13 | strategy: 14 | matrix: 15 | node-version: [18.x, 20.x] 16 | 17 | steps: 18 | - uses: actions/checkout@v4 19 | 20 | - name: Use Node.js ${{ matrix.node-version }} 21 | uses: actions/setup-node@v4 22 | with: 23 | node-version: ${{ matrix.node-version }} 24 | 25 | # Main project build and lint 26 | - name: Install main dependencies 27 | run: npm install 28 | 29 | - name: Run tests 30 | run: npm run test 31 | 32 | - name: Build main project 33 | run: npm run build 34 | 35 | # Need to fix linting issues first 36 | # - name: Lint main project 37 | # run: npm run lint 38 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | node_modules/ 3 | .pnp 4 | .pnp.js 5 | 6 | # Production 7 | dist/ 8 | build/ 9 | 10 | # Testing 11 | coverage/ 12 | 13 | # IDE 14 | .vscode/ 15 | .idea/ 16 | *.swp 17 | *.swo 18 | 19 | # Misc 20 | .DS_Store 21 | .env 22 | .env.local 23 | .env.development.local 24 | .env.test.local 25 | .env.production.local 26 | 27 | # Logs 28 | npm-debug.log* 29 | yarn-debug.log* 30 | yarn-error.log* 31 | 32 | # Cache 33 | .cache/ 34 | .npm/ 35 | 36 | # Docs 37 | .next 38 | out 39 | 40 | # Build 41 | .next 42 | out 43 | *package-lock.json 44 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "trailingComma": "all", 4 | "singleQuote": true, 5 | "printWidth": 120, 6 | "tabWidth": 2 7 | } -------------------------------------------------------------------------------- /ATTRIBUTION.md: -------------------------------------------------------------------------------- 1 | # Attribution Notice 2 | 3 | This project incorporates code and functionality from the following sources: 4 | 5 | ## Transformers.js 6 | - **Source**: [Transformers.js](https://github.com/xenova/transformers.js) 7 | - **Author**: Xenova 8 | - **License**: Apache License 2.0 9 | - **Usage**: We utilize Transformers.js for running machine learning models in the browser. The original code has been modified to work in a browser environment and converted to TypeScript. 10 | 11 | ## Hugging Face 12 | - **Source**: [Hugging Face](https://huggingface.co/) 13 | - **License**: Apache License 2.0 14 | - **Usage**: We use models and technologies from Hugging Face's ecosystem through Transformers.js. 15 | 16 | Both Transformers.js and Hugging Face's components are licensed under the Apache License 2.0, which is included in this directory as `Huggingface-LICENSE`. We gratefully acknowledge these projects and their contributions to the open-source community. 17 | 18 | For full terms and conditions, please refer to the Apache License 2.0 in the accompanying `Huggingface-LICENSE` file. -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 Cloud Code AI Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Supported Versions 4 | 5 | Use this section to tell people about which versions of your project are 6 | currently being supported with security updates. 7 | 8 | | Version | Supported | 9 | | ------- | ------------------ | 10 | | 5.1.x | :white_check_mark: | 11 | | 5.0.x | :x: | 12 | | 4.0.x | :white_check_mark: | 13 | | < 4.0 | :x: | 14 | 15 | ## Reporting a Vulnerability 16 | 17 | Use this section to tell people how to report a vulnerability. 18 | 19 | Tell them where to go, how often they can expect to get an update on a 20 | reported vulnerability, what to expect if the vulnerability is accepted or 21 | declined, etc. 22 | -------------------------------------------------------------------------------- /assets/demo.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sauravpanda/BrowserAI/65eefbef53b3335b94631135272d04628dfbee7b/assets/demo.mp4 -------------------------------------------------------------------------------- /docs/next.config.mjs: -------------------------------------------------------------------------------- 1 | import nextra from 'nextra' 2 | 3 | const withNextra = nextra({ 4 | defaultShowCopyCode: true, 5 | staticImage: true, 6 | theme: 'nextra-theme-docs' 7 | }) 8 | 9 | // Add Cloudflare Pages specific configuration 10 | export default withNextra({ 11 | output: 'export', 12 | images: { 13 | unoptimized: true 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "next": "^14.2.26", 4 | "nextra": "^3.3.1", 5 | "nextra-theme-docs": "^3.3.1", 6 | "react": "^18.2.0", 7 | "react-dom": "^18.2.0" 8 | }, 9 | "optionalDependencies": { 10 | "@napi-rs/simple-git-darwin-arm64": "latest", 11 | "@napi-rs/simple-git-linux-x64-gnu": "latest" 12 | }, 13 | "scripts": { 14 | "dev": "next", 15 | "build": "next build", 16 | "start": "next start" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /docs/pages/_app.jsx: -------------------------------------------------------------------------------- 1 | export default function App({ Component, pageProps }) { 2 | return 3 | } -------------------------------------------------------------------------------- /docs/pages/_meta.jsx: -------------------------------------------------------------------------------- 1 | export default { 2 | "index": "Welcome to BrowserAI", 3 | "getting_started": "Getting Started", 4 | "supported_models": "Supported Models", 5 | "advanced": "Advanced", 6 | "api_reference": "API Reference", 7 | "demo": "Demo", 8 | "troubleshooting": "Troubleshooting", 9 | "contributing": "Contributing", 10 | "feature_requests": "Feature Requests" 11 | } -------------------------------------------------------------------------------- /docs/pages/advanced/_meta.jsx: -------------------------------------------------------------------------------- 1 | export default { 2 | "text_generation_options": "Text Generation Options", 3 | "structured_generation": "Structured Generation", 4 | "web_worker": "Web Worker Support", 5 | "speech_recognition_options": "Speech Recognition Options", 6 | "text_to_speech_options": "Text to Speech Options" 7 | } -------------------------------------------------------------------------------- /docs/pages/advanced/web_worker.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Web Worker Support' 3 | description: 'Guide for using web workers with BrowserAI' 4 | --- 5 | 6 | # Web Worker Support 7 | 8 | Run model inference in a separate thread for better performance. 9 | 10 | ## Enabling Web Workers 11 | 12 | ```javascript copy 13 | const response = await browserAI.generateText('Hello', { 14 | useWorker: true 15 | }); 16 | ``` 17 | 18 | ## Benefits 19 | - Non-blocking UI 20 | - Parallel processing 21 | - Better resource utilization 22 | 23 | ## Worker Status Monitoring 24 | 25 | ```javascript copy 26 | browserAI.on('workerStatus', (status) => { 27 | console.log('Worker status:', status); 28 | }); 29 | ``` 30 | 31 | export const metadata = { 32 | title: 'Web Worker Support', 33 | description: 'Guide for using web workers with BrowserAI' 34 | } -------------------------------------------------------------------------------- /docs/pages/api_reference/_meta.jsx: -------------------------------------------------------------------------------- 1 | export default { 2 | "browserai_class": "BrowserAI Class", 3 | "generate_text": "Generate Text", 4 | "start_recording": "Start Recording", 5 | "stop_recording": "Stop Recording", 6 | "transcribe_audio": "Transcribe Audio", 7 | "text_to_speech": "Text to Speech", 8 | "database": "Database", 9 | "error_handling": "Error Handling", 10 | "events": "Events" 11 | } -------------------------------------------------------------------------------- /docs/pages/api_reference/browserai_class.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'BrowserAI Class Reference' 3 | description: 'Documentation for the main BrowserAI class and its core methods' 4 | --- 5 | 6 | # BrowserAI Class 7 | 8 | The main class that provides access to all AI capabilities. 9 | 10 | ## Constructor 11 | 12 | ```javascript copy 13 | const browserAI = new BrowserAI(); 14 | ``` 15 | 16 | Creates a new instance of the BrowserAI class. No parameters required. 17 | 18 | ## loadModel(modelIdentifier: string, options?: ModelOptions) 19 | 20 | Loads an AI model for use. 21 | 22 | ```javascript copy 23 | await browserAI.loadModel('smollm2-135m-instruct', { 24 | quantization: 'q4f16_1', 25 | onProgress: (progress) => console.log(`Loading: ${progress.progress}%`) 26 | }); 27 | ``` 28 | 29 | ### Parameters 30 | 31 | | Parameter | Type | Required | Description | 32 | |-----------|------|----------|-------------| 33 | | modelIdentifier | string | Yes | Name of the model to load | 34 | | options | ModelOptions | No | Configuration options | 35 | 36 | ### ModelOptions 37 | 38 | | Option | Type | Default | Description | 39 | |--------|------|---------|-------------| 40 | | quantization | string | 'q4f16_1' | Model quantization level | 41 | | onProgress | function | - | Progress callback | 42 | | onComplete | function | - | Completion callback | 43 | | onError | function | - | Error callback | 44 | 45 | ### Returns 46 | `Promise` 47 | 48 | export const metadata = { 49 | title: 'BrowserAI Class Reference', 50 | description: 'Documentation for the main BrowserAI class and its core methods' 51 | } -------------------------------------------------------------------------------- /docs/pages/api_reference/error_handling.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Error Handling' 3 | description: 'Documentation for handling errors in BrowserAI operations' 4 | --- 5 | 6 | # Error Handling 7 | 8 | All methods can throw errors that should be handled. 9 | 10 | ```javascript copy 11 | try { 12 | await browserAI.loadModel('smollm2-135m-instruct'); 13 | } catch (error) { 14 | console.error('Error:', error.message); 15 | } 16 | ``` 17 | 18 | ## Common Error Types 19 | 20 | | Error Type | Description | 21 | |------------|-------------| 22 | | ModelLoadError | Failed to load model | 23 | | GenerationError | Text generation failed | 24 | | AudioError | Audio processing failed | 25 | | TranscriptionError | Speech recognition failed | 26 | 27 | ### Best Practices 28 | 29 | It's recommended to wrap all BrowserAI operations in try-catch blocks to handle potential errors gracefully. You can also use the `onError` callback in configuration options for specific error handling: 30 | 31 | ```javascript copy 32 | await browserAI.loadModel('smollm2-135m-instruct', { 33 | onError: (error) => { 34 | console.error('Model loading failed:', error.message); 35 | // Handle error appropriately 36 | } 37 | }); 38 | ``` 39 | 40 | export const metadata = { 41 | title: 'Error Handling', 42 | description: 'Documentation for handling errors in BrowserAI operations' 43 | } -------------------------------------------------------------------------------- /docs/pages/api_reference/events.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Events' 3 | description: 'Documentation for event handling and callbacks in BrowserAI' 4 | --- 5 | 6 | # Events 7 | 8 | The BrowserAI instance emits events you can listen to: 9 | 10 | ```javascript copy 11 | browserAI.on('modelLoaded', (modelInfo) => { 12 | console.log(`Model ${modelInfo.name} loaded successfully`); 13 | }); 14 | 15 | browserAI.on('error', (error) => { 16 | console.error('An error occurred:', error); 17 | }); 18 | ``` 19 | 20 | ## Available Events 21 | 22 | | Event | Description | 23 | |-------|-------------| 24 | | modelLoaded | Triggered when a model is successfully loaded | 25 | | modelUnloaded | Triggered when a model is unloaded | 26 | | error | Triggered when an error occurs | 27 | | progress | Triggered during loading operations with progress updates | 28 | 29 | ### Example Usage 30 | 31 | ```javascript copy 32 | // Listen for loading progress 33 | browserAI.on('progress', (progress) => { 34 | console.log(`Loading progress: ${progress.progress}%`); 35 | }); 36 | 37 | // Handle model loading completion 38 | browserAI.on('modelLoaded', (modelInfo) => { 39 | console.log(`Model ${modelInfo.name} is ready to use`); 40 | }); 41 | 42 | // Global error handling 43 | browserAI.on('error', (error) => { 44 | console.error('BrowserAI error:', error.message); 45 | }); 46 | ``` 47 | 48 | export const metadata = { 49 | title: 'Events', 50 | description: 'Documentation for event handling and callbacks in BrowserAI' 51 | } -------------------------------------------------------------------------------- /docs/pages/api_reference/start_recording.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Audio Recording' 3 | description: 'Documentation for starting audio recording in BrowserAI' 4 | --- 5 | 6 | # Start Recording 7 | 8 | ## startRecording(options?: RecordingOptions) 9 | 10 | Starts audio recording for speech recognition. 11 | 12 | ```javascript copy 13 | await browserAI.startRecording({ 14 | sampleRate: 16000, 15 | channels: 1 16 | }); 17 | ``` 18 | 19 | ### Parameters 20 | 21 | | Parameter | Type | Required | Description | 22 | |-----------|------|----------|-------------| 23 | | options | RecordingOptions | No | Recording configuration | 24 | 25 | ### RecordingOptions 26 | 27 | | Option | Type | Default | Description | 28 | |--------|------|---------|-------------| 29 | | sampleRate | number | 16000 | Audio sample rate | 30 | | channels | number | 1 | Number of channels | 31 | 32 | ### Returns 33 | `Promise` 34 | 35 | export const metadata = { 36 | title: 'Audio Recording', 37 | description: 'Documentation for audio recording functionality in BrowserAI' 38 | } -------------------------------------------------------------------------------- /docs/pages/api_reference/stop_recording.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Stop Recording' 3 | description: 'Documentation for stopping audio recording in BrowserAI' 4 | --- 5 | 6 | # Stop Recording 7 | 8 | ## stopRecording() 9 | 10 | Stops the current recording and returns the audio data. 11 | 12 | ```javascript copy 13 | const audioBlob = await browserAI.stopRecording(); 14 | ``` 15 | 16 | ### Returns 17 | `Promise` 18 | 19 | The returned Blob contains the recorded audio data that can be used for transcription or other audio processing. 20 | 21 | export const metadata = { 22 | title: 'Stop Recording', 23 | description: 'Documentation for stopping audio recording in BrowserAI' 24 | } -------------------------------------------------------------------------------- /docs/pages/api_reference/text_to_speech.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Text-to-Speech' 3 | description: 'Documentation for text-to-speech conversion capabilities' 4 | --- 5 | 6 | # Text-to-Speech 7 | 8 | ## textToSpeech(text: string, options?: TTSOptions) 9 | 10 | Converts text to speech. 11 | 12 | ```javascript copy 13 | const audioBuffer = await browserAI.textToSpeech('Hello world', { 14 | voice: 'female_a', 15 | speed: 1.0 16 | }); 17 | ``` 18 | 19 | ### Parameters 20 | 21 | | Parameter | Type | Required | Description | 22 | |-----------|------|----------|-------------| 23 | | text | string | Yes | Text to convert | 24 | | options | TTSOptions | No | TTS settings | 25 | 26 | ### TTSOptions 27 | 28 | | Option | Type | Default | Description | 29 | |--------|------|---------|-------------| 30 | | voice | string | 'female_a' | Voice selection | 31 | | speed | number | 1.0 | Speech rate | 32 | | pitch | number | 1.0 | Voice pitch | 33 | | quality | string | 'medium' | Audio quality | 34 | 35 | ### Returns 36 | `Promise` 37 | 38 | export const metadata = { 39 | title: 'Text-to-Speech', 40 | description: 'Documentation for text-to-speech conversion capabilities' 41 | } -------------------------------------------------------------------------------- /docs/pages/api_reference/transcribe_audio.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Transcribe Audio' 3 | description: 'Documentation for audio transcription capabilities' 4 | --- 5 | 6 | # Transcribe Audio 7 | 8 | ## transcribeAudio(audio: Blob | Float32Array, options?: TranscriptionOptions) 9 | 10 | Transcribes audio to text. 11 | 12 | ```javascript copy 13 | const transcription = await browserAI.transcribeAudio(audioBlob, { 14 | return_timestamps: true, 15 | language: 'en' 16 | }); 17 | ``` 18 | 19 | ### Parameters 20 | 21 | | Parameter | Type | Required | Description | 22 | |-----------|------|----------|-------------| 23 | | audio | Blob\|Float32Array | Yes | Audio data | 24 | | options | TranscriptionOptions | No | Transcription settings | 25 | 26 | ### TranscriptionOptions 27 | 28 | | Option | Type | Default | Description | 29 | |--------|------|---------|-------------| 30 | | return_timestamps | boolean | false | Include word timing | 31 | | language | string | 'en' | Target language | 32 | | chunk_length_s | number | 30 | Chunk size in seconds | 33 | 34 | ### Returns 35 | `Promise` 36 | 37 | export const metadata = { 38 | title: 'Transcribe Audio', 39 | description: 'Documentation for audio transcription capabilities' 40 | } -------------------------------------------------------------------------------- /docs/pages/demo/_meta.jsx: -------------------------------------------------------------------------------- 1 | export default { 2 | "audio_demo": "Audio Demo", 3 | "text_demo": "Text Demo" 4 | } -------------------------------------------------------------------------------- /docs/pages/demo/audio_demo.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Audio Demo' 3 | description: 'Interactive demonstration of BrowserAI speech and conversation capabilities' 4 | --- 5 | 6 | # Audio Demo 7 | 8 | Experience the full power of BrowserAI's speech capabilities in this interactive demo. 9 | 10 | [See it in action here](https://voice-demo.browserai.dev/) 11 | 12 | ## What You Can Do 13 | 14 | ### 🗣️ Voice Conversations 15 | - Speak naturally to the AI 16 | - Get real-time transcriptions 17 | - Hear AI responses in natural speech 18 | 19 | ### 💬 Text Chat 20 | - Type messages if you prefer 21 | - Switch between voice and text 22 | - See your conversation history 23 | 24 | ### 🎯 Key Features 25 | - Real-time voice recognition 26 | - Natural text-to-speech responses 27 | - Seamless conversation flow 28 | - Multi-modal interaction 29 | 30 | ## How to Use 31 | 32 | ### Start a Voice Chat 33 | 1. Click the microphone icon 34 | 2. Speak your message 35 | 3. Listen to AI's response 36 | 37 | ### Text Chat 38 | 1. Type in the message box 39 | 2. Press enter or click send 40 | 3. Click the speaker icon to hear responses 41 | 42 | ## Demo Settings 43 | 44 | Customize your experience: 45 | - Choose different AI voices 46 | - Adjust speech speed 47 | - Toggle between models 48 | - Control response length 49 | 50 | ## Tips 51 | 52 | - Use Chrome/Edge Canary for best performance 53 | - Speak clearly for better recognition 54 | - Try both voice and text for different experiences 55 | 56 | export const metadata = { 57 | title: 'Audio Demo', 58 | description: 'Interactive demonstration of BrowserAI speech and conversation capabilities' 59 | } -------------------------------------------------------------------------------- /docs/pages/demo/text_demo.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Chat Demo' 3 | description: 'Interactive demonstration of BrowserAI natural language capabilities' 4 | --- 5 | 6 | # Chat Demo 7 | 8 | A streamlined demo showcasing BrowserAI's natural language capabilities. 9 | 10 | [See it in action here](https://chat.browserai.dev/) 11 | 12 | ## What You Can Do 13 | 14 | ### 💭 Natural Conversations 15 | - Chat with AI naturally 16 | - Get thoughtful responses 17 | - Maintain context in conversations 18 | 19 | ### 🎯 Key Features 20 | - Real-time responses 21 | - Context awareness 22 | - Memory of conversation 23 | - Clean, intuitive interface 24 | 25 | ## How to Use 26 | 27 | ### Start Chatting 28 | 1. Type your message 29 | 2. Get instant responses 30 | 3. Continue the conversation naturally 31 | 32 | ### Try Different Topics 33 | - Ask questions 34 | - Request explanations 35 | - Creative writing 36 | - Problem solving 37 | 38 | ## Demo Settings 39 | 40 | Customize the experience: 41 | - Switch between models 42 | - Adjust response length 43 | - Control AI creativity 44 | - Change chat themes 45 | 46 | ## Tips 47 | 48 | - Start with simple questions 49 | - Build on previous responses 50 | - Try different conversation styles 51 | - Experiment with different models 52 | 53 | export const metadata = { 54 | title: 'Chat Demo', 55 | description: 'Interactive demonstration of BrowserAI natural language capabilities' 56 | } -------------------------------------------------------------------------------- /docs/pages/getting_started/_meta.jsx: -------------------------------------------------------------------------------- 1 | export default { 2 | "installation": "Installation", 3 | "core_features_and_usage": "Core Features & Usage" 4 | } -------------------------------------------------------------------------------- /docs/pages/getting_started/installation.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Installation' 3 | description: 'Getting started with BrowserAI installation and setup' 4 | --- 5 | 6 | # Installation 7 | 8 | Getting started with BrowserAI is quick and easy! Choose your preferred package manager to install: 9 | 10 | ## Using NPM 11 | 12 | ```bash copy 13 | npm install @browserai/browserai 14 | ``` 15 | 16 | ## Using Yarn 17 | 18 | ```bash copy 19 | yarn add @browserai/browserai 20 | ``` 21 | 22 | ## Quick Start 23 | 24 | Once installed, you can import BrowserAI into your project: 25 | 26 | ```javascript copy 27 | import { BrowserAI } from '@browserai/browserai'; 28 | ``` 29 | 30 | ## Basic Example 31 | 32 | Here's a simple example to get you up and running in seconds: 33 | 34 | ```javascript copy 35 | // Initialize BrowserAI 36 | const browserAI = new BrowserAI(); 37 | 38 | // Load a model and generate text 39 | async function quickStart() { 40 | // Load a small, efficient model 41 | await browserAI.loadModel('llama-3.2-1b-instruct'); 42 | 43 | // Generate your first AI response! 44 | const response = await browserAI.generateText('Hello, BrowserAI!'); 45 | console.log(response.choices[0].message.content); 46 | } 47 | 48 | quickStart(); 49 | ``` 50 | 51 | ## Requirements 52 | 53 | - Modern web browser with WebGPU support (Chrome Canary, Edge Canary, or other browsers with WebGPU enabled) 54 | - Node.js version 16 or higher (for development) 55 | 56 | export const metadata = { 57 | title: 'BrowserAI Installation Guide', 58 | description: 'Step-by-step guide for installing and setting up BrowserAI' 59 | } -------------------------------------------------------------------------------- /docs/theme.config.jsx: -------------------------------------------------------------------------------- 1 | export default { 2 | logo: ( 3 | 4 | BrowserAI 5 | 6 | ), 7 | project: { 8 | link: "https://github.com/sauravpanda/BrowserAI", 9 | }, 10 | docsRepositoryBase: "https://github.com/sauravpanda/BrowserAI/tree/main/docs", 11 | footer: { 12 | text: ( 13 | 14 | MIT {new Date().getFullYear()} ©{" "} 15 | 16 | Cloud Code AI 17 | 18 | . 19 | 20 | ), 21 | }, 22 | // head: ( 23 | // 24 | // 25 | // 26 | // 27 | // ), 28 | }; 29 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import tsParser from '@typescript-eslint/parser'; 2 | import tsPlugin from '@typescript-eslint/eslint-plugin'; 3 | 4 | export default [ 5 | { 6 | files: ['**/*.ts', '**/*.tsx'], 7 | languageOptions: { 8 | parser: tsParser, 9 | parserOptions: { 10 | ecmaVersion: 'latest', 11 | sourceType: 'module', 12 | }, 13 | }, 14 | plugins: { 15 | '@typescript-eslint': tsPlugin, 16 | }, 17 | rules: { 18 | // TypeScript specific rules 19 | '@typescript-eslint/no-explicit-any': 'warn', 20 | '@typescript-eslint/explicit-function-return-type': 'off', 21 | '@typescript-eslint/no-unused-vars': 'warn', 22 | 23 | // General ESLint rules 24 | 'no-console': 'warn', 25 | 'no-unused-vars': 'off', // turned off in favor of @typescript-eslint/no-unused-vars 26 | 'quotes': ['error', 'single'], 27 | 'semi': ['error', 'always'], 28 | }, 29 | }, 30 | ]; -------------------------------------------------------------------------------- /eslintrc.config.js: -------------------------------------------------------------------------------- 1 | import tsParser from '@typescript-eslint/parser'; 2 | import tsPlugin from '@typescript-eslint/eslint-plugin'; 3 | 4 | export default [ 5 | { 6 | languageOptions: { 7 | parser: tsParser, 8 | parserOptions: { 9 | ecmaVersion: 'latest', 10 | }, 11 | }, 12 | plugins: { 13 | '@typescript-eslint': tsPlugin, 14 | }, 15 | extends: [ 16 | 'eslint:recommended', 17 | 'plugin:@typescript-eslint/recommended', 18 | 'prettier' 19 | ], 20 | rules: { 21 | '@typescript-eslint/no-explicit-any': 'off', 22 | } 23 | } 24 | ]; -------------------------------------------------------------------------------- /examples/WIP-browser-agent-demo/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/WIP-browser-agent-demo/README.md: -------------------------------------------------------------------------------- 1 | # React + TypeScript + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: 13 | 14 | - Configure the top-level `parserOptions` property like this: 15 | 16 | ```js 17 | export default tseslint.config({ 18 | languageOptions: { 19 | // other options... 20 | parserOptions: { 21 | project: ['./tsconfig.node.json', './tsconfig.app.json'], 22 | tsconfigRootDir: import.meta.dirname, 23 | }, 24 | }, 25 | }) 26 | ``` 27 | 28 | - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` 29 | - Optionally add `...tseslint.configs.stylisticTypeChecked` 30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: 31 | 32 | ```js 33 | // eslint.config.js 34 | import react from 'eslint-plugin-react' 35 | 36 | export default tseslint.config({ 37 | // Set the react version 38 | settings: { react: { version: '18.3' } }, 39 | plugins: { 40 | // Add the react plugin 41 | react, 42 | }, 43 | rules: { 44 | // other rules... 45 | // Enable its recommended rules 46 | ...react.configs.recommended.rules, 47 | ...react.configs['jsx-runtime'].rules, 48 | }, 49 | }) 50 | ``` 51 | -------------------------------------------------------------------------------- /examples/WIP-browser-agent-demo/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import tseslint from 'typescript-eslint' 6 | 7 | export default tseslint.config( 8 | { ignores: ['dist'] }, 9 | { 10 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 11 | files: ['**/*.{ts,tsx}'], 12 | languageOptions: { 13 | ecmaVersion: 2020, 14 | globals: globals.browser, 15 | }, 16 | plugins: { 17 | 'react-hooks': reactHooks, 18 | 'react-refresh': reactRefresh, 19 | }, 20 | rules: { 21 | ...reactHooks.configs.recommended.rules, 22 | 'react-refresh/only-export-components': [ 23 | 'warn', 24 | { allowConstantExport: true }, 25 | ], 26 | }, 27 | }, 28 | ) 29 | -------------------------------------------------------------------------------- /examples/WIP-browser-agent-demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Browser Agent WIP 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/WIP-browser-agent-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "browser-agent-demo", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc -b && vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@browserai/browserai": "^1.0.18", 14 | "lucide-react": "^0.474.0", 15 | "react": "^18.3.1", 16 | "react-dom": "^18.3.1" 17 | }, 18 | "devDependencies": { 19 | "@eslint/js": "^9.17.0", 20 | "@types/react": "^18.3.18", 21 | "@types/react-dom": "^18.3.5", 22 | "@vitejs/plugin-react": "^4.3.4", 23 | "autoprefixer": "^10.4.20", 24 | "eslint": "^9.17.0", 25 | "eslint-plugin-react-hooks": "^5.0.0", 26 | "eslint-plugin-react-refresh": "^0.4.16", 27 | "globals": "^15.14.0", 28 | "postcss": "^8.4.35", 29 | "tailwindcss": "^3.4.1", 30 | "typescript": "~5.6.2", 31 | "typescript-eslint": "^8.18.2", 32 | "vite": "^5.4.2" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /examples/WIP-browser-agent-demo/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /examples/WIP-browser-agent-demo/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/WIP-browser-agent-demo/src/App.css: -------------------------------------------------------------------------------- 1 | .app-container { 2 | display: flex; 3 | height: 100vh; 4 | background: #f5f5f5; 5 | width: 100%; 6 | } 7 | 8 | .browser-container { 9 | border-right: 1px solid #ddd; 10 | background: white; 11 | } 12 | 13 | .chat-container { 14 | min-width: 320px; 15 | max-width: 450px; 16 | background: white; 17 | box-shadow: -2px 0 5px rgba(0,0,0,0.1); 18 | } -------------------------------------------------------------------------------- /examples/WIP-browser-agent-demo/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import BrowserView from './components/BrowserView' 3 | import AgentChat from './components/AgentChat' 4 | import './App.css' 5 | 6 | function App() { 7 | const [currentUrl, setCurrentUrl] = useState('https://example.com') 8 | 9 | return ( 10 |
11 | 12 | 13 |
14 | ) 15 | } 16 | 17 | export default App 18 | -------------------------------------------------------------------------------- /examples/WIP-browser-agent-demo/src/components/AgentChat.css: -------------------------------------------------------------------------------- 1 | .agent-chat { 2 | display: flex; 3 | flex-direction: column; 4 | height: 100%; 5 | } 6 | 7 | .chat-messages { 8 | flex: 1; 9 | overflow-y: auto; 10 | padding: 20px; 11 | } 12 | 13 | .message { 14 | margin-bottom: 12px; 15 | padding: 8px 12px; 16 | border-radius: 8px; 17 | max-width: 80%; 18 | } 19 | 20 | .message.user { 21 | background: #007AFF; 22 | color: white; 23 | margin-left: auto; 24 | } 25 | 26 | .message.agent { 27 | background: #F0F0F0; 28 | color: #333; 29 | } 30 | 31 | .chat-input { 32 | padding: 15px; 33 | border-top: 1px solid #ddd; 34 | display: flex; 35 | gap: 8px; 36 | } 37 | 38 | .chat-input input { 39 | flex: 1; 40 | padding: 8px; 41 | border: 1px solid #ddd; 42 | border-radius: 4px; 43 | } 44 | 45 | .chat-input button { 46 | padding: 8px 16px; 47 | background: #007AFF; 48 | color: white; 49 | border: none; 50 | border-radius: 4px; 51 | cursor: pointer; 52 | } 53 | 54 | .chat-input button:disabled { 55 | background: #ccc; 56 | } -------------------------------------------------------------------------------- /examples/WIP-browser-agent-demo/src/components/BrowserView.css: -------------------------------------------------------------------------------- 1 | .browser-view { 2 | display: flex; 3 | flex-direction: column; 4 | height: 100%; 5 | } 6 | 7 | .browser-toolbar { 8 | padding: 10px; 9 | border-bottom: 1px solid #ddd; 10 | } 11 | 12 | .url-input { 13 | width: 100%; 14 | padding: 8px; 15 | border: 1px solid #ddd; 16 | border-radius: 4px; 17 | } 18 | 19 | .browser-iframe { 20 | flex: 1; 21 | width: 100%; 22 | border: none; 23 | } -------------------------------------------------------------------------------- /examples/WIP-browser-agent-demo/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/WIP-browser-agent-demo/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App' 5 | 6 | createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /examples/WIP-browser-agent-demo/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/WIP-browser-agent-demo/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: [ 4 | "./index.html", 5 | "./src/**/*.{js,ts,jsx,tsx}", 6 | ], 7 | theme: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | } -------------------------------------------------------------------------------- /examples/WIP-browser-agent-demo/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "bundler", 12 | "allowImportingTsExtensions": true, 13 | "isolatedModules": true, 14 | "moduleDetection": "force", 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true, 23 | "noUncheckedSideEffectImports": true 24 | }, 25 | "include": ["src"] 26 | } 27 | -------------------------------------------------------------------------------- /examples/WIP-browser-agent-demo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ], 7 | "compilerOptions": { 8 | "baseUrl": ".", 9 | "paths": { 10 | "@/*": ["src/*"] 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/WIP-browser-agent-demo/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2022", 5 | "lib": ["ES2023"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true, 21 | "noUncheckedSideEffectImports": true 22 | }, 23 | "include": ["vite.config.ts"] 24 | } 25 | -------------------------------------------------------------------------------- /examples/WIP-browser-agent-demo/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | 8 | }) 9 | -------------------------------------------------------------------------------- /examples/audio-demo/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/audio-demo/README.md: -------------------------------------------------------------------------------- 1 | # React + TypeScript + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: 13 | 14 | - Configure the top-level `parserOptions` property like this: 15 | 16 | ```js 17 | export default tseslint.config({ 18 | languageOptions: { 19 | // other options... 20 | parserOptions: { 21 | project: ['./tsconfig.node.json', './tsconfig.app.json'], 22 | tsconfigRootDir: import.meta.dirname, 23 | }, 24 | }, 25 | }) 26 | ``` 27 | 28 | - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` 29 | - Optionally add `...tseslint.configs.stylisticTypeChecked` 30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: 31 | 32 | ```js 33 | // eslint.config.js 34 | import react from 'eslint-plugin-react' 35 | 36 | export default tseslint.config({ 37 | // Set the react version 38 | settings: { react: { version: '18.3' } }, 39 | plugins: { 40 | // Add the react plugin 41 | react, 42 | }, 43 | rules: { 44 | // other rules... 45 | // Enable its recommended rules 46 | ...react.configs.recommended.rules, 47 | ...react.configs['jsx-runtime'].rules, 48 | }, 49 | }) 50 | ``` 51 | -------------------------------------------------------------------------------- /examples/audio-demo/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import tseslint from 'typescript-eslint' 6 | 7 | export default tseslint.config( 8 | { ignores: ['dist'] }, 9 | { 10 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 11 | files: ['**/*.{ts,tsx}'], 12 | languageOptions: { 13 | ecmaVersion: 2020, 14 | globals: globals.browser, 15 | }, 16 | plugins: { 17 | 'react-hooks': reactHooks, 18 | 'react-refresh': reactRefresh, 19 | }, 20 | rules: { 21 | ...reactHooks.configs.recommended.rules, 22 | 'react-refresh/only-export-components': [ 23 | 'warn', 24 | { allowConstantExport: true }, 25 | ], 26 | }, 27 | }, 28 | ) 29 | -------------------------------------------------------------------------------- /examples/audio-demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Browser AI Voice and Chat Demo 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/audio-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "browser-ai-demo", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc -b && vite build && cp public/_headers dist/", 9 | "lint": "eslint .", 10 | "preview": "vite preview", 11 | "predeploy": "npm run build", 12 | "deploy": "gh-pages -d dist" 13 | }, 14 | "dependencies": { 15 | "@browserai/browserai": "^1.0.18", 16 | "@emotion/styled": "^11.14.0", 17 | "@huggingface/transformers": "^3.2.4", 18 | "@mlc-ai/web-llm": "^0.2.77", 19 | "posthog-js": "^1.205.0", 20 | "react": "^18.3.1", 21 | "react-dom": "^18.3.1" 22 | }, 23 | "devDependencies": { 24 | "@eslint/js": "^9.17.0", 25 | "@types/react": "^18.3.18", 26 | "@types/react-dom": "^18.3.5", 27 | "@vitejs/plugin-react": "^4.3.4", 28 | "eslint": "^9.17.0", 29 | "eslint-plugin-react-hooks": "^5.0.0", 30 | "eslint-plugin-react-refresh": "^0.4.16", 31 | "gh-pages": "^6.3.0", 32 | "globals": "^15.14.0", 33 | "typescript": "~5.6.2", 34 | "typescript-eslint": "^8.18.2", 35 | "vite": "^6.0.5" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /examples/audio-demo/public/_headers: -------------------------------------------------------------------------------- 1 | /* 2 | Access-Control-Allow-Origin: * 3 | Cross-Origin-Opener-Policy: same-origin 4 | Cross-Origin-Embedder-Policy: require-corp 5 | Access-Control-Allow-Origin: * -------------------------------------------------------------------------------- /examples/audio-demo/public/_routes.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 1, 3 | "include": ["/*"], 4 | "exclude": [ 5 | "/assets/*", 6 | "/_next/*", 7 | "/_next/static/*", 8 | "/api/*", 9 | "/*.js", 10 | "/*.css" 11 | ] 12 | } -------------------------------------------------------------------------------- /examples/audio-demo/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/audio-demo/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /examples/audio-demo/src/App.tsx: -------------------------------------------------------------------------------- 1 | import ChatInterface from './components/ChatInterface'; 2 | 3 | function App() { 4 | return ( 5 |
6 | 7 |
8 | ); 9 | } 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /examples/audio-demo/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | color-scheme: light dark; 6 | background-color: #1a1a1a; 7 | } 8 | 9 | body { 10 | margin: 0; 11 | padding: 0; 12 | min-width: 320px; 13 | min-height: 100vh; 14 | } 15 | 16 | #root { 17 | width: 100%; 18 | min-height: 100vh; 19 | } 20 | -------------------------------------------------------------------------------- /examples/audio-demo/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | , 10 | ); 11 | -------------------------------------------------------------------------------- /examples/audio-demo/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/audio-demo/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "bundler", 12 | "allowImportingTsExtensions": true, 13 | "isolatedModules": true, 14 | "moduleDetection": "force", 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true, 23 | "noUncheckedSideEffectImports": true 24 | }, 25 | "include": ["src"] 26 | } 27 | -------------------------------------------------------------------------------- /examples/audio-demo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /examples/audio-demo/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2022", 5 | "lib": ["ES2023"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true, 21 | "noUncheckedSideEffectImports": true 22 | }, 23 | "include": ["vite.config.ts"] 24 | } 25 | -------------------------------------------------------------------------------- /examples/audio-demo/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import react from '@vitejs/plugin-react'; 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | base: './', 7 | plugins: [react()], 8 | build: { 9 | ssrManifest: true, 10 | rollupOptions: { 11 | output: { 12 | manualChunks: undefined 13 | } 14 | }, 15 | commonjsOptions: { 16 | include: [/@browserai\/browserai/, /node_modules/] 17 | }, 18 | outDir: 'dist', 19 | assetsDir: 'assets', 20 | sourcemap: true 21 | }, 22 | optimizeDeps: { 23 | include: ['@browserai/browserai'] 24 | }, 25 | server: { 26 | middlewareMode: false, 27 | fs: { 28 | strict: true 29 | } 30 | } 31 | }); 32 | -------------------------------------------------------------------------------- /examples/chat-demo/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/chat-demo/README.md: -------------------------------------------------------------------------------- 1 | # React + TypeScript + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: 13 | 14 | - Configure the top-level `parserOptions` property like this: 15 | 16 | ```js 17 | export default tseslint.config({ 18 | languageOptions: { 19 | // other options... 20 | parserOptions: { 21 | project: ['./tsconfig.node.json', './tsconfig.app.json'], 22 | tsconfigRootDir: import.meta.dirname, 23 | }, 24 | }, 25 | }) 26 | ``` 27 | 28 | - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` 29 | - Optionally add `...tseslint.configs.stylisticTypeChecked` 30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: 31 | 32 | ```js 33 | // eslint.config.js 34 | import react from 'eslint-plugin-react' 35 | 36 | export default tseslint.config({ 37 | // Set the react version 38 | settings: { react: { version: '18.3' } }, 39 | plugins: { 40 | // Add the react plugin 41 | react, 42 | }, 43 | rules: { 44 | // other rules... 45 | // Enable its recommended rules 46 | ...react.configs.recommended.rules, 47 | ...react.configs['jsx-runtime'].rules, 48 | }, 49 | }) 50 | ``` 51 | -------------------------------------------------------------------------------- /examples/chat-demo/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import tseslint from 'typescript-eslint' 6 | 7 | export default tseslint.config( 8 | { ignores: ['dist'] }, 9 | { 10 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 11 | files: ['**/*.{ts,tsx}'], 12 | languageOptions: { 13 | ecmaVersion: 2020, 14 | globals: globals.browser, 15 | }, 16 | plugins: { 17 | 'react-hooks': reactHooks, 18 | 'react-refresh': reactRefresh, 19 | }, 20 | rules: { 21 | ...reactHooks.configs.recommended.rules, 22 | 'react-refresh/only-export-components': [ 23 | 'warn', 24 | { allowConstantExport: true }, 25 | ], 26 | }, 27 | }, 28 | ) 29 | -------------------------------------------------------------------------------- /examples/chat-demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Browser AI Chat Demo 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /examples/chat-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "browser-ai-demo", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc -b && vite build && cp public/_headers dist/", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@browserai/browserai": "^1.0.37", 14 | "@emotion/react": "^11.14.0", 15 | "@emotion/styled": "^11.14.0", 16 | "@huggingface/jinja": "^0.3.2", 17 | "@huggingface/transformers": "^3.2.4", 18 | "@mlc-ai/web-llm": "^0.2.77", 19 | "@types/markdown-it": "^14.1.2", 20 | "katex": "^0.16.20", 21 | "lucide-react": "^0.473.0", 22 | "markdown-it": "^14.1.0", 23 | "posthog-js": "^1.205.0", 24 | "react": "^18.3.1", 25 | "react-dom": "^18.3.1" 26 | }, 27 | "devDependencies": { 28 | "@eslint/js": "^9.17.0", 29 | "@types/react": "^18.3.18", 30 | "@types/react-dom": "^18.3.5", 31 | "@vitejs/plugin-react": "^4.3.4", 32 | "autoprefixer": "^10.4.20", 33 | "eslint": "^9.17.0", 34 | "eslint-plugin-react-hooks": "^5.0.0", 35 | "eslint-plugin-react-refresh": "^0.4.16", 36 | "globals": "^15.14.0", 37 | "postcss": "^8.5.1", 38 | "tailwindcss": "^3.4.17", 39 | "typescript": "~5.6.2", 40 | "typescript-eslint": "^8.18.2", 41 | "vite": "^6.0.5" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /examples/chat-demo/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } -------------------------------------------------------------------------------- /examples/chat-demo/public/_headers: -------------------------------------------------------------------------------- 1 | /* 2 | Access-Control-Allow-Origin: * 3 | Cross-Origin-Opener-Policy: same-origin 4 | Cross-Origin-Embedder-Policy: require-corp 5 | 6 | /*.js 7 | Content-Type: application/javascript 8 | Access-Control-Allow-Origin: * 9 | 10 | /*.css 11 | Content-Type: text/css 12 | Access-Control-Allow-Origin: * 13 | 14 | /*.html 15 | Content-Type: text/html 16 | Access-Control-Allow-Origin: * -------------------------------------------------------------------------------- /examples/chat-demo/public/_routes.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 1, 3 | "include": ["/*"], 4 | "exclude": [ 5 | "/assets/*", 6 | "/_next/*", 7 | "/_next/static/*", 8 | "/api/*", 9 | "/*.js", 10 | "/*.css" 11 | ] 12 | } -------------------------------------------------------------------------------- /examples/chat-demo/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/chat-demo/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /examples/chat-demo/src/App.tsx: -------------------------------------------------------------------------------- 1 | import ChatInterface from './components/ChatInterface' 2 | import React from 'react' 3 | 4 | function App() { 5 | return ; 6 | } 7 | 8 | export default App; 9 | -------------------------------------------------------------------------------- /examples/chat-demo/src/assets/Browserai-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sauravpanda/BrowserAI/65eefbef53b3335b94631135272d04628dfbee7b/examples/chat-demo/src/assets/Browserai-logo.png -------------------------------------------------------------------------------- /examples/chat-demo/src/components/MessageFormatting/CodeBlock.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from '@emotion/styled'; 3 | 4 | const CodeBlockContainer = styled.div` 5 | margin: 8px 0; 6 | position: relative; 7 | font-family: 'Courier New', Courier, monospace; 8 | `; 9 | 10 | const CodeHeader = styled.div` 11 | display: flex; 12 | justify-content: space-between; 13 | align-items: center; 14 | padding: 8px 16px; 15 | background: #2d2d2d; 16 | border: 1px solid #404040; 17 | border-bottom: none; 18 | border-radius: 4px 4px 0 0; 19 | `; 20 | 21 | const CodeContent = styled.pre` 22 | margin: 0; 23 | padding: 16px; 24 | background: #1a1a1a; 25 | border: 1px solid #404040; 26 | border-radius: 0 0 4px 4px; 27 | overflow-x: auto; 28 | color: #ffffff; 29 | `; 30 | 31 | const CopyButton = styled.button` 32 | background: #3b82f6; 33 | color: white; 34 | border: none; 35 | border-radius: 4px; 36 | padding: 4px 8px; 37 | cursor: pointer; 38 | font-size: 12px; 39 | 40 | &:hover { 41 | background: #2563eb; 42 | } 43 | `; 44 | 45 | interface CodeBlockProps { 46 | code: string; 47 | language?: string; 48 | } 49 | 50 | export const CodeBlock: React.FC = ({ code, language = 'plaintext' }) => { 51 | const [copied, setCopied] = React.useState(false); 52 | 53 | const handleCopy = async () => { 54 | await navigator.clipboard.writeText(code); 55 | setCopied(true); 56 | setTimeout(() => setCopied(false), 2000); 57 | }; 58 | 59 | return ( 60 | 61 | 62 | {language} 63 | 64 | {copied ? 'Copied!' : 'Copy'} 65 | 66 | 67 | {code} 68 | 69 | ); 70 | }; -------------------------------------------------------------------------------- /examples/chat-demo/src/components/MessageFormatting/Latex.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import katex from 'katex'; 3 | import styled from '@emotion/styled'; 4 | 5 | const LatexBlock = styled.div` 6 | margin: 8px 0; 7 | overflow-x: auto; 8 | color: #ffffff; 9 | 10 | .katex-display { 11 | margin: 0; 12 | padding: 8px 0; 13 | } 14 | `; 15 | 16 | interface LatexProps { 17 | formula: string; 18 | display?: boolean; 19 | } 20 | 21 | export const Latex: React.FC = ({ formula, display = false }) => { 22 | const [html, setHtml] = useState(''); 23 | 24 | useEffect(() => { 25 | try { 26 | const rendered = katex.renderToString(formula, { 27 | displayMode: display, 28 | throwOnError: false 29 | }); 30 | setHtml(rendered); 31 | } catch (error) { 32 | console.error('LaTeX rendering error:', error); 33 | setHtml(formula); 34 | } 35 | }, [formula, display]); 36 | 37 | return ( 38 | 41 | ); 42 | }; -------------------------------------------------------------------------------- /examples/chat-demo/src/components/MessageFormatting/index.ts: -------------------------------------------------------------------------------- 1 | export { CodeBlock } from './CodeBlock'; 2 | export { Latex } from './Latex'; 3 | export { MessageContent } from '../MessageContent'; -------------------------------------------------------------------------------- /examples/chat-demo/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 7 | line-height: 1.5; 8 | font-weight: 400; 9 | color-scheme: dark; 10 | background-color: #1a1a1a; 11 | color: #ffffff; 12 | } 13 | 14 | body { 15 | margin: 0; 16 | min-width: 320px; 17 | min-height: 100vh; 18 | } 19 | 20 | h1 { 21 | font-size: 24px; 22 | line-height: 1.1; 23 | margin: 0; 24 | font-weight: 600; 25 | } 26 | -------------------------------------------------------------------------------- /examples/chat-demo/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React, { StrictMode } from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const rootElement = document.getElementById('root'); 7 | if (!rootElement) throw new Error('Failed to find the root element'); 8 | 9 | createRoot(rootElement).render( 10 | 11 | 12 | 13 | ); 14 | -------------------------------------------------------------------------------- /examples/chat-demo/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.png' { 4 | const value: string; 5 | export default value; 6 | } 7 | -------------------------------------------------------------------------------- /examples/chat-demo/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: [ 4 | "./index.html", 5 | "./src/**/*.{js,ts,jsx,tsx}" // This tells Tailwind to scan these file types in src folder 6 | ], 7 | theme: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | darkMode: 'class', // Enable dark mode if needed 12 | } -------------------------------------------------------------------------------- /examples/chat-demo/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2022", 5 | "lib": ["ES2023", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "isolatedModules": true, 12 | "moduleDetection": "force", 13 | 14 | /* Output configuration */ 15 | "composite": true, 16 | "outDir": "./dist", 17 | "noEmit": true, 18 | 19 | /* Linting */ 20 | "strict": true, 21 | "noUnusedLocals": true, 22 | "noUnusedParameters": true, 23 | "noFallthroughCasesInSwitch": true, 24 | "noUncheckedSideEffectImports": true, 25 | 26 | "esModuleInterop": true, 27 | "allowSyntheticDefaultImports": true, 28 | "types": ["node"] 29 | }, 30 | "include": ["vite.config.ts"] 31 | } -------------------------------------------------------------------------------- /examples/chat-demo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "skipLibCheck": true, 7 | "composite": true 8 | }, 9 | "files": [], 10 | "references": [ 11 | { "path": "./tsconfig.app.json" }, 12 | { "path": "./tsconfig.node.json" } 13 | ] 14 | } -------------------------------------------------------------------------------- /examples/chat-demo/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2022", 5 | "lib": ["ES2023", "DOM", "DOM.Iterable"], // Added DOM libraries 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true, 21 | "noUncheckedSideEffectImports": true, 22 | 23 | /* Added configurations */ 24 | "composite": true, 25 | "esModuleInterop": true, 26 | "allowSyntheticDefaultImports": true, 27 | "types": ["node"] 28 | }, 29 | "include": ["vite.config.ts"] 30 | } -------------------------------------------------------------------------------- /examples/chat-demo/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import react from '@vitejs/plugin-react'; 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | base:'/', 7 | plugins: [react()], 8 | build: { 9 | ssrManifest: true, 10 | rollupOptions: { 11 | output: { 12 | manualChunks: undefined 13 | } 14 | }, 15 | commonjsOptions: { 16 | include: [/@browserai\/browserai/, /node_modules/] 17 | }, 18 | outDir: 'dist', 19 | assetsDir: 'assets', 20 | sourcemap: true 21 | }, 22 | optimizeDeps: { 23 | include: ['@browserai/browserai'] 24 | }, 25 | server: { 26 | middlewareMode: false, 27 | fs: { 28 | strict: true 29 | } 30 | } 31 | }); 32 | -------------------------------------------------------------------------------- /examples/database-demos/indexeddb-demo/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/database-demos/indexeddb-demo/README.md: -------------------------------------------------------------------------------- 1 | # React + TypeScript + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: 13 | 14 | - Configure the top-level `parserOptions` property like this: 15 | 16 | ```js 17 | export default tseslint.config({ 18 | languageOptions: { 19 | // other options... 20 | parserOptions: { 21 | project: ['./tsconfig.node.json', './tsconfig.app.json'], 22 | tsconfigRootDir: import.meta.dirname, 23 | }, 24 | }, 25 | }) 26 | ``` 27 | 28 | - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` 29 | - Optionally add `...tseslint.configs.stylisticTypeChecked` 30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: 31 | 32 | ```js 33 | // eslint.config.js 34 | import react from 'eslint-plugin-react' 35 | 36 | export default tseslint.config({ 37 | // Set the react version 38 | settings: { react: { version: '18.3' } }, 39 | plugins: { 40 | // Add the react plugin 41 | react, 42 | }, 43 | rules: { 44 | // other rules... 45 | // Enable its recommended rules 46 | ...react.configs.recommended.rules, 47 | ...react.configs['jsx-runtime'].rules, 48 | }, 49 | }) 50 | ``` 51 | -------------------------------------------------------------------------------- /examples/database-demos/indexeddb-demo/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import tseslint from 'typescript-eslint' 6 | 7 | export default tseslint.config( 8 | { ignores: ['dist'] }, 9 | { 10 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 11 | files: ['**/*.{ts,tsx}'], 12 | languageOptions: { 13 | ecmaVersion: 2020, 14 | globals: globals.browser, 15 | }, 16 | plugins: { 17 | 'react-hooks': reactHooks, 18 | 'react-refresh': reactRefresh, 19 | }, 20 | rules: { 21 | ...reactHooks.configs.recommended.rules, 22 | 'react-refresh/only-export-components': [ 23 | 'warn', 24 | { allowConstantExport: true }, 25 | ], 26 | }, 27 | }, 28 | ) 29 | -------------------------------------------------------------------------------- /examples/database-demos/indexeddb-demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/database-demos/indexeddb-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "indexeddb-demo", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc -b && vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@browserai/browserai": "^1.0.18", 14 | "react": "^18.3.1", 15 | "react-dom": "^18.3.1" 16 | }, 17 | "devDependencies": { 18 | "@eslint/js": "^9.17.0", 19 | "@types/react": "^18.3.18", 20 | "@types/react-dom": "^18.3.5", 21 | "@vitejs/plugin-react": "^4.3.4", 22 | "eslint": "^9.17.0", 23 | "eslint-plugin-react-hooks": "^5.0.0", 24 | "eslint-plugin-react-refresh": "^0.4.16", 25 | "globals": "^15.14.0", 26 | "typescript": "~5.6.2", 27 | "typescript-eslint": "^8.18.2", 28 | "vite": "^6.0.5" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /examples/database-demos/indexeddb-demo/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/database-demos/indexeddb-demo/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | } 6 | 7 | .database-demo { 8 | text-align: left; 9 | } 10 | 11 | .logs { 12 | background: #f0f0f0; 13 | padding: 1rem; 14 | border-radius: 8px; 15 | max-height: 500px; 16 | overflow-y: auto; 17 | } 18 | 19 | .logs pre { 20 | margin: 0.5rem 0; 21 | white-space: pre-wrap; 22 | word-wrap: break-word; 23 | } -------------------------------------------------------------------------------- /examples/database-demos/indexeddb-demo/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { DatabaseDemo } from './components/DatabaseDemo' 2 | import './App.css' 3 | 4 | function App() { 5 | return ( 6 |
7 | 8 |
9 | ) 10 | } 11 | 12 | export default App -------------------------------------------------------------------------------- /examples/database-demos/indexeddb-demo/src/components/DatabaseDemo.css: -------------------------------------------------------------------------------- 1 | .database-demo { 2 | padding: 20px; 3 | max-width: 800px; 4 | margin: 0 auto; 5 | } 6 | 7 | .input-section { 8 | margin: 20px 0; 9 | display: flex; 10 | gap: 10px; 11 | } 12 | 13 | .input-section input { 14 | padding: 8px; 15 | border: 1px solid #ccc; 16 | border-radius: 4px; 17 | flex: 1; 18 | } 19 | 20 | .button-section { 21 | display: flex; 22 | gap: 10px; 23 | margin-bottom: 20px; 24 | flex-wrap: wrap; 25 | } 26 | 27 | .button-section button { 28 | padding: 8px 16px; 29 | background-color: #007bff; 30 | color: white; 31 | border: none; 32 | border-radius: 4px; 33 | cursor: pointer; 34 | } 35 | 36 | .button-section button:hover { 37 | background-color: #0056b3; 38 | } 39 | 40 | .documents-section { 41 | margin: 20px 0; 42 | padding: 20px; 43 | border: 1px solid #eee; 44 | border-radius: 4px; 45 | } 46 | 47 | .documents-list { 48 | display: grid; 49 | gap: 10px; 50 | } 51 | 52 | .document-item { 53 | padding: 10px; 54 | background-color: #f8f9fa; 55 | border-radius: 4px; 56 | color: #333; 57 | } 58 | 59 | .document-item strong { 60 | display: block; 61 | margin-bottom: 5px; 62 | color: #333; 63 | } 64 | 65 | .logs-section { 66 | margin-top: 20px; 67 | } 68 | 69 | .logs { 70 | background-color: #f8f9fa; 71 | padding: 10px; 72 | border-radius: 4px; 73 | max-height: 300px; 74 | overflow-y: auto; 75 | } 76 | 77 | .logs pre { 78 | margin: 5px 0; 79 | white-space: pre-wrap; 80 | color: #333; 81 | } -------------------------------------------------------------------------------- /examples/database-demos/indexeddb-demo/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | place-items: center; 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | button { 39 | border-radius: 8px; 40 | border: 1px solid transparent; 41 | padding: 0.6em 1.2em; 42 | font-size: 1em; 43 | font-weight: 500; 44 | font-family: inherit; 45 | background-color: #1a1a1a; 46 | cursor: pointer; 47 | transition: border-color 0.25s; 48 | } 49 | button:hover { 50 | border-color: #646cff; 51 | } 52 | button:focus, 53 | button:focus-visible { 54 | outline: 4px auto -webkit-focus-ring-color; 55 | } 56 | 57 | @media (prefers-color-scheme: light) { 58 | :root { 59 | color: #213547; 60 | background-color: #ffffff; 61 | } 62 | a:hover { 63 | color: #747bff; 64 | } 65 | button { 66 | background-color: #f9f9f9; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /examples/database-demos/indexeddb-demo/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.tsx' 5 | 6 | createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /examples/database-demos/indexeddb-demo/src/types.ts: -------------------------------------------------------------------------------- 1 | export interface Storable { 2 | id: string; 3 | } 4 | 5 | export interface Document extends Storable { 6 | text: string; 7 | } 8 | 9 | export interface DatabaseConfig { 10 | databaseName?: string; 11 | } -------------------------------------------------------------------------------- /examples/database-demos/indexeddb-demo/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/database-demos/indexeddb-demo/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "bundler", 12 | "allowImportingTsExtensions": true, 13 | "isolatedModules": true, 14 | "moduleDetection": "force", 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true, 23 | "noUncheckedSideEffectImports": true 24 | }, 25 | "include": ["src"] 26 | } 27 | -------------------------------------------------------------------------------- /examples/database-demos/indexeddb-demo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /examples/database-demos/indexeddb-demo/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2022", 5 | "lib": ["ES2023"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true, 21 | "noUncheckedSideEffectImports": true 22 | }, 23 | "include": ["vite.config.ts"] 24 | } 25 | -------------------------------------------------------------------------------- /examples/database-demos/indexeddb-demo/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /examples/realtime-chat-demo/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/realtime-chat-demo/README.md: -------------------------------------------------------------------------------- 1 | # React + TypeScript + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: 13 | 14 | - Configure the top-level `parserOptions` property like this: 15 | 16 | ```js 17 | export default tseslint.config({ 18 | languageOptions: { 19 | // other options... 20 | parserOptions: { 21 | project: ['./tsconfig.node.json', './tsconfig.app.json'], 22 | tsconfigRootDir: import.meta.dirname, 23 | }, 24 | }, 25 | }) 26 | ``` 27 | 28 | - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` 29 | - Optionally add `...tseslint.configs.stylisticTypeChecked` 30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: 31 | 32 | ```js 33 | // eslint.config.js 34 | import react from 'eslint-plugin-react' 35 | 36 | export default tseslint.config({ 37 | // Set the react version 38 | settings: { react: { version: '18.3' } }, 39 | plugins: { 40 | // Add the react plugin 41 | react, 42 | }, 43 | rules: { 44 | // other rules... 45 | // Enable its recommended rules 46 | ...react.configs.recommended.rules, 47 | ...react.configs['jsx-runtime'].rules, 48 | }, 49 | }) 50 | ``` 51 | -------------------------------------------------------------------------------- /examples/realtime-chat-demo/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import tseslint from 'typescript-eslint' 6 | 7 | export default tseslint.config( 8 | { ignores: ['dist'] }, 9 | { 10 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 11 | files: ['**/*.{ts,tsx}'], 12 | languageOptions: { 13 | ecmaVersion: 2020, 14 | globals: globals.browser, 15 | }, 16 | plugins: { 17 | 'react-hooks': reactHooks, 18 | 'react-refresh': reactRefresh, 19 | }, 20 | rules: { 21 | ...reactHooks.configs.recommended.rules, 22 | 'react-refresh/only-export-components': [ 23 | 'warn', 24 | { allowConstantExport: true }, 25 | ], 26 | }, 27 | }, 28 | ) 29 | -------------------------------------------------------------------------------- /examples/realtime-chat-demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Browser AI Chat Demo 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/realtime-chat-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "browser-ai-demo", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc -b && vite build && cp public/_headers dist/", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@browserai/browserai": "^1.0.29", 14 | "@emotion/react": "^11.14.0", 15 | "@emotion/styled": "^11.14.0", 16 | "@huggingface/jinja": "^0.3.2", 17 | "@huggingface/transformers": "^3.2.4", 18 | "@mlc-ai/web-llm": "^0.2.77", 19 | "@types/markdown-it": "^14.1.2", 20 | "clsx": "^2.1.1", 21 | "framer-motion": "^12.4.1", 22 | "katex": "^0.16.20", 23 | "lucide-react": "^0.473.0", 24 | "markdown-it": "^14.1.0", 25 | "posthog-js": "^1.205.0", 26 | "react": "^18.3.1", 27 | "react-dom": "^18.3.1", 28 | "tailwind-merge": "^3.0.1" 29 | }, 30 | "devDependencies": { 31 | "@eslint/js": "^9.17.0", 32 | "@types/react": "^18.3.18", 33 | "@types/react-dom": "^18.3.5", 34 | "@vitejs/plugin-react": "^4.3.4", 35 | "autoprefixer": "^10.4.20", 36 | "eslint": "^9.17.0", 37 | "eslint-plugin-react-hooks": "^5.0.0", 38 | "eslint-plugin-react-refresh": "^0.4.16", 39 | "globals": "^15.14.0", 40 | "postcss": "^8.5.1", 41 | "tailwindcss": "^3.4.17", 42 | "typescript": "~5.6.2", 43 | "typescript-eslint": "^8.18.2", 44 | "vite": "^6.0.5" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /examples/realtime-chat-demo/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } -------------------------------------------------------------------------------- /examples/realtime-chat-demo/public/_headers: -------------------------------------------------------------------------------- 1 | /* 2 | Access-Control-Allow-Origin: * 3 | Cross-Origin-Opener-Policy: same-origin 4 | Cross-Origin-Embedder-Policy: require-corp 5 | 6 | /*.js 7 | Content-Type: application/javascript 8 | Access-Control-Allow-Origin: * 9 | 10 | /*.css 11 | Content-Type: text/css 12 | Access-Control-Allow-Origin: * 13 | 14 | /*.html 15 | Content-Type: text/html 16 | Access-Control-Allow-Origin: * -------------------------------------------------------------------------------- /examples/realtime-chat-demo/public/_routes.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 1, 3 | "include": ["/*"], 4 | "exclude": [ 5 | "/assets/*", 6 | "/_next/*", 7 | "/_next/static/*", 8 | "/api/*", 9 | "/*.js", 10 | "/*.css" 11 | ] 12 | } -------------------------------------------------------------------------------- /examples/realtime-chat-demo/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/realtime-chat-demo/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /examples/realtime-chat-demo/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 7 | line-height: 1.5; 8 | font-weight: 400; 9 | color-scheme: dark; 10 | background-color: #1a1a1a; 11 | color: #ffffff; 12 | } 13 | 14 | body { 15 | margin: 0; 16 | min-width: 320px; 17 | min-height: 100vh; 18 | } 19 | 20 | h1 { 21 | font-size: 24px; 22 | line-height: 1.1; 23 | margin: 0; 24 | font-weight: 600; 25 | } 26 | -------------------------------------------------------------------------------- /examples/realtime-chat-demo/src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { type ClassValue, clsx } from 'clsx'; 2 | import { twMerge } from 'tailwind-merge'; 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)); 6 | } -------------------------------------------------------------------------------- /examples/realtime-chat-demo/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React, { StrictMode } from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const rootElement = document.getElementById('root'); 7 | if (!rootElement) throw new Error('Failed to find the root element'); 8 | 9 | createRoot(rootElement).render( 10 | 11 | 12 | 13 | ); 14 | -------------------------------------------------------------------------------- /examples/realtime-chat-demo/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/realtime-chat-demo/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: [ 4 | "./index.html", 5 | "./src/**/*.{js,ts,jsx,tsx}" // This tells Tailwind to scan these file types in src folder 6 | ], 7 | theme: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | darkMode: 'class', // Enable dark mode if needed 12 | } -------------------------------------------------------------------------------- /examples/realtime-chat-demo/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2022", 5 | "lib": ["ES2023", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "isolatedModules": true, 12 | "moduleDetection": "force", 13 | 14 | /* Output configuration */ 15 | "composite": true, 16 | "outDir": "./dist", 17 | "noEmit": true, 18 | 19 | /* Linting */ 20 | "strict": true, 21 | "noUnusedLocals": true, 22 | "noUnusedParameters": true, 23 | "noFallthroughCasesInSwitch": true, 24 | "noUncheckedSideEffectImports": true, 25 | 26 | "esModuleInterop": true, 27 | "allowSyntheticDefaultImports": true, 28 | "types": ["node"] 29 | }, 30 | "include": ["vite.config.ts"] 31 | } -------------------------------------------------------------------------------- /examples/realtime-chat-demo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "skipLibCheck": true, 7 | "composite": true 8 | }, 9 | "files": [], 10 | "references": [ 11 | { "path": "./tsconfig.app.json" }, 12 | { "path": "./tsconfig.node.json" } 13 | ] 14 | } -------------------------------------------------------------------------------- /examples/realtime-chat-demo/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2022", 5 | "lib": ["ES2023", "DOM", "DOM.Iterable"], // Added DOM libraries 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true, 21 | "noUncheckedSideEffectImports": true, 22 | 23 | /* Added configurations */ 24 | "composite": true, 25 | "esModuleInterop": true, 26 | "allowSyntheticDefaultImports": true, 27 | "types": ["node"] 28 | }, 29 | "include": ["vite.config.ts"] 30 | } -------------------------------------------------------------------------------- /examples/realtime-chat-demo/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import react from '@vitejs/plugin-react'; 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | base:'/', 7 | plugins: [react()], 8 | build: { 9 | ssrManifest: true, 10 | rollupOptions: { 11 | output: { 12 | manualChunks: undefined 13 | } 14 | }, 15 | commonjsOptions: { 16 | include: [/@browserai\/browserai/, /node_modules/] 17 | }, 18 | outDir: 'dist', 19 | assetsDir: 'assets', 20 | sourcemap: true 21 | }, 22 | optimizeDeps: { 23 | include: ['@browserai/browserai'] 24 | }, 25 | server: { 26 | middlewareMode: false, 27 | fs: { 28 | strict: true 29 | } 30 | } 31 | }); 32 | -------------------------------------------------------------------------------- /examples/schema-llm/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/schema-llm/README.md: -------------------------------------------------------------------------------- 1 | # React + TypeScript + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: 13 | 14 | - Configure the top-level `parserOptions` property like this: 15 | 16 | ```js 17 | export default tseslint.config({ 18 | languageOptions: { 19 | // other options... 20 | parserOptions: { 21 | project: ['./tsconfig.node.json', './tsconfig.app.json'], 22 | tsconfigRootDir: import.meta.dirname, 23 | }, 24 | }, 25 | }) 26 | ``` 27 | 28 | - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` 29 | - Optionally add `...tseslint.configs.stylisticTypeChecked` 30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: 31 | 32 | ```js 33 | // eslint.config.js 34 | import react from 'eslint-plugin-react' 35 | 36 | export default tseslint.config({ 37 | // Set the react version 38 | settings: { react: { version: '18.3' } }, 39 | plugins: { 40 | // Add the react plugin 41 | react, 42 | }, 43 | rules: { 44 | // other rules... 45 | // Enable its recommended rules 46 | ...react.configs.recommended.rules, 47 | ...react.configs['jsx-runtime'].rules, 48 | }, 49 | }) 50 | ``` 51 | -------------------------------------------------------------------------------- /examples/schema-llm/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import tseslint from 'typescript-eslint' 6 | 7 | export default tseslint.config( 8 | { ignores: ['dist'] }, 9 | { 10 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 11 | files: ['**/*.{ts,tsx}'], 12 | languageOptions: { 13 | ecmaVersion: 2020, 14 | globals: globals.browser, 15 | }, 16 | plugins: { 17 | 'react-hooks': reactHooks, 18 | 'react-refresh': reactRefresh, 19 | }, 20 | rules: { 21 | ...reactHooks.configs.recommended.rules, 22 | 'react-refresh/only-export-components': [ 23 | 'warn', 24 | { allowConstantExport: true }, 25 | ], 26 | }, 27 | }, 28 | ) 29 | -------------------------------------------------------------------------------- /examples/schema-llm/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Schema LLM Demo 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /examples/schema-llm/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "schema-llm", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc -b && vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@browserai/browserai": "^1.0.26", 14 | "react": "^19.0.0", 15 | "react-dom": "^19.0.0" 16 | }, 17 | "devDependencies": { 18 | "@eslint/js": "^9.19.0", 19 | "@types/react": "^19.0.8", 20 | "@types/react-dom": "^19.0.3", 21 | "@vitejs/plugin-react": "^4.3.4", 22 | "eslint": "^9.19.0", 23 | "eslint-plugin-react-hooks": "^5.0.0", 24 | "eslint-plugin-react-refresh": "^0.4.18", 25 | "globals": "^15.14.0", 26 | "typescript": "~5.7.2", 27 | "typescript-eslint": "^8.22.0", 28 | "vite": "^6.1.0" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /examples/schema-llm/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/schema-llm/src/App.css: -------------------------------------------------------------------------------- 1 | .container { 2 | max-width: 800px; 3 | margin: 0 auto; 4 | padding: 20px; 5 | } 6 | 7 | .input-group { 8 | margin-bottom: 20px; 9 | } 10 | 11 | .input-group label { 12 | display: block; 13 | margin-bottom: 5px; 14 | font-weight: bold; 15 | } 16 | 17 | input, textarea { 18 | width: 100%; 19 | padding: 8px; 20 | border: 1px solid #ccc; 21 | border-radius: 4px; 22 | } 23 | 24 | textarea { 25 | min-height: 100px; 26 | font-family: monospace; 27 | } 28 | 29 | button { 30 | background-color: #4CAF50; 31 | color: white; 32 | padding: 10px 20px; 33 | border: none; 34 | border-radius: 4px; 35 | cursor: pointer; 36 | } 37 | 38 | button:disabled { 39 | background-color: #cccccc; 40 | cursor: not-allowed; 41 | } 42 | 43 | .output { 44 | margin-top: 20px; 45 | } 46 | 47 | .output pre { 48 | background-color: black; 49 | padding: 15px; 50 | border-radius: 4px; 51 | overflow-x: auto; 52 | white-space: pre-wrap; 53 | word-wrap: break-word; 54 | } 55 | 56 | .examples { 57 | margin: 20px 0; 58 | } 59 | 60 | .example-button { 61 | margin-right: 10px; 62 | background-color: #2196F3; 63 | } 64 | 65 | .example-button:hover { 66 | background-color: #1976D2; 67 | } -------------------------------------------------------------------------------- /examples/schema-llm/src/examples.ts: -------------------------------------------------------------------------------- 1 | export const sampleSchemas = { 2 | colors: `{ 3 | "type": "object", 4 | "properties": { 5 | "colors": { 6 | "type": "array", 7 | "items": { 8 | "type": "object", 9 | "properties": { 10 | "name": { "type": "string" }, 11 | "hex": { "type": "string" } 12 | } 13 | } 14 | } 15 | } 16 | }`, 17 | 18 | person: `{ 19 | "type": "object", 20 | "properties": { 21 | "name": { "type": "string" }, 22 | "age": { "type": "number" }, 23 | "hobbies": { 24 | "type": "array", 25 | "items": { "type": "string" } 26 | } 27 | } 28 | }` 29 | }; 30 | 31 | export const samplePrompts = { 32 | colors: "List 3 popular colors with their hex codes", 33 | person: "Create a profile for a fictional person named John" 34 | }; -------------------------------------------------------------------------------- /examples/schema-llm/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | place-items: center; 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | button { 39 | border-radius: 8px; 40 | border: 1px solid transparent; 41 | padding: 0.6em 1.2em; 42 | font-size: 1em; 43 | font-weight: 500; 44 | font-family: inherit; 45 | background-color: #1a1a1a; 46 | cursor: pointer; 47 | transition: border-color 0.25s; 48 | } 49 | button:hover { 50 | border-color: #646cff; 51 | } 52 | button:focus, 53 | button:focus-visible { 54 | outline: 4px auto -webkit-focus-ring-color; 55 | } 56 | 57 | @media (prefers-color-scheme: light) { 58 | :root { 59 | color: #213547; 60 | background-color: #ffffff; 61 | } 62 | a:hover { 63 | color: #747bff; 64 | } 65 | button { 66 | background-color: #f9f9f9; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /examples/schema-llm/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.tsx' 5 | 6 | createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /examples/schema-llm/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/schema-llm/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "bundler", 12 | "allowImportingTsExtensions": true, 13 | "isolatedModules": true, 14 | "moduleDetection": "force", 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true, 23 | "noUncheckedSideEffectImports": true 24 | }, 25 | "include": ["src"] 26 | } 27 | -------------------------------------------------------------------------------- /examples/schema-llm/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /examples/schema-llm/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2022", 5 | "lib": ["ES2023"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true, 21 | "noUncheckedSideEffectImports": true 22 | }, 23 | "include": ["vite.config.ts"] 24 | } 25 | -------------------------------------------------------------------------------- /examples/schema-llm/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /examples/tts-demo/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/tts-demo/README.md: -------------------------------------------------------------------------------- 1 | # React + TypeScript + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: 13 | 14 | - Configure the top-level `parserOptions` property like this: 15 | 16 | ```js 17 | export default tseslint.config({ 18 | languageOptions: { 19 | // other options... 20 | parserOptions: { 21 | project: ['./tsconfig.node.json', './tsconfig.app.json'], 22 | tsconfigRootDir: import.meta.dirname, 23 | }, 24 | }, 25 | }) 26 | ``` 27 | 28 | - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` 29 | - Optionally add `...tseslint.configs.stylisticTypeChecked` 30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: 31 | 32 | ```js 33 | // eslint.config.js 34 | import react from 'eslint-plugin-react' 35 | 36 | export default tseslint.config({ 37 | // Set the react version 38 | settings: { react: { version: '18.3' } }, 39 | plugins: { 40 | // Add the react plugin 41 | react, 42 | }, 43 | rules: { 44 | // other rules... 45 | // Enable its recommended rules 46 | ...react.configs.recommended.rules, 47 | ...react.configs['jsx-runtime'].rules, 48 | }, 49 | }) 50 | ``` 51 | -------------------------------------------------------------------------------- /examples/tts-demo/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import tseslint from 'typescript-eslint' 6 | 7 | export default tseslint.config( 8 | { ignores: ['dist'] }, 9 | { 10 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 11 | files: ['**/*.{ts,tsx}'], 12 | languageOptions: { 13 | ecmaVersion: 2020, 14 | globals: globals.browser, 15 | }, 16 | plugins: { 17 | 'react-hooks': reactHooks, 18 | 'react-refresh': reactRefresh, 19 | }, 20 | rules: { 21 | ...reactHooks.configs.recommended.rules, 22 | 'react-refresh/only-export-components': [ 23 | 'warn', 24 | { allowConstantExport: true }, 25 | ], 26 | }, 27 | }, 28 | ) 29 | -------------------------------------------------------------------------------- /examples/tts-demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/tts-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tts-demo", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc -b && vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@browserai/browserai": "^1.0.29", 14 | "@emotion/styled": "^11.14.0", 15 | "react": "^18.3.1", 16 | "react-dom": "^18.3.1" 17 | }, 18 | "devDependencies": { 19 | "@eslint/js": "^9.17.0", 20 | "@types/react": "^18.3.18", 21 | "@types/react-dom": "^18.3.5", 22 | "@vitejs/plugin-react": "^4.3.4", 23 | "eslint": "^9.17.0", 24 | "eslint-plugin-react-hooks": "^5.0.0", 25 | "eslint-plugin-react-refresh": "^0.4.16", 26 | "globals": "^15.14.0", 27 | "typescript": "~5.6.2", 28 | "typescript-eslint": "^8.18.2", 29 | "vite": "^6.0.5" 30 | } 31 | } -------------------------------------------------------------------------------- /examples/tts-demo/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/tts-demo/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /examples/tts-demo/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | color-scheme: light dark; 6 | color: rgba(255, 255, 255, 0.87); 7 | background-color: #1a1a1a; 8 | } 9 | 10 | body { 11 | margin: 0; 12 | min-width: 320px; 13 | min-height: 100vh; 14 | } -------------------------------------------------------------------------------- /examples/tts-demo/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | , 10 | ); -------------------------------------------------------------------------------- /examples/tts-demo/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/tts-demo/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "bundler", 12 | "allowImportingTsExtensions": true, 13 | "isolatedModules": true, 14 | "moduleDetection": "force", 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true, 23 | "noUncheckedSideEffectImports": true 24 | }, 25 | "include": ["src"] 26 | } 27 | -------------------------------------------------------------------------------- /examples/tts-demo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /examples/tts-demo/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2022", 5 | "lib": ["ES2023"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true, 21 | "noUncheckedSideEffectImports": true 22 | }, 23 | "include": ["vite.config.ts"] 24 | } 25 | -------------------------------------------------------------------------------- /examples/tts-demo/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /examples/voice-demo/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/voice-demo/README.md: -------------------------------------------------------------------------------- 1 | # React + TypeScript + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: 13 | 14 | - Configure the top-level `parserOptions` property like this: 15 | 16 | ```js 17 | export default tseslint.config({ 18 | languageOptions: { 19 | // other options... 20 | parserOptions: { 21 | project: ['./tsconfig.node.json', './tsconfig.app.json'], 22 | tsconfigRootDir: import.meta.dirname, 23 | }, 24 | }, 25 | }) 26 | ``` 27 | 28 | - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` 29 | - Optionally add `...tseslint.configs.stylisticTypeChecked` 30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: 31 | 32 | ```js 33 | // eslint.config.js 34 | import react from 'eslint-plugin-react' 35 | 36 | export default tseslint.config({ 37 | // Set the react version 38 | settings: { react: { version: '18.3' } }, 39 | plugins: { 40 | // Add the react plugin 41 | react, 42 | }, 43 | rules: { 44 | // other rules... 45 | // Enable its recommended rules 46 | ...react.configs.recommended.rules, 47 | ...react.configs['jsx-runtime'].rules, 48 | }, 49 | }) 50 | ``` 51 | -------------------------------------------------------------------------------- /examples/voice-demo/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import tseslint from 'typescript-eslint' 6 | 7 | export default tseslint.config( 8 | { ignores: ['dist'] }, 9 | { 10 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 11 | files: ['**/*.{ts,tsx}'], 12 | languageOptions: { 13 | ecmaVersion: 2020, 14 | globals: globals.browser, 15 | }, 16 | plugins: { 17 | 'react-hooks': reactHooks, 18 | 'react-refresh': reactRefresh, 19 | }, 20 | rules: { 21 | ...reactHooks.configs.recommended.rules, 22 | 'react-refresh/only-export-components': [ 23 | 'warn', 24 | { allowConstantExport: true }, 25 | ], 26 | }, 27 | }, 28 | ) 29 | -------------------------------------------------------------------------------- /examples/voice-demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/voice-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "voice-demo", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc -b && vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@browserai/browserai": "^1.0.29", 14 | "@emotion/styled": "^11.14.0", 15 | "react": "^19.0.0", 16 | "react-dom": "^19.0.0" 17 | }, 18 | "devDependencies": { 19 | "@eslint/js": "^9.19.0", 20 | "@types/react": "^19.0.8", 21 | "@types/react-dom": "^19.0.3", 22 | "@vitejs/plugin-react": "^4.3.4", 23 | "eslint": "^9.19.0", 24 | "eslint-plugin-react-hooks": "^5.0.0", 25 | "eslint-plugin-react-refresh": "^0.4.18", 26 | "globals": "^15.14.0", 27 | "typescript": "~5.7.2", 28 | "typescript-eslint": "^8.22.0", 29 | "vite": "^6.1.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /examples/voice-demo/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/voice-demo/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /examples/voice-demo/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | color-scheme: light dark; 6 | background-color: #1a1a1a; 7 | } 8 | 9 | body { 10 | margin: 0; 11 | padding: 0; 12 | min-width: 320px; 13 | min-height: 100vh; 14 | } 15 | 16 | #root { 17 | width: 100%; 18 | min-height: 100vh; 19 | } 20 | 21 | a { 22 | font-weight: 500; 23 | color: #646cff; 24 | text-decoration: inherit; 25 | } 26 | a:hover { 27 | color: #535bf2; 28 | } 29 | 30 | h1 { 31 | font-size: 3.2em; 32 | line-height: 1.1; 33 | } 34 | 35 | button { 36 | border-radius: 8px; 37 | border: 1px solid transparent; 38 | padding: 0.6em 1.2em; 39 | font-size: 1em; 40 | font-weight: 500; 41 | font-family: inherit; 42 | background-color: #1a1a1a; 43 | cursor: pointer; 44 | transition: border-color 0.25s; 45 | } 46 | button:hover { 47 | border-color: #646cff; 48 | } 49 | button:focus, 50 | button:focus-visible { 51 | outline: 4px auto -webkit-focus-ring-color; 52 | } 53 | 54 | @media (prefers-color-scheme: light) { 55 | :root { 56 | color: #213547; 57 | background-color: #ffffff; 58 | } 59 | a:hover { 60 | color: #747bff; 61 | } 62 | button { 63 | background-color: #f9f9f9; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /examples/voice-demo/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.tsx' 5 | 6 | createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /examples/voice-demo/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/voice-demo/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "bundler", 12 | "allowImportingTsExtensions": true, 13 | "isolatedModules": true, 14 | "moduleDetection": "force", 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true, 23 | "noUncheckedSideEffectImports": true 24 | }, 25 | "include": ["src"] 26 | } 27 | -------------------------------------------------------------------------------- /examples/voice-demo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /examples/voice-demo/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2022", 5 | "lib": ["ES2023"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true, 21 | "noUncheckedSideEffectImports": true 22 | }, 23 | "include": ["vite.config.ts"] 24 | } 25 | -------------------------------------------------------------------------------- /examples/voice-demo/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /extensions/chrome/README.md: -------------------------------------------------------------------------------- 1 | # React + TypeScript + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: 13 | 14 | - Configure the top-level `parserOptions` property like this: 15 | 16 | ```js 17 | export default tseslint.config({ 18 | languageOptions: { 19 | // other options... 20 | parserOptions: { 21 | project: ['./tsconfig.node.json', './tsconfig.app.json'], 22 | tsconfigRootDir: import.meta.dirname, 23 | }, 24 | }, 25 | }) 26 | ``` 27 | 28 | - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` 29 | - Optionally add `...tseslint.configs.stylisticTypeChecked` 30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: 31 | 32 | ```js 33 | // eslint.config.js 34 | import react from 'eslint-plugin-react' 35 | 36 | export default tseslint.config({ 37 | // Set the react version 38 | settings: { react: { version: '18.3' } }, 39 | plugins: { 40 | // Add the react plugin 41 | react, 42 | }, 43 | rules: { 44 | // other rules... 45 | // Enable its recommended rules 46 | ...react.configs.recommended.rules, 47 | ...react.configs['jsx-runtime'].rules, 48 | }, 49 | }) 50 | ``` 51 | -------------------------------------------------------------------------------- /extensions/chrome/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import tseslint from 'typescript-eslint' 6 | 7 | export default tseslint.config( 8 | { ignores: ['dist'] }, 9 | { 10 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 11 | files: ['**/*.{ts,tsx}'], 12 | languageOptions: { 13 | ecmaVersion: 2020, 14 | globals: globals.browser, 15 | }, 16 | plugins: { 17 | 'react-hooks': reactHooks, 18 | 'react-refresh': reactRefresh, 19 | }, 20 | rules: { 21 | ...reactHooks.configs.recommended.rules, 22 | 'react-refresh/only-export-components': [ 23 | 'warn', 24 | { allowConstantExport: true }, 25 | ], 26 | }, 27 | }, 28 | ) 29 | -------------------------------------------------------------------------------- /extensions/chrome/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Browser AI 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /extensions/chrome/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } -------------------------------------------------------------------------------- /extensions/chrome/public/content-script.css: -------------------------------------------------------------------------------- 1 | .floating-button { 2 | position: fixed; 3 | right: 20px; 4 | bottom: 20px; 5 | width: 50px; 6 | height: 50px; 7 | border-radius: 25px; 8 | background: #4F46E5; 9 | color: white; 10 | border: none; 11 | cursor: pointer; 12 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 13 | z-index: 9999; 14 | font-size: 24px; 15 | display: flex; 16 | align-items: center; 17 | justify-content: center; 18 | transition: transform 0.2s; 19 | } 20 | 21 | .floating-button:hover { 22 | transform: scale(1.1); 23 | } -------------------------------------------------------------------------------- /extensions/chrome/public/content-script.js: -------------------------------------------------------------------------------- 1 | console.log('Content script loaded!'); 2 | 3 | // Create and inject the floating button 4 | function createFloatingButton() { 5 | const button = document.createElement('button'); 6 | button.innerHTML = '🤖'; // You can replace this with an SVG icon 7 | button.className = 'floating-button'; 8 | 9 | button.addEventListener('click', () => { 10 | console.log('Button clicked!'); 11 | chrome.runtime.sendMessage({ action: 'openSidePanel' }); 12 | }); 13 | 14 | document.body.appendChild(button); 15 | } 16 | 17 | createFloatingButton(); 18 | 19 | // Listen for the custom event 20 | window.addEventListener('workflowData', function(event) { 21 | // Forward the data to the background script 22 | chrome.runtime.sendMessage({ 23 | action: 'workflowDataReceived', 24 | data: event.detail 25 | }); 26 | }); 27 | 28 | // Listen for action execution messages 29 | chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { 30 | if (request.action === 'executeAction') { 31 | // Import the executor dynamically 32 | import(chrome.runtime.getURL('src/core/browser-actions.js')) 33 | .then(module => { 34 | return module.executeAction({ 35 | type: request.type, 36 | params: request.params 37 | }); 38 | }) 39 | .then(result => { 40 | sendResponse({ success: true, result }); 41 | }) 42 | .catch(error => { 43 | sendResponse({ success: false, error: error.message }); 44 | }); 45 | 46 | return true; // Required for async sendResponse 47 | } 48 | }); -------------------------------------------------------------------------------- /extensions/chrome/public/icons/icon128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sauravpanda/BrowserAI/65eefbef53b3335b94631135272d04628dfbee7b/extensions/chrome/public/icons/icon128.png -------------------------------------------------------------------------------- /extensions/chrome/public/icons/icon16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sauravpanda/BrowserAI/65eefbef53b3335b94631135272d04628dfbee7b/extensions/chrome/public/icons/icon16.png -------------------------------------------------------------------------------- /extensions/chrome/public/icons/icon32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sauravpanda/BrowserAI/65eefbef53b3335b94631135272d04628dfbee7b/extensions/chrome/public/icons/icon32.png -------------------------------------------------------------------------------- /extensions/chrome/public/icons/icon64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sauravpanda/BrowserAI/65eefbef53b3335b94631135272d04628dfbee7b/extensions/chrome/public/icons/icon64.png -------------------------------------------------------------------------------- /extensions/chrome/public/sidepanel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Browser AI Side Panel 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /extensions/chrome/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /extensions/chrome/sidepanel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Browser AI Side Panel 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /extensions/chrome/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 0; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /extensions/chrome/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { Suspense, lazy } from 'react' 2 | import './App.css' 3 | import './index.css' 4 | 5 | const Popup = lazy(() => import('./popup/popup')) 6 | 7 | function App() { 8 | return ( 9 |
10 | Loading...
}> 11 | 12 | 13 | 14 | ) 15 | } 16 | 17 | export default App 18 | -------------------------------------------------------------------------------- /extensions/chrome/src/components/Header.tsx: -------------------------------------------------------------------------------- 1 | export function Header({ currentSection }: { currentSection: string }) { 2 | return ( 3 |
4 |

{currentSection}

5 |
6 | ); 7 | } 8 | -------------------------------------------------------------------------------- /extensions/chrome/src/components/ui/aspect-ratio.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" 4 | 5 | const AspectRatio = AspectRatioPrimitive.Root 6 | 7 | export { AspectRatio } 8 | -------------------------------------------------------------------------------- /extensions/chrome/src/components/ui/avatar.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as AvatarPrimitive from "@radix-ui/react-avatar" 5 | 6 | import { cn } from "../../lib/utils" 7 | 8 | const Avatar = React.forwardRef< 9 | React.ElementRef, 10 | React.ComponentPropsWithoutRef 11 | >(({ className, ...props }, ref) => ( 12 | 20 | )) 21 | Avatar.displayName = AvatarPrimitive.Root.displayName 22 | 23 | const AvatarImage = React.forwardRef< 24 | React.ElementRef, 25 | React.ComponentPropsWithoutRef 26 | >(({ className, ...props }, ref) => ( 27 | 32 | )) 33 | AvatarImage.displayName = AvatarPrimitive.Image.displayName 34 | 35 | const AvatarFallback = React.forwardRef< 36 | React.ElementRef, 37 | React.ComponentPropsWithoutRef 38 | >(({ className, ...props }, ref) => ( 39 | 47 | )) 48 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName 49 | 50 | export { Avatar, AvatarImage, AvatarFallback } 51 | -------------------------------------------------------------------------------- /extensions/chrome/src/components/ui/badge.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { cva, type VariantProps } from "class-variance-authority" 3 | 4 | import { cn } from "../../lib/utils" 5 | 6 | const badgeVariants = cva( 7 | "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", 8 | { 9 | variants: { 10 | variant: { 11 | default: 12 | "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", 13 | secondary: 14 | "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", 15 | destructive: 16 | "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", 17 | outline: "text-foreground", 18 | }, 19 | }, 20 | defaultVariants: { 21 | variant: "default", 22 | }, 23 | } 24 | ) 25 | 26 | export interface BadgeProps 27 | extends React.HTMLAttributes, 28 | VariantProps {} 29 | 30 | function Badge({ className, variant, ...props }: BadgeProps) { 31 | return ( 32 |
33 | ) 34 | } 35 | 36 | export { Badge, badgeVariants } 37 | -------------------------------------------------------------------------------- /extensions/chrome/src/components/ui/checkbox.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox" 5 | import { Check } from "lucide-react" 6 | 7 | import { cn } from "../../lib/utils" 8 | 9 | const Checkbox = React.forwardRef< 10 | React.ElementRef, 11 | React.ComponentPropsWithoutRef 12 | >(({ className, ...props }, ref) => ( 13 | 21 | 24 | 25 | 26 | 27 | )) 28 | Checkbox.displayName = CheckboxPrimitive.Root.displayName 29 | 30 | export { Checkbox } 31 | -------------------------------------------------------------------------------- /extensions/chrome/src/components/ui/collapsible.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as CollapsiblePrimitive from "@radix-ui/react-collapsible" 4 | 5 | const Collapsible = CollapsiblePrimitive.Root 6 | 7 | const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger 8 | 9 | const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent 10 | 11 | export { Collapsible, CollapsibleTrigger, CollapsibleContent } 12 | -------------------------------------------------------------------------------- /extensions/chrome/src/components/ui/hover-card.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as HoverCardPrimitive from "@radix-ui/react-hover-card" 5 | 6 | import { cn } from "../../lib/utils" 7 | 8 | const HoverCard = HoverCardPrimitive.Root 9 | 10 | const HoverCardTrigger = HoverCardPrimitive.Trigger 11 | 12 | const HoverCardContent = React.forwardRef< 13 | React.ElementRef, 14 | React.ComponentPropsWithoutRef 15 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( 16 | 26 | )) 27 | HoverCardContent.displayName = HoverCardPrimitive.Content.displayName 28 | 29 | export { HoverCard, HoverCardTrigger, HoverCardContent } 30 | -------------------------------------------------------------------------------- /extensions/chrome/src/components/ui/input.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "../../lib/utils" 4 | 5 | const Input = React.forwardRef>( 6 | ({ className, type, ...props }, ref) => { 7 | return ( 8 | 17 | ) 18 | } 19 | ) 20 | Input.displayName = "Input" 21 | 22 | export { Input } 23 | -------------------------------------------------------------------------------- /extensions/chrome/src/components/ui/label.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as LabelPrimitive from "@radix-ui/react-label" 5 | import { cva, type VariantProps } from "class-variance-authority" 6 | 7 | import { cn } from "../../lib/utils" 8 | 9 | const labelVariants = cva( 10 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" 11 | ) 12 | 13 | const Label = React.forwardRef< 14 | React.ElementRef, 15 | React.ComponentPropsWithoutRef & 16 | VariantProps 17 | >(({ className, ...props }, ref) => ( 18 | 23 | )) 24 | Label.displayName = LabelPrimitive.Root.displayName 25 | 26 | export { Label } 27 | -------------------------------------------------------------------------------- /extensions/chrome/src/components/ui/popover.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as PopoverPrimitive from "@radix-ui/react-popover" 5 | 6 | import { cn } from "../../lib/utils" 7 | 8 | const Popover = PopoverPrimitive.Root 9 | 10 | const PopoverTrigger = PopoverPrimitive.Trigger 11 | 12 | const PopoverContent = React.forwardRef< 13 | React.ElementRef, 14 | React.ComponentPropsWithoutRef 15 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( 16 | 17 | 27 | 28 | )) 29 | PopoverContent.displayName = PopoverPrimitive.Content.displayName 30 | 31 | export { Popover, PopoverTrigger, PopoverContent } 32 | -------------------------------------------------------------------------------- /extensions/chrome/src/components/ui/progress.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as ProgressPrimitive from "@radix-ui/react-progress" 5 | 6 | import { cn } from "../../lib/utils" 7 | 8 | const Progress = React.forwardRef< 9 | React.ElementRef, 10 | React.ComponentPropsWithoutRef 11 | >(({ className, value, ...props }, ref) => ( 12 | 20 | 24 | 25 | )) 26 | Progress.displayName = ProgressPrimitive.Root.displayName 27 | 28 | export { Progress } 29 | -------------------------------------------------------------------------------- /extensions/chrome/src/components/ui/radio-group.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as RadioGroupPrimitive from "@radix-ui/react-radio-group" 5 | import { Circle } from "lucide-react" 6 | 7 | import { cn } from "../../lib/utils" 8 | 9 | const RadioGroup = React.forwardRef< 10 | React.ElementRef, 11 | React.ComponentPropsWithoutRef 12 | >(({ className, ...props }, ref) => { 13 | return ( 14 | 19 | ) 20 | }) 21 | RadioGroup.displayName = RadioGroupPrimitive.Root.displayName 22 | 23 | const RadioGroupItem = React.forwardRef< 24 | React.ElementRef, 25 | React.ComponentPropsWithoutRef 26 | >(({ className, ...props }, ref) => { 27 | return ( 28 | 36 | 37 | 38 | 39 | 40 | ) 41 | }) 42 | RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName 43 | 44 | export { RadioGroup, RadioGroupItem } 45 | -------------------------------------------------------------------------------- /extensions/chrome/src/components/ui/separator.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as SeparatorPrimitive from "@radix-ui/react-separator" 5 | 6 | import { cn } from "../../lib/utils" 7 | 8 | const Separator = React.forwardRef< 9 | React.ElementRef, 10 | React.ComponentPropsWithoutRef 11 | >( 12 | ( 13 | { className, orientation = "horizontal", decorative = true, ...props }, 14 | ref 15 | ) => ( 16 | 27 | ) 28 | ) 29 | Separator.displayName = SeparatorPrimitive.Root.displayName 30 | 31 | export { Separator } 32 | -------------------------------------------------------------------------------- /extensions/chrome/src/components/ui/skeleton.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from "../../lib/utils" 2 | 3 | function Skeleton({ 4 | className, 5 | ...props 6 | }: React.HTMLAttributes) { 7 | return ( 8 |
12 | ) 13 | } 14 | 15 | export { Skeleton } 16 | -------------------------------------------------------------------------------- /extensions/chrome/src/components/ui/slider.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as SliderPrimitive from "@radix-ui/react-slider" 5 | 6 | import { cn } from "../../lib/utils" 7 | 8 | const Slider = React.forwardRef< 9 | React.ElementRef, 10 | React.ComponentPropsWithoutRef 11 | >(({ className, ...props }, ref) => ( 12 | 20 | 21 | 22 | 23 | 24 | 25 | )) 26 | Slider.displayName = SliderPrimitive.Root.displayName 27 | 28 | export { Slider } 29 | -------------------------------------------------------------------------------- /extensions/chrome/src/components/ui/switch.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as SwitchPrimitives from "@radix-ui/react-switch" 5 | 6 | import { cn } from "../../lib/utils" 7 | 8 | const Switch = React.forwardRef< 9 | React.ElementRef, 10 | React.ComponentPropsWithoutRef 11 | >(({ className, ...props }, ref) => ( 12 | 20 | 25 | 26 | )) 27 | Switch.displayName = SwitchPrimitives.Root.displayName 28 | 29 | export { Switch } 30 | -------------------------------------------------------------------------------- /extensions/chrome/src/components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "../../lib/utils" 4 | 5 | export interface TextareaProps 6 | extends React.TextareaHTMLAttributes {} 7 | 8 | const Textarea = React.forwardRef( 9 | ({ className, ...props }, ref) => { 10 | return ( 11 |