Overview
npm Package
One install, no backend code required
Streaming AI
Real-time content generation with SSE
Plug & Play
Works in Next.js, Vite, CRA — any React app
@contenify/chatbot4.0.218+MITAPI key via env variableGet Your API Key
You need an API key to activate the widget. The key is tied to your subscription — without it the widget will show an Invalid API Key modal.
Go to Settings
Generate a Key
Click Generate. The full key is shown once — copy it immediately.
Add to .env
Paste it into your project's environment file (see Quickstart).
Only one key exists per account. Generating a new key immediately revokes the previous one.
Quickstart
Install the package
npm install @contenify/chatbot # or yarn add @contenify/chatbot # or pnpm add @contenify/chatbot
Add environment variables
Create or update .env in your project root:
NEXT_PUBLIC_CONTENIFY_API_URL=https://api.contenifyai.cloud/api NEXT_PUBLIC_API_KEY=your-api-key-here NEXT_PUBLIC_CONTENIFY_DOMAIN=yourdomain.com
NEXT_PUBLIC_CONTENIFY_API_URLYesContenify backend URLNEXT_PUBLIC_API_KEYYesYour API key from SettingsNEXT_PUBLIC_CONTENIFY_DOMAINNoYour domain for news source filteringAdd the component
import { ContenifyChatBot } from '@contenify/chatbot'
import '@contenify/chatbot/styles.css'
export default function App() {
return <ContenifyChatBot />
}That's it — the widget reads your env variables automatically.
Next.js Setup
The widget uses React hooks internally and must run on the client.
Props Reference
All props are optional. The widget works out of the box using env variables. Explicit props take priority over env vars.
apiUrlstringOverride API base URL. Default: NEXT_PUBLIC_CONTENIFY_API_URLapiKeystringOverride API key. Default: NEXT_PUBLIC_API_KEYdomainstringOverride domain for news source filtering. Default: NEXT_PUBLIC_CONTENIFY_DOMAINonPost(article: string, keywords: string[]) => voidCalled when user clicks Post inside the editorPriority order: explicit prop > env variable > built-in default
<ContenifyChatBot
apiUrl="https://api.contenifyai.cloud/api"
apiKey="your-api-key"
domain="yourdomain.com"
onPost={(article, keywords) => console.log(article, keywords)}
/>Receive Published Articles
When a user clicks Post inside the editor, you can receive the article data in two ways.
Update Config at Runtime
Use setConfig to update the API URL, key, or domain dynamically — for example, after a user logs in or when switching environments.
import { setConfig } from '@contenify/chatbot'
// After user logs in — assign a user-specific key
setConfig({ apiKey: 'user-specific-api-key' })
// Switch environments at runtime
setConfig({
apiUrl: 'https://api.contenifyai.cloud/api',
apiKey: 'new-key',
domain: 'newdomain.com',
})setConfig merges with existing config — you only need to pass what changed.
Widget Capabilities
Paste a URL
6 actionsFetches and extracts the article, then presents AI actions.
- Recreate the article
- Write a blog post
- Create a summary
- Generate social media posts
- Write a newsletter
- Extract key points
Type a topic
Direct inputGenerates a full article from scratch using the text you type.
Article editor
Built-in editorRich text editing, SEO scoring, one-click auto-fix, metadata editing.
- Rich text editor with live formatting
- SEO score with grade (A–F) and recommendations
- One-click auto-fix SEO issues
- Edit title, subtitle, meta description, slug, keywords
- Copy to clipboard
- Download as PDF or DOCX
Post to your platform
onPost / eventReceive the final article in your app via onPost or a DOM event.
History & News panels
IncludedSaved articles panel and trending news browser built in.
Troubleshooting
Ready to embed the widget?
Get your API key from Settings, run npm install @contenify/chatbot, and you are live in minutes.