@reactkits.dev/writer

Headless AI-powered writing assistant for React. Works with Tailwind, Mantine, or any UI library.

Features

• Headless Architecture - Bring your own UI components
• AI-Powered - Uses Chrome's built-in AI Writer/Rewriter APIs
• BYOK Support - Bring Your Own Key with OpenAI or Gemini adapters
• UI Presets - Ready-to-use presets for Tailwind and Mantine
• Storybook-First - Comprehensive component documentation
• TypeScript Ready - Full type definitions included

Installation

npm install @reactkits.dev/writer

Quick Start

Post Creator

import { createPostCreator, tailwindPreset } from '@reactkits.dev/writer/posts';
import { usePostEntries } from '@reactkits.dev/writer/hooks';

// Create PostCreator with Tailwind styling
const PostCreator = createPostCreator(tailwindPreset);

function App() {
  const { currentEntryId, handleNewEntry, loadEntries } = usePostEntries();

  return (
    <div>
      <button onClick={handleNewEntry}>New Post</button>
      <PostCreator
        currentEntryId={currentEntryId}
        onEntrySaved={loadEntries}
      />
    </div>
  );
}

Custom UI Components

import { createPostCreator } from '@reactkits.dev/writer/posts';
import { TextField, Button, Card, Chip } from '@mui/material';

// Pass your own components
const PostCreator = createPostCreator({
  Input: TextField,
  Button,
  Card,
  Badge: Chip,
});

AI Adapters

import { createAdapter, usePostCreator } from '@reactkits.dev/writer/hooks';

// Default (Chrome AI - free, on-device)
const chromeAdapter = createAdapter();

// OpenAI
const openaiAdapter = createAdapter({
  type: 'openai',
  apiKey: 'sk-...',
  model: 'gpt-4',
});

// Gemini
const geminiAdapter = createAdapter({
  type: 'gemini',
  apiKey: 'AIza...',
  model: 'gemini-1.5-flash',
});

Subpath Exports

// Main entry
import { PostCreator, usePostCreator } from '@reactkits.dev/writer';

// Post Creator specific
import { createPostCreator, tailwindPreset } from '@reactkits.dev/writer/posts';

// Article Editor specific
import { BlockNoteEditor, useDocuments } from '@reactkits.dev/writer/articles';

// Hooks and adapters
import { useWriter, useRewriter, createAdapter } from '@reactkits.dev/writer/hooks';

Available Hooks

| Hook | Description | |------|-------------| | usePostCreator | Complete post creation logic with AI generation | | usePostEntries | CRUD operations for post entries | | useDocuments | Document CRUD operations | | useWriter | Chrome AI Writer API integration | | useRewriter | Chrome AI Rewriter API integration | | useAI | Check Chrome AI availability | | useMarkdown | Markdown preview toggle | | useSettings | UI settings management |

Development

# Install dependencies
npm install

# Start Storybook
npm run storybook

# Start demo app
npm run dev:demo

# Build library
npm run build

Requirements

• React 18+ or 19+
• Chrome 131+ for built-in AI features (optional)

Optional Peer Dependencies

For the article editor with BlockNote:

npm install @blocknote/core @blocknote/react @blocknote/mantine @mantine/core @mantine/hooks

License

MIT License