@contenify/chatbot 4.0.1 → 4.0.2

package/README.md

@@ -1,121 +1,162 @@
 # @contenify/chatbot
 
-AI-powered news chatbot widget for content creation. Paste a news URL or topic, get a fully rewritten article with SEO analysis, export to PDF/DOCX, or post it directly to your platform.
+An AI-powered content creation widget. Drop it into any React app and your users can paste a news URL or topic, get a fully rewritten article, run SEO analysis, and export or publish — all from one chat interface.
 
-## Installation
+---
+
+## Table of Contents
+
+1. [Prerequisites](#1-prerequisites)
+2. [Installation](#2-installation)
+3. [Get Your API Key](#3-get-your-api-key)
+4. [Set Up Environment Variables](#4-set-up-environment-variables)
+5. [Add the Component](#5-add-the-component)
+6. [Next.js Setup](#6-nextjs-setup)
+7. [Receive Published Articles](#7-receive-published-articles)
+8. [Props Reference](#8-props-reference)
+9. [Update Config at Runtime](#9-update-config-at-runtime)
+10. [What the Widget Can Do](#10-what-the-widget-can-do)
+11. [Troubleshooting](#11-troubleshooting)
+
+---
+
+## 1. Prerequisites
+
+- React **18** or higher
+- A Contenify API key (see [Step 3](#3-get-your-api-key))
+
+---
+
+## 2. Installation
 
 ```bash
 npm install @contenify/chatbot
 # or
 yarn add @contenify/chatbot
+# or
+pnpm add @contenify/chatbot
 ```
 
-## Quick Start
+---
 
-```tsx
-import { ContenifyChatBot } from '@contenify/chatbot'
-import '@contenify/chatbot/styles.css'
+## 3. Get Your API Key
 
-export default function App() {
-  return (
-    <ContenifyChatBot
-      apiUrl="https://your-backend.com/api"
-      apiKey="your-api-key"
-    />
-  )
-}
-```
+1. Go to [contenify.in/dashboard/api-keys](https://contenify.in/dashboard/api-keys)
+2. Create a new API key
+3. Copy the key — you will need it in the next step
 
-## Props
+---
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `apiUrl` | `string` | No | Base URL of your Contenify backend API. Defaults to `NEXT_PUBLIC_CONTENIFY_API_URL` env var. |
-| `apiKey` | `string` | No | Your subscription API key. Defaults to `NEXT_PUBLIC_API_KEY` env var. |
-| `domain` | `string` | No | Your site domain, used for source filtering. |
-| `onPost` | `(article: string, keywords: string[]) => void` | No | Called when the user clicks **Post** in the editor. Receives the article HTML and meta keywords. |
+## 4. Set Up Environment Variables
 
-## Environment Variables (alternative to props)
+Create a `.env` file in the root of your project (or add to your existing one):
 
 ```env
-NEXT_PUBLIC_CONTENIFY_API_URL=https://your-backend.com/api
-NEXT_PUBLIC_API_KEY=your-api-key
+NEXT_PUBLIC_CONTENIFY_API_URL=https://api.contenifyai.cloud/api
+NEXT_PUBLIC_API_KEY=your-api-key-here
 NEXT_PUBLIC_CONTENIFY_DOMAIN=yourdomain.com
 ```
 
-Props take precedence over env vars at runtime.
+| Variable | Required | Description |
+|---|---|---|
+| `NEXT_PUBLIC_CONTENIFY_API_URL` | Yes | The Contenify backend URL |
+| `NEXT_PUBLIC_API_KEY` | Yes | Your API key from Step 3 |
+| `NEXT_PUBLIC_CONTENIFY_DOMAIN` | No | Your site domain, used for news source filtering |
+
+> The widget reads these variables automatically. You do not need to pass them as props unless you want to override them per instance.
 
-## Styles
+---
 
-Import the stylesheet once at the root of your app:
+## 5. Add the Component
+
+Import the component and its styles, then place it anywhere in your app:
 
 ```tsx
+import { ContenifyChatBot } from '@contenify/chatbot'
 import '@contenify/chatbot/styles.css'
+
+export default function App() {
+  return <ContenifyChatBot />
+}
 ```
 
-## Post Button / External Trigger
+That's it. The widget picks up `NEXT_PUBLIC_CONTENIFY_API_URL` and `NEXT_PUBLIC_API_KEY` from your environment automatically.
 
-When the user clicks **Post** inside the article editor, a `contenify-post-article` DOM event fires on `window`. You can listen to it anywhere in your app — useful if you need to send data to your own CMS or API independently of the `onPost` prop.
+---
 
-```ts
-window.addEventListener('contenify-post-article', (e: Event) => {
-  const { title, subtitle, article, metaDescription, slug, keywords, featuredImage } = (e as CustomEvent).detail
+## 6. Next.js Setup
 
-  // Send to your CMS, API, or publishing pipeline
-  await myApi.publish({ title, article, keywords })
-})
-```
+### App Router (recommended)
 
-### Full payload shape
+The widget uses React hooks internally so it must run on the client. Create a wrapper component:
 
-```ts
-{
-  title: string
-  subtitle: string
-  article: string          // Rich HTML content
-  metaDescription: string
-  slug: string             // Auto-generated from title, user-editable
-  keywords: string[]       // Meta keywords array
-  featuredImage?: string   // URL of featured image (if present)
-}
-```
+```tsx
+// app/components/ContentEditor.tsx
+'use client'
 
-> SEO analysis data is **not** included in the post payload — it is for display only.
+import { ContenifyChatBot } from '@contenify/chatbot'
+import '@contenify/chatbot/styles.css'
 
-## Invalid / Expired API Key
+export default function ContentEditor() {
+  return <ContenifyChatBot />
+}
+```
 
-If the API key is missing or rejected, a modal automatically prompts the user to enter a valid key. You can also update the key programmatically at any time:
+Then use it in any Server Component or page:
 
-```ts
-import { setConfig } from '@contenify/chatbot'
+```tsx
+// app/page.tsx
+import ContentEditor from './components/ContentEditor'
 
-setConfig({ apiKey: 'new-api-key' })
+export default function Page() {
+  return (
+    <main>
+      <ContentEditor />
+    </main>
+  )
+}
 ```
 
-## Next.js Setup
+### Pages Router
 
-The component uses `"use client"` internally. If your project uses the App Router, wrap it in a client component:
+No wrapper needed — just import and use directly:
 
 ```tsx
-// app/ChatPage.tsx
-'use client'
+// pages/editor.tsx
 import { ContenifyChatBot } from '@contenify/chatbot'
 import '@contenify/chatbot/styles.css'
 
-export default function ChatPage() {
-  return <ContenifyChatBot apiUrl="..." apiKey="..." />
+export default function EditorPage() {
+  return <ContenifyChatBot />
 }
 ```
 
-## Usage with onPost
+### Import styles globally (optional)
+
+Instead of importing styles in every file, add it once to `app/layout.tsx` or `pages/_app.tsx`:
+
+```tsx
+// app/layout.tsx
+import '@contenify/chatbot/styles.css'
+```
+
+---
+
+## 7. Receive Published Articles
+
+When a user clicks **Post** inside the editor, you can receive the article data in two ways:
+
+### Option A — `onPost` prop
 
 ```tsx
 'use client'
+
 import { ContenifyChatBot } from '@contenify/chatbot'
 import '@contenify/chatbot/styles.css'
 
 export default function Editor() {
   const handlePost = async (article: string, keywords: string[]) => {
+    // Send the article to your own API or CMS
     await fetch('/api/publish', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -123,16 +164,137 @@ export default function Editor() {
     })
   }
 
-  return (
-    <ContenifyChatBot
-      apiUrl={process.env.NEXT_PUBLIC_CONTENIFY_API_URL}
-      apiKey={process.env.NEXT_PUBLIC_API_KEY}
-      onPost={handlePost}
-    />
-  )
+  return <ContenifyChatBot onPost={handlePost} />
 }
 ```
 
+### Option B — DOM event listener
+
+Listen for the `contenify-post-article` event on `window`. This is useful when you need to handle publishing outside of the React component tree:
+
+```ts
+window.addEventListener('contenify-post-article', (e: Event) => {
+  const detail = (e as CustomEvent).detail
+
+  console.log(detail.title)          // Article title
+  console.log(detail.subtitle)       // Subtitle
+  console.log(detail.article)        // Full HTML content
+  console.log(detail.metaDescription) // Meta description
+  console.log(detail.slug)           // URL slug (auto-generated, user-editable)
+  console.log(detail.keywords)       // string[] of meta keywords
+  console.log(detail.featuredImage)  // Image URL (if present)
+})
+```
+
+---
+
+## 8. Props Reference
+
+All props are optional. The widget works out of the box using environment variables.
+
+| Prop | Type | Description |
+|---|---|---|
+| `apiUrl` | `string` | Override the API base URL. Defaults to `NEXT_PUBLIC_CONTENIFY_API_URL`. |
+| `apiKey` | `string` | Override the API key. Defaults to `NEXT_PUBLIC_API_KEY`. |
+| `domain` | `string` | Override the domain. Defaults to `NEXT_PUBLIC_CONTENIFY_DOMAIN`. |
+| `onPost` | `(article: string, keywords: string[]) => void` | Called when the user posts an article from the editor. |
+
+### Passing props explicitly
+
+If you prefer to pass values as props instead of using env vars:
+
+```tsx
+<ContenifyChatBot
+  apiUrl="https://api.contenifyai.cloud/api"
+  apiKey="your-api-key"
+  domain="yourdomain.com"
+  onPost={(article, keywords) => console.log(article, keywords)}
+/>
+```
+
+**Priority order:** explicit prop > environment variable > built-in default.
+
+---
+
+## 9. Update Config at Runtime
+
+Use `setConfig` to update the API URL, key, or domain at any point — for example, after a user logs in:
+
+```ts
+import { setConfig } from '@contenify/chatbot'
+
+// After login
+setConfig({ apiKey: 'user-specific-api-key' })
+
+// Change environment dynamically
+setConfig({
+  apiUrl: 'https://api.contenifyai.cloud/api',
+  apiKey: 'new-key',
+  domain: 'newdomain.com',
+})
+```
+
+---
+
+## 10. What the Widget Can Do
+
+**Paste a URL**
+Paste any news article URL into the chat. The widget fetches the content and presents action options.
+
+**Available actions on a URL:**
+- Recreate the article
+- Write a blog post
+- Create a summary
+- Generate social media posts
+- Write a newsletter
+- Extract key points
+
+**Type a topic**
+Type any topic or text directly and the widget generates an article from scratch.
+
+**Article editor features:**
+- Rich text editor with live formatting
+- SEO score with grade (A–F) and recommendations
+- Auto-fix SEO issues with one click
+- Edit title, subtitle, meta description, slug, and keywords
+- Copy to clipboard
+- Download as PDF or DOCX
+- Post directly to your platform via `onPost`
+
+**History panel**
+Previously generated articles are saved locally and accessible from the history panel.
+
+**News panel**
+Browse trending news and news by source to use as inspiration.
+
+---
+
+## 11. Troubleshooting
+
+**Widget shows an "Invalid API Key" modal**
+
+- Check that `NEXT_PUBLIC_API_KEY` is set in your `.env` file
+- Make sure you restarted your dev server after adding env vars
+- Verify the key is active at [contenify.in/dashboard/api-keys](https://contenify.in/dashboard/api-keys)
+
+**Styles are not loading**
+
+Make sure you import the stylesheet:
+
+```ts
+import '@contenify/chatbot/styles.css'
+```
+
+**"use client" error in Next.js App Router**
+
+Wrap the component in a client component as shown in [Step 6](#6-nextjs-setup).
+
+**API requests failing (CORS or network errors)**
+
+Confirm `NEXT_PUBLIC_CONTENIFY_API_URL` points to the correct backend URL and that the server allows requests from your domain.
+
+---
+
 ## License
 
 MIT

package/dist/index.d.mts

@@ -42,6 +42,6 @@ interface ContenifyChatBotProps {
     domain?: string;
     onPost?: (content: string, keywords: string[]) => void;
 }
-declare function ContenifyChatBot({ apiUrl, apiKey, domain, onPost }: ContenifyChatBotProps): react_jsx_runtime.JSX.Element;
+declare function ContenifyChatBot({ apiUrl, apiKey, domain, onPost, }: ContenifyChatBotProps): react_jsx_runtime.JSX.Element;
 
 export { type AnalyzeInputResponse, ContenifyChatBot, type ContenifyChatBotProps, type ContentOption, type CreateContentPayload, type RecreateSettings, ContenifyChatBot as default, setConfig };

package/dist/index.d.ts

@@ -42,6 +42,6 @@ interface ContenifyChatBotProps {
     domain?: string;
     onPost?: (content: string, keywords: string[]) => void;
 }
-declare function ContenifyChatBot({ apiUrl, apiKey, domain, onPost }: ContenifyChatBotProps): react_jsx_runtime.JSX.Element;
+declare function ContenifyChatBot({ apiUrl, apiKey, domain, onPost, }: ContenifyChatBotProps): react_jsx_runtime.JSX.Element;
 
 export { type AnalyzeInputResponse, ContenifyChatBot, type ContenifyChatBotProps, type ContentOption, type CreateContentPayload, type RecreateSettings, ContenifyChatBot as default, setConfig };

package/dist/index.js

@@ -2897,7 +2897,12 @@ ${optionsList}` }) : m
 
 // src/index.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-function ContenifyChatBot({ apiUrl, apiKey, domain, onPost }) {
+function ContenifyChatBot({
+  apiUrl = process.env.NEXT_PUBLIC_CONTENIFY_API_URL,
+  apiKey = process.env.NEXT_PUBLIC_API_KEY,
+  domain = process.env.NEXT_PUBLIC_CONTENIFY_DOMAIN,
+  onPost
+}) {
   (0, import_react10.useEffect)(() => {
     setConfig({ apiUrl, apiKey, domain });
   }, [apiUrl, apiKey, domain]);