Skip to content

README.md

Latest commit

 

History

History
90 lines (54 loc) · 1.93 KB

README.md

File metadata and controls

90 lines (54 loc) · 1.93 KB

✨ AI Magic Marker idea

  1. The app calls the Azure Chat Completions API and replaces the selected text with the AI’s rewritten version.

⚙️ Configuration

All configuration is handled via Vite environment variables. Create a .env.local file in the project root:

VITE_AZURE_OPENAI_ENDPOINT=https://YOUR-RESOURCE-NAME.openai.azure.com
VITE_AZURE_OPENAI_API_KEY=YOUR-SECRET-KEY
VITE_AZURE_OPENAI_DEPLOYMENT=YOUR-DEPLOYMENT-NAME
VITE_AZURE_OPENAI_API_VERSION=2024-08-01-preview
  • VITE_AZURE_OPENAI_ENDPOINT → Your Azure OpenAI resource endpoint.
  • VITE_AZURE_OPENAI_API_KEY → Your Azure API key.
  • VITE_AZURE_OPENAI_DEPLOYMENT → The deployment name you created (e.g., gpt-4o-mini).
  • VITE_AZURE_OPENAI_API_VERSION → API version (defaults to 2024-08-01-preview).

⚠️ Security note: Because this calls Azure directly from the browser, the API key is visible in DevTools. For production, proxy via a backend.

🛠 Installation & Usage

1. Clone & Install

git clone https://github.com/jzakotnik/tiptap-azure-ai.git
cd tiptap-azure-ai
npm install

2. Configure Env

Create .env.local and add your Azure credentials (see Configuration).

3. Run in Dev

npm run dev

Visit: http://localhost:5173

4. Build for Production

npm run build
npm run preview

✨ Features

  • 🎨 Gradient + glassmorphism UI
  • 📝 Rich-text editing with Tiptap
  • 🔍 Selection preview
  • 💬 Chat panel for instructions
  • 🤖 Live Azure AI rewriting
  • 📱 Responsive design (mobile/desktop)

📚 Tech Stack

📝 License

MIT – feel free to adapt and extend!