@contenify/chatbot

An AI-powered content creation widget for React. 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.

Table of Contents

1. Prerequisites
2. Installation
3. Get Your API Key
4. Set Up Environment Variables
5. Add the Component
6. Next.js Setup
7. Receive Published Articles
8. Props Reference
9. Update Config at Runtime
10. What the Widget Can Do
11. API Key Management
12. Troubleshooting

1. Prerequisites

• React 18 or higher
• A Contenify API key (see Step 3)

2. Installation

npm install @contenify/chatbot
# or
yarn add @contenify/chatbot
# or
pnpm add @contenify/chatbot

3. Get Your API Key

1. Go to contenifyai.com and create an account
2. Open the Dashboard → Settings → API Keys
3. Generate your API key and copy it — you will need it in the next step

Note: Only one API key exists per account. Generating a new key immediately revokes the previous one.

4. Set Up Environment Variables

Create a .env.local file in the root of your project (or add to your existing one):

NEXT_PUBLIC_CONTENIFY_API_URL=https://api.contenifyai.com/api
NEXT_PUBLIC_API_KEY=your-api-key-here
NEXT_PUBLIC_CONTENIFY_DOMAIN=yourdomain.com

| Variable | Required | Description | |---|---|---| | NEXT_PUBLIC_CONTENIFY_API_URL | Yes | Contenify production API URL | | NEXT_PUBLIC_API_KEY | Yes | Your API key from the dashboard | | 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.

5. Add the Component

Import the component and its styles, then place it anywhere in your app:

import { ContenifyChatBot } from '@contenify/chatbot'
import '@contenify/chatbot/styles.css'

export default function App() {
  return <ContenifyChatBot />
}

The widget picks up NEXT_PUBLIC_CONTENIFY_API_URL and NEXT_PUBLIC_API_KEY from your environment automatically.

6. Next.js Setup

App Router (recommended)

The widget uses React hooks internally so it must run on the client. Create a wrapper component:

// app/components/ContentEditor.tsx
'use client'

import { ContenifyChatBot } from '@contenify/chatbot'
import '@contenify/chatbot/styles.css'

export default function ContentEditor() {
  return <ContenifyChatBot />
}

Then use it in any Server Component or page:

// app/page.tsx
import ContentEditor from './components/ContentEditor'

export default function Page() {
  return (
    <main>
      <ContentEditor />
    </main>
  )
}

Pages Router

No wrapper needed — import and use directly:

// pages/editor.tsx
import { ContenifyChatBot } from '@contenify/chatbot'
import '@contenify/chatbot/styles.css'

export default function EditorPage() {
  return <ContenifyChatBot />
}

Import styles globally (optional)

Instead of importing styles in every file, add it once to app/layout.tsx or pages/_app.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

'use client'

import { ContenifyChatBot } from '@contenify/chatbot'
import '@contenify/chatbot/styles.css'

export default function Editor() {
  const handlePost = async (article: string, keywords: string[]) => {
    await fetch('/api/publish', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ article, keywords }),
    })
  }

  return <ContenifyChatBot onPost={handlePost} />
}

Option B — DOM event listener

Listen for the contenify-post-article event on window. Useful when you need to handle publishing outside the React component tree:

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)   // Featured image URL (if selected)
})

8. Props Reference

All props are optional. The widget works out of the box using environment variables.

| Prop | Type | Default | Description | |---|---|---|---| | apiUrl | string | NEXT_PUBLIC_CONTENIFY_API_URL | Override the API base URL | | apiKey | string | NEXT_PUBLIC_API_KEY | Override the API key | | domain | string | NEXT_PUBLIC_CONTENIFY_DOMAIN | Override the domain for news filtering | | onPost | (article: string, keywords: string[]) => void | — | Called when the user posts an article |

Priority order: explicit prop → environment variable → built-in default.

Passing props explicitly

<ContenifyChatBot
  apiUrl="https://api.contenifyai.com/api"
  apiKey="your-api-key"
  domain="yourdomain.com"
  onPost={(article, keywords) => console.log(article, keywords)}
/>

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:

import { setConfig } from '@contenify/chatbot'

// After login — update only the key
setConfig({ apiKey: 'user-specific-api-key' })

// Switch environments dynamically
setConfig({
  apiUrl: 'https://api.contenifyai.com/api',
  apiKey: 'new-key',
  domain: 'newdomain.com',
})

setConfig merges with the existing config — you only need to pass what changed.

10. What the Widget Can Do

Paste a news URL

Paste any news article URL into the chat. The widget fetches the content and presents action options:

| Action | Description | |---|---| | Recreate article | Rewrites the source article in a new style | | Write a blog post | Converts the article into a blog-friendly format | | Create a summary | Generates a concise summary | | Generate social posts | Creates ready-to-use social media captions | | Write a newsletter | Formats the content as an email newsletter | | Extract key points | Pulls out the main takeaways as a bullet list |

Type a topic

Type any topic or text directly into the chat — the widget generates a full article from scratch.

Article editor features

• Rich text editor with live formatting
• SEO score (0–100) with letter grade (A–F) and issue breakdown
• One-click SEO auto-fix — patches highlighted text to resolve issues
• Edit title, subtitle, meta description, slug, and keywords
• Select a featured image from AI-suggested options
• Copy full article to clipboard
• Download as PDF or DOCX
• Post directly to your platform via onPost or the DOM event

History panel

Previously generated articles are saved and accessible from the history sidebar.

News panel

Browse trending news and articles by source to use as inspiration or as input for content generation.

11. API Key Management

• API keys are managed at contenifyai.com/dashboard/settings
• Each account has one active API key at a time
• Generating a new key immediately revokes the previous key
• If your key is compromised, regenerate it from the dashboard — the widget will start using the new key after you update your environment variable or call setConfig

All API requests are authenticated with your key via the x-api-key header. Requests without a valid key return a 401 and the widget shows an "Invalid API Key" prompt to the user.

12. Troubleshooting

Widget shows "Invalid API Key"

• Verify NEXT_PUBLIC_API_KEY is set correctly in your .env.local
• Restart your dev server after adding or changing env vars (npm run dev)
• Check that the key is active at contenifyai.com/dashboard/settings

Styles are not loading

import '@contenify/chatbot/styles.css'

Make sure this import exists in your entry file or layout.

"use client" error in Next.js App Router Wrap the component in a client component as shown in Step 6.

API requests failing (CORS / network errors)

• Confirm NEXT_PUBLIC_CONTENIFY_API_URL is set to https://api.contenifyai.com/api
• Ensure your domain is registered in the Contenify dashboard under allowed origins

History not loading

• The history panel requires a valid API key and an active subscription
• Check the browser console for any 401 or 403 errors

Links

| Resource | URL | |---|---| | Website | contenifyai.com | | Dashboard | contenifyai.com/dashboard | | API Docs | contenifyai.com/api-docs | | API Settings | contenifyai.com/dashboard/settings |

License

MIT