ai-reviver v0.1.1
ai-reviver
A powerful React/Next.js 15 library for seamlessly integrating generative AI features into your existing UI components. Reviver enhances your application with AI capabilities without replacing your current UI elements.
Features
- 🎨 Non-Intrusive Integration: Enhance your existing UI with AI features without replacing components
- 🔄 Real-Time AI Suggestions: Get instant AI-powered suggestions and improvements
- 🎯 Smart Text Completion: Intelligent text completion as you type
- 🔍 Content Analysis: Extract key points, summarize, and explain content
- 🎭 Multiple AI Actions: Various AI actions including rewriting, explaining, and summarizing
- 🌈 Beautiful UI: Smooth animations and modern design with Tailwind CSS
- ⚡ Optimized Performance: Efficient streaming responses and request deduplication
- 🛠️ Highly Customizable: Extensive configuration options for each component
Installation
# Using pnpm (recommended)
pnpm add ai-reviver
# Using npm
npm install ai-reviver
# Using yarn
yarn add ai-reviver
Prerequisites
Reviver requires the following peer dependencies:
{
"next": "15.1.6",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"tailwindcss": "^3.4.1"
}
Setup
- Add your OpenAI API key to your environment variables:
OPENAI_API_KEY=your_api_key_here
OPENAI_BASE_URL=https://api.openai.com/v1 # Optional: Default OpenAI API URL
- Configure your Tailwind CSS by adding Reviver's path to your content configuration:
// tailwind.config.js or tailwind.config.ts
module.exports = {
content: [
// ... your other content paths
"./node_modules/ai-reviver/**/*.{js,ts,jsx,tsx}",
],
// ... rest of your config
};
- Wrap your application with the ReviverProvider:
import { ReviverProvider } from "ai-reviver";
function App({ children }) {
return <ReviverProvider>{children}</ReviverProvider>;
}
Components
Vivify
Enhances text content with AI-powered actions through a context menu.
import { Vivify } from "ai-reviver";
function MyComponent() {
return (
<Vivify>
<p>Your content here that you want to enhance with AI capabilities.</p>
</Vivify>
);
}
ReviverTextArea
An enhanced textarea with AI-powered suggestions and completions.
import { ReviverTextArea } from "ai-reviver";
function MyForm() {
return (
<ReviverTextArea
name="content"
label="Content"
placeholder="Start typing..."
onChange={(e) => console.log(e.target.value)}
/>
);
}
OnClickInterceptor
Intercepts click events to provide AI-powered options before proceeding.
import { OnClickInterceptor } from "ai-reviver";
function MyButton() {
return (
<OnClickInterceptor
onOriginalClick={() => console.log("Original action")}
onInterceptOptions={[
{
label: "Improve Content",
action: async (content) => {
// Your AI action here
},
},
]}
>
<button>Click me</button>
</OnClickInterceptor>
);
}
ReviverDrawer
A modal-like drawer component for AI interactions.
import { ReviverDrawer } from "ai-reviver";
function MyComponent() {
return (
<ReviverDrawer
trigger={<button>Open AI Assistant</button>}
title="AI Assistant"
description="Let AI help you improve your content"
>
{/* Drawer content */}
</ReviverDrawer>
);
}
GlobalOverlay
A beautiful overlay to indicate AI processing.
import { GlobalOverlay } from "ai-reviver";
function MyApp() {
return (
<>
<GlobalOverlay />
{/* Your app content */}
</>
);
}
ReviverObserver
Observes user interaction and provides AI suggestions.
import { ReviverObserver } from "ai-reviver";
function MyComponent() {
return (
<ReviverObserver
onDataCollected={(data) => {
console.log("User interaction data:", data);
}}
/>
);
}
Configuration
You can customize Reviver's behavior by passing a configuration object to the ReviverProvider:
import { ReviverProvider } from "ai-reviver";
const config = {
vivify: {
actions: ["summarize", "explain", "keyPoints"],
contextMenu: true,
hoverCard: true,
},
interceptor: {
showConfirmation: true,
position: "bottom",
},
textArea: {
suggestions: true,
autoComplete: true,
enhancementActions: ["rewrite", "suggestions"],
},
};
function App({ children }) {
return <ReviverProvider config={config}>{children}</ReviverProvider>;
}
Server Actions
Reviver provides several server actions for AI operations:
import {
summarizeContent,
explainContent,
extractKeyPoints,
getSuggestions,
rewriteContent,
} from "ai-reviver";
// Example usage
async function handleContent() {
const summary = await summarizeContent("Your content here");
const explanation = await explainContent("Your content here");
const keyPoints = await extractKeyPoints("Your content here");
const suggestions = await getSuggestions("Your content here");
const rewritten = await rewriteContent("Your content here");
}
Types
Reviver is written in TypeScript and exports all its types:
import type {
VivifyProps,
OnClickInterceptorProps,
ReviverTextAreaProps,
ReviverObserverProps,
GlobalOverlayProps,
ReviverProviderProps,
ReviverConfig,
} from "ai-reviver";
Contributing
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
License
Author
Support
If you have any questions or need help, please open an issue on GitHub.