@notation-ai/react-sdk

@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