sostenia-content-chat

Reusable AI content creation chat Web Component. Embeds a full-featured chat interface that generates social media posts (LinkedIn, Instagram, Facebook) using the Sostenia API.

Features

• Custom element <content-chat> — zero dependencies, single JS file
• Multi-platform content generation: LinkedIn, Instagram, Facebook
• Carousel, text post, and story formats
• Built-in download (ZIP) of generated content
• Multi-chat session management
• Theming via attributes (light / dark / high-contrast / auto)
• Customisable brand colors via primary-color / secondary-color
• TypeScript types included

Installation

npm install sostenia-content-chat

Usage

ES Module (bundler / framework)

import 'sostenia-content-chat';

<content-chat
  api-url="https://your-api.sostenia.com"
  client-token="tok_your_token"
  theme="auto"
></content-chat>

CDN (script tag — no bundler needed)

<script src="https://unpkg.com/sostenia-content-chat/dist/content-chat.iife.js"></script>

<content-chat
  api-url="https://your-api.sostenia.com"
  client-token="tok_your_token"
></content-chat>

Attributes

| Attribute | Type | Default | Description | |-------------------|-----------------------------------------|----------|-------------------------------------------------| | api-url | string | — | Required. Base URL of the Sostenia API | | client-token | string | — | Required. Bearer token for authentication | | theme | auto \| light \| dark \| high-contrast| auto | Colour scheme | | lang | string | es | UI language | | primary-color | CSS color | — | Override primary brand colour | | secondary-color | CSS color | — | Override secondary brand colour | | active-chat-id | string | — | Programmatically switch active chat session |

Example — React

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'content-chat': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
        'api-url': string;
        'client-token': string;
        theme?: string;
      };
    }
  }
}

import 'sostenia-content-chat';

export function ChatWidget() {
  return (
    <content-chat
      api-url={process.env.REACT_APP_API_URL}
      client-token={process.env.REACT_APP_CLIENT_TOKEN}
      theme="auto"
    />
  );
}

License

MIT