@notation-ai/react-sdk

A plug-and-play AI assistant widget for your web app. Drop it in, connect your API key, and give users instant, context-aware answers based on your docs.

🚀 Installation

Install via npm or yarn:

npm install @notation-ai/react-sdk

or

yarn add @notation-ai/react-sdk

🧠 Quick Start

import { Notation } from '@notation-ai/react-sdk';

function App() {
  return <Notation apiKey="your-api-key-here" />;
}

🔑 You can generate your API key from the Notation Dashboard

🎨 Customization

The <Notation /> component supports optional customization props:

| Prop | Type | Default | Description | | ---------------- | ----------------------------------- | -------------- | ------------------------------------ | | apiKey | string | — | Required – Your Notation API key | | primaryColor | string (hex, rgb, etc.) | #6366f1 | Accent color (buttons, highlights) | | secondaryColor | string | #f1f5f9 | Bubble background, borders, etc. | | position | "bottom-right" or "bottom-left" | bottom-right | Bubble position on the screen |

Example:

<Notation
  apiKey="your-api-key"
  primaryColor="#10b981"
  secondaryColor="#fefce8"
  position="bottom-left"
/>

🛡️ Security

• Your API key is tied to your Notation account and usage quota.
• Never expose it in public repositories.
• Calls are rate-limited and monitored for abuse.

📦 What's Inside

• 💬 Animated chat bubble with embedded assistant
• 🎯 Context-aware LLM responses powered by your uploaded docs
• 🔧 Customizable UI for seamless branding
• ⚡ Zero-config integration

🧾 License

MIT — Made with 💻 by the Notation team