@juanpin/aicomponents

React Library Template

This template repository is your shortcut to building awesome React components and libraries!

Forget about the tedious setup – we've got you covered. Focus on writing your code, and let this template handle the rest.

Features

• TypeScript & JavaScript: Write your code in the language you prefer.
• Blazing fast: pnpm for speedy package management and Vite for lightning-fast builds.
• Husky enforces pre-commit hooks, Eslint and Stylelint will keep your code tidy and consistent.
• Jest and react-testing-library help you write robust tests.
• Storybook lets you create interactive demos and docs for your components.
• Optional Tailwind CSS: If you're into it, you can easily enable Tailwind CSS for styling.

See it in action: Demo Storybook

This template is your starting point for building high-quality React libraries. Clone it, customize it, and let's build something amazing!

Quickstart

Prerequisites

1. Install Node >= 20.x.
2. Install pnpm. E.g. corepack prepare pnpm@latest --activate.

Installation

Manually clone repo or use degit.

# With CSS Modules config
npx degit github:morewings/react-library-template my-library
# With Tailwind CSS config
npx degit github:morewings/react-library-template#tailwind my-library
cd ./my-library
pnpm i

Enable Tailwind CSS

You can find all changes at this PR and tailwind branch.

Improve tree shaking

The default settings allow modern bundlers such as Vite and esbuild successfully tree-shake unused modules from the bundle. Unfortunately there are problems with Next.js and Webpack not capable to tree-shake single file ES Module.

In order to fix this enable preserveModules setting in Rollup options.

import {defineConfig} from 'vite';

export default defineConfig(() => ({
    // ...
    build: {
        lib: {
            // ...
            fileName: (format, entryName) => {
                // Create entry file(s) inside the bundle
                if (entryName === 'src/lib/index') {
                    return `index.${format === 'es' ? 'js' : 'cjs'}`;
                // Organize external dependencies which included in the bundle
                } else if (entryName.includes('node_modules')) {
                    return `external/module.${format === 'es' ? 'js' : 'cjs'}`
                }
                // Keep other modules in places
                return `${entryName}.${format === 'es' ? 'js' : 'cjs'}`;
            },
            // Change bundle formats to ES Modules and commonJS.
            // UMD bundle will not work with preserveModules:true
            formats: ['es', 'cjs'],
        },
        rollupOptions: {
            // ...
            output: {
                // ...
                preserveModules: true,
            },
        },
    },
}));

You can find all changes at corresponding PR and tree-shaking branch.

@juanpin/aicomponents

AI Components package with Tailwind CSS v4 and bb: prefix.

Components

LocalChat

A configurable AI chat component with web worker support.

Props

• workerFallbackPath?: string - Custom worker fallback path (optional, absolute path)
• headerText?: string - Header text to display in the chat component (default: "Chat with our AI ✨")
• contextFiles?: string[] - Array of local file paths to use as LLM context (default: [])
• systemPrompt?: string - System prompt for the LLM (overrides default if set)
• modelName?: ModelName - Model to use for inference (default: ModelName.SMOLLM2_360M)

Available Models

import { ModelName } from '@juanpin/aicomponents';

// Available models:
ModelName.ZR1_1_5B           // 'onnx-community/ZR1-1.5B-ONNX'
ModelName.DEEPSEEK_R1_DISTILL // 'onnx-community/DeepSeek-R1-Distill-Qwen-1.5B-ONNX'
ModelName.LLAMA_3_2_1B       // 'onnx-community/Llama-3.2-1B-Instruct-q4f16'
ModelName.SMOLLM2_1_7B       // 'HuggingFaceTB/SmolLM2-1.7B-Instruct'
ModelName.SMOLLM2_360M       // 'HuggingFaceTB/SmolLM2-360M-Instruct' (default)
ModelName.SMOLLM_135M        // 'HuggingFaceTB/SmolLM-135M-Instruct'

Usage

import { LocalChat, ModelName } from '@juanpin/aicomponents';

// With default context (none)
<LocalChat />

// With a specific model
<LocalChat modelName={ModelName.LLAMA_3_2_1B} />

// With custom context files
<LocalChat contextFiles={["/public/profile.md", "/public/extra.md"]} />

// With all props
<LocalChat
  headerText="AI Assistant 🤖"
  workerFallbackPath="/custom-worker.js"
  contextFiles={["/public/profile.md", "/public/extra.md"]}
  systemPrompt="You are a helpful assistant."
  modelName={ModelName.SMOLLM2_1_7B}
/>

Installation

npm install @juanpin/aicomponents

CSS Import

Don't forget to import the CSS:

import '@juanpin/aicomponents/dist/tailwind.css';

The component uses the browser-brains-chat class wrapper with bb: prefixed Tailwind classes to avoid conflicts.