{"_id":"@buun_group/ai-restaurant-chat","name":"@buun_group/ai-restaurant-chat","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@buun_group/ai-restaurant-chat","version":"0.1.0","private":false,"main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","type":"module","scripts":{"build":"tsc"},"dependencies":{"openai":"^4.98.0"},"devDependencies":{"@types/node":"^22.15.18","@types/react":"^19.1.4","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.3.3"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"keywords":["ai","chat","restaurant","assistant","multilingual"],"license":"MIT","_id":"@buun_group/ai-restaurant-chat@0.1.0","gitHead":"677335dba32a3ebc364f62ecc91f4e81a990aea2","description":"A reusable AI Chat Widget for Next.js applications, powered by OpenRouter. Easily integrate a configurable chat interface into your restaurant or real estate broker websites.","_nodeVersion":"20.19.1","_npmVersion":"10.8.2","dist":{"integrity":"sha512-iRcLvf/74Zp8qryhIzv+SLiO5VrTkeURC/h7HTgo+mXEyjUjLYNKHwozJYfP/sNtZ++77r97WEOHiGJdJUXPPQ==","shasum":"9e4ad3ed94b3774eeb283da525dadd45602e01a1","tarball":"https://registry.npmjs.org/@buun_group/ai-restaurant-chat/-/ai-restaurant-chat-0.1.0.tgz","fileCount":14,"unpackedSize":24251,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDEg2w6SCd0jjQhscVXFGcWmDXgeWdkFK/v1MwiKVOimgIgFsMz3Zak0lXspVvpdFt1+dpqFcUJ+C8bXmGid7WLmYQ="}]},"_npmUser":{"name":"buun_group","email":"sacha.roussakis-notter@buungroup.com"},"directories":{},"maintainers":[{"name":"buun_group","email":"sacha.roussakis-notter@buungroup.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ai-restaurant-chat_0.1.0_1747382509964_0.8053225578709384"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-16T08:01:49.898Z","0.1.0":"2025-05-16T08:01:50.118Z","modified":"2025-05-16T08:01:50.340Z"},"maintainers":[{"name":"buun_group","email":"sacha.roussakis-notter@buungroup.com"}],"description":"A reusable AI Chat Widget for Next.js applications, powered by OpenRouter. Easily integrate a configurable chat interface into your restaurant or real estate broker websites.","keywords":["ai","chat","restaurant","assistant","multilingual"],"license":"MIT","readme":"# NPM Chatbot OpenRouter\n\nA reusable AI Chat Widget for Next.js applications, powered by OpenRouter. Easily integrate a configurable chat interface into your restaurant or real estate broker websites.\n\n## Features\n\n-   **React Component**: `<AIChatWidget />` for easy integration.\n-   **OpenRouter Integration**: Connects to various LLMs via OpenRouter.\n-   **Configurable Context**: Tailor the chatbot\\'s knowledge and persona (e.g., restaurant assistant, real estate broker).\n-   **Model Selection**: Supports multiple free models from OpenRouter, configurable via props.\n-   **Rate Limiting**: Basic in-memory rate limiting to prevent abuse (15 seconds per client ID).\n-   **Markdown Rendering**: Supports Markdown in chat responses (requires `react-markdown`).\n-   **TypeScript Support**: Built with TypeScript for type safety.\n-   **Private NPM Publishing**: Instructions included for publishing as a private package.\n\n## Folder Structure\n\n```\nnpm-chatbot-openrouter/\n├── src/\n│   ├── components/AIChatWidget.tsx\n│   ├── lib/useChat.ts\n│   └── api/handler.ts\n├── index.ts\n├── package.json\n├── tsconfig.json\n└── README.md\n```\n\n## Installation\n\n```bash\nnpm install @buun/ai-restaurant-chat # Replace with your actual package name after publishing\n```\n\nOr if you have a private registry setup:\n\n```bash\nnpm install @your-scope/npm-chatbot-openrouter\n```\n\n## Usage in a Next.js Site\n\n1.  **Add the Component**:\n    Import and use the `AIChatWidget` in your Next.js page or layout.\n\n    ```tsx\n    // Example: app/some-page/page.tsx\n    import { AIChatWidget } from \\'@buun/ai-restaurant-chat\\'; // Adjust import path to your package name\n\n    export default function MyPage() {\n      return (\n        <div>\n          <h1>Welcome to My Site</h1>\n          <AIChatWidget\n            type=\"restaurant\" // or \"broker\"\n            apiPath=\"/api/ai-chat\" // Your backend endpoint\n            context={{\n              // Restaurant example\n              restaurantName: \"Buun Sushi\",\n              menu: [\n                { id: 1, name: \"Sushi Platter\", price: \"$25\", description: \"Assorted sushi\" },\n                { id: 2, name: \"Ramen\", price: \"$15\", description: \"Pork broth ramen\" }\n              ],\n              hours: \"Mon-Sat 12pm-10pm\",\n              // model: \"mistralai/mistral-7b-instruct\" // Optional: specify a model\n            }}\n          />\n        </div>\n      );\n    }\n    ```\n\n2.  **Set up API Route**:\n    In your Next.js application (the one consuming this package), create an API route to handle chat requests. This route will import and use the handler from this package.\n\n    Create a file `app/api/ai-chat/route.ts` (or your chosen `apiPath`):\n\n    ```typescript\n    // app/api/ai-chat/route.ts\n    export { POST } from \\'@buun/ai-restaurant-chat/api/handler\\'; // Adjust import path\n    ```\n    *Note: Ensure the path to `handler.ts` is correct based on how your package exposes its modules. Typically, this might be `@your-scope/npm-chatbot-openrouter/dist/api/handler` after building, or you might re-export it from `index.ts`.*\n\n\n3.  **Environment Variables**:\n    You **must** set your OpenRouter API key as an environment variable in your Next.js application.\n\n    Create a `.env.local` file in the root of your Next.js project:\n    ```\n    OPENROUTER_API_KEY=sk-or-v1-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\n    ```\n    Remember to add this to your hosting provider\\'s environment variables (e.g., Vercel, Netlify).\n\n## Configuration\n\n### `AIChatWidget` Props\n\n| Prop             | Type                                     | Default                              | Description                                                                                                |\n| ---------------- | ---------------------------------------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------- |\n| `apiPath`        | `string`                                 | - (Required)                         | The API endpoint in your Next.js app that proxies requests to the chatbot handler.                         |\n| `type`           | `\\'restaurant\\' \\| \\'broker\\'`             | `\\'restaurant\\'`                       | Determines the system prompt and persona of the chatbot.                                                   |\n| `context`        | `object`                                 | `{}`                                 | An object containing contextual information for the chatbot (e.g., menu, listings, hours, model override). |\n| `initialMessages`| `Array<{role: string, content: string}>` | `[]`                                 | Optional initial messages for the chat.                                                                    |\n| `defaultModel`   | `string`                                 | `\\'huggingfaceh4/zephyr-7b-beta\\'`     | Default model to use if not specified in context.                                                          |\n| `rateLimitConfig`| `{ windowMs?: number, max?: number }`    | `{ windowMs: 15000, max: 1 }`        | Configuration for client-side request throttling (not the server-side X-Chat-Client-Id based one).     |\n| `placeholder`    | `string`                                 | `\\'Type your message...\\'`            | Placeholder text for the chat input.                                                                       |\n| `title`          | `string`                                 | `\\'AI Assistant\\'`                     | Title displayed at the top of the chat widget.                                                             |\n\n\n### API Handler (`src/api/handler.ts`)\n\nThe handler uses the `type` and `context` passed in the request body:\n-   `type`: Can be `\\'restaurant\\'` or `\\'broker\\'`. This selects the appropriate system prompt.\n-   `context`: This object is stringified and injected into the system prompt. You can pass details like menus, business hours, property information, etc.\n-   `model`: You can override the default model by passing a `model` string in the `context` object sent from the client, or directly in the POST request body.\n\n    Example request body to API:\n    ```json\n    {\n      \"messages\": [{\"role\": \"user\", \"content\": \"Hello!\"}],\n      \"type\": \"restaurant\",\n      \"context\": { \"restaurantName\": \"The Great Eatery\", \"model\": \"mistralai/mistral-7b-instruct\" },\n      \"model\": \"mistralai/mistral-7b-instruct\" // Alternative way to specify model\n    }\n    ```\n\n### Supported Models\n\nYou can specify a model to use by passing it in the `context` prop of the `AIChatWidget` or directly in the API request. Some suggested free models include:\n\n-   `huggingfaceh4/zephyr-7b-beta` (default)\n-   `mistralai/mistral-7b-instruct`\n-   `openchat/openchat-7b`\n-   `undi95/toppy-m-7b`\n-   `gryphe/mythomax-l2-13b`\n\nCheck [OpenRouter.ai](https://openrouter.ai/docs#models) for a full list of available models.\n\n## Publishing to NPM\n\n### 1. Update `package.json`\n\nEnsure your `package.json` is correctly configured:\n-   `name`: Should be `@your-scope/your-package-name` (e.g., `@buun/npm-chatbot-openrouter`).\n-   `version`: Set your initial version (e.g., `0.1.0`).\n-   `main`: Should point to your main entry file in the `dist` folder (e.g., `dist/index.js`).\n-   `module`: For ES module support (e.g., `dist/index.mjs`).\n-   `types`: Points to your type definitions (e.g., `dist/index.d.ts`).\n-   `files`: An array of files/folders to include in the package (e.g., `[\"dist\", \"src/api/handler.ts\"]`). *Adjust if you re-export handler.ts differently.*\n-   `scripts`: Include a build script: `\"build\": \"tsup index.ts --format cjs,esm --dts\"` (using `tsup` for bundling is recommended, or `tsc`).\n-   `peerDependencies`: List `react` and `react-dom`.\n    ```json\n    {\n      \"name\": \"@your-scope/npm-chatbot-openrouter\",\n      \"version\": \"0.1.0\",\n      \"main\": \"dist/index.js\",\n      \"module\": \"dist/index.mjs\",\n      \"types\": \"dist/index.d.ts\",\n      \"files\": [\n        \"dist\",\n        \"src/api/handler.ts\" \n      ],\n      \"scripts\": {\n        \"build\": \"tsup src/index.ts --format cjs,esm --dts --external react\", // Ensure tsup is a devDependency\n        \"lint\": \"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0\",\n        \"test\": \"echo \\\\\"Error: no test specified\\\\\" && exit 1\"\n      },\n      \"peerDependencies\": {\n        \"react\": \">=17.0.0\",\n        \"react-dom\": \">=17.0.0\"\n      },\n      \"devDependencies\": {\n        \"@types/react\": \"^18.2.0\",\n        \"tsup\": \"^8.0.0\", // Or your preferred bundler\n        \"typescript\": \"^5.0.0\",\n        \"eslint\": \"...\",\n         // ... other dev dependencies\n      },\n      \"dependencies\": {\n        \"openai\": \"^4.0.0\" // Or the version you intend to use\n      }\n      // ... other fields like license, repository, keywords\n    }\n    ```\n\n### 2. Build Your Package\n\nRun your build script:\n```bash\nnpm run build\n```\nThis should generate the `dist` folder.\n\n### 3. Login to NPM\n\nIf you haven\\'t already, log in to your NPM account:\n```bash\nnpm login\n```\n(You might need to configure it for your private registry if you\\'re using one like GitHub Packages or Verdaccio).\n\n### 4. Publish\n\n**For a public package:**\n```bash\nnpm publish\n```\n\n**For a private package (scoped packages are private by default if the scope is associated with an org/paid account, otherwise use `--access`):**\nIf your package is scoped (e.g., `@username/my-package`), it defaults to restricted/private if your user/org has private package capabilities. Otherwise, for unscoped packages or to be explicit:\n```bash\nnpm publish --access=restricted\n```\nIf publishing to a private registry like GitHub Packages, you might need to configure your `.npmrc` file.\n\n## Optional Add-ons & Future Enhancements\n\n-   **Streaming Responses**: Implement `ReadableStream` for a more interactive experience.\n-   **Persistent Chat History**: Use `localStorage` or a backend service like Supabase.\n-   **Multilingual Auto-Detect**: Integrate libraries like `franc-min` or use `navigator.language`.\n-   **Language Toggle**: Allow users to switch languages.\n-   **Advanced Rate Limiting**: Extend server-side rate limiting with Redis or a durable cache.\n-   **Analytics**: Implement tracking using Vercel Edge Middleware or other analytics tools.\n-   **UI for Model Selection**: Add a dropdown in the `AIChatWidget` to let users choose a model.\n\n## Markdown Rendering (Frontend)\n\nTo enable Markdown rendering for chat messages, install `react-markdown`:\n```bash\nnpm install react-markdown\n```\n\nThen, update the message display in `AIChatWidget.tsx`:\n```tsx\nimport ReactMarkdown from \\'react-markdown\\';\n\n// Inside your component, when rendering messages:\n// <div className={`inline-block px-3 py-2 rounded-xl ${msg.role === \\'user\\' ? \\'bg-blue-100\\' : \\'bg-gray-100\\'}`}>\n//   <ReactMarkdown>{msg.content}</ReactMarkdown>\n// </div>\n```\n\nThis README provides a comprehensive guide to get started. You\\'ll need to fill in the actual implementation for `AIChatWidget.tsx`, `useChat.ts`, and potentially `index.ts` to export your components and functions.\n","readmeFilename":"README.md","_rev":"1-c7c0504ee03e3dfe457367a7866c3b0c"}