diff --git a/.gitignore b/.gitignore index 6a3e68da..7b50d5e0 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,4 @@ -**/.DS_Store \ No newline at end of file +**/.DS_Store +.env.local +**/.next/ +**/node_modules/ \ No newline at end of file diff --git a/README.md b/README.md index d717ecf3..8ceb864e 100644 --- a/README.md +++ b/README.md @@ -1,169 +1,261 @@ -
- -

- lamatic cover -

- -

- - - - - - - - Lamatic.ai - - -

- -

Stack to Build Agentic SaaS → 10x faster

-
-

Opensource SDK ♦️ Collaborative Studio ♦️ Serverless Deployment

-

Website | Docs| Join Slack community -

-

- -

-Join lamatic.ai Slack - - GitHub Stars - - - GitHub Forks - - - CI/CD Status - - -
- -## ✨ About AgentKit - -Deploy intelligent AI agents in minutes with enterprise-grade security, scalable architecture, and seamless integrations. Power everything from customer support to workflow automation with the future of agent-powered business. - -*** - - - - - - - - -
- Agentic Icon -

Agentic

-

Intelligent agents that can reason, plan, and execute complex tasks autonomously

- 		- Embed Icon -

Embed

-

Seamlessly integrate AI capabilities into your existing applications and workflows

- 		- Assistant Icon -

Assistant

-

Smart assistants that help users with tasks, answer questions, and provide support

- 		- Automation Icon -

Automation

-

Automate repetitive tasks and streamline business processes with AI-powered workflows

-
- -*** - -### 📦 Available Kits - -Explore ready-to-deploy agent kits and templates built on Lamatic’s AgentKit framework. -Each kit includes configuration instructions, environment variables/lamatic-config.json, and a 1-click Vercel deploy button. - -| Kit Name | Description | Status | Live Demo | Path | -|-----------|--------------|--------|--------------|------| -| **🧠 Agentic Kits** | Advanced self-directed, reasoning agents for goal-driven operations | | | [`/kits/agentic`](./kits/agentic) | -| **Deep Search Agent** | A Next.js starter kit for goal-driven reasoning agents using Lamatic Flows. | Available | [![Live Demo](https://img.shields.io/badge/Live%20Demo-black?style=for-the-badge)](https://agent-kit-reasoning.vercel.app) | [`/kits/agentic/deep-search`](./kits/agentic/deep-search) | -| **Generation Agent** | A Next.js starter kit for generating text/json/image content using Lamatic Flows. | Available | [![Live Demo](https://img.shields.io/badge/Live%20Demo-black?style=for-the-badge)](https://agent-kit-generation.vercel.app) | [`/kits/agentic/generation`](./kits/agentic/generation) | -|| -| **🤖 Automation Kits** | Automate complex business processes with robust and flexible agent workflows | | | [`/kits/automation`](./kits/automation) | -| **Hiring Automation** | A Next.js starter kit for hiring automation using Lamatic Flows. | Available | [![Live Demo](https://img.shields.io/badge/Live%20Demo-black?style=for-the-badge)](https://agent-kit-hiring.vercel.app) | [`/kits/automation/hiring`](./kits/automation/hiring) | -|| -| **🧑‍💼 Assistant Kits** | Create context-aware helpers for users, customers, and team members | | | [`/kits/assistant`](./kits/assistant) | -| **Grammar Assistant** | A chrome extension to check grammar corrections across your selection. | Available | | [`/kits/assistant/grammar-extension`](./kits/assistant/grammar-extension) | -|| -| **💬 Embed Kits** | Seamlessly integrate AI agents into apps, websites, and workflows | | | [`/kits/embed`](./kits/embed) | -| **Chatbot** | A Next.js starter kit for chatbot using Lamatic Flows. | Available | [![Live Demo](https://img.shields.io/badge/Live%20Demo-black?style=for-the-badge)](https://agent-kit-embedded-chat.vercel.app) | [`/kits/embed/chat`](./kits/embed/chat) | -| **Search** | A Next.js starter kit for searchbot Lamatic Flows. | Available | [![Live Demo](https://img.shields.io/badge/Live%20Demo-black?style=for-the-badge)](https://agent-kit-embedded-chat.vercel.app) | [`/kits/embed/search`](./kits/embed/search) | -| **Sheets** | A Next.js starter kit for sheets using Lamatic Flows. | Available | [![Live Demo](https://img.shields.io/badge/Live%20Demo-black?style=for-the-badge)](https://agent-kit-sheets.vercel.app) | [`/kits/embed/sheets`](./kits/embed/sheets) | - -> 💡 Each kit folder includes its own README with specific setup steps, required keys, and example Lamatic flows. - -## 🏛️ Architecture Overview - -- **Agent Engine**: Multi-agent system enabling advanced reasoning and planning -- **Templates & Kits**: Pre-designed packs for popular use-cases and enterprise workflows -- **Lamatic Core**: Central orchestration of all agentic, automation, and integration flows -- **Security Layer**: End-to-end bank-grade encryption, compliance-ready -- **Integrations Hub**: 1-click integrations with your stack (REST, Zapier, Webhooks, etc.) +# 🧠 AI Meeting Intelligence Copilot +[![agentkit-challenge](https://img.shields.io/badge/PR%20Label-agentkit--challenge-0f766e?style=for-the-badge)](https://github.com/Lamatic/AgentKit/pulls?q=label:agentkit-challenge) +[![Built with Lamatic](https://img.shields.io/badge/Built%20with-Lamatic.ai-6366f1?style=for-the-badge)](https://lamatic.ai) +[![Next.js](https://img.shields.io/badge/Next.js-14-black?style=for-the-badge&logo=next.js)](https://nextjs.org) +[![Slack](https://img.shields.io/badge/Slack-Integrated-4A154B?style=for-the-badge&logo=slack)](https://slack.com) +[![Vercel](https://img.shields.io/badge/Deploy-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com) + +> **Turn raw meeting transcripts into structured, actionable intelligence — automatically delivered to Slack.** + +Built by [Vijayshree Vaibhav](https://github.com/vijayshreepathak). + +--- + +## 🎯 Problem Statement + +Teams walk out of meetings with scattered notes, untracked action items, and unclear ownership. Critical insights get lost in long conversation threads. Following up manually is slow and inconsistent. + +**This agent solves it in one step:** paste a meeting transcript → receive a structured summary, action items, risks, next steps, and a follow-up email draft — all delivered to Slack automatically. + +--- + +## ✨ What It Does + +| Input | Output | +|---|---| +| Raw meeting transcript | Executive summary | +| Any language, any format | Action items with owners | +| Paste or type directly | Risks & blockers | +| | Suggested next steps | +| | Follow-up email draft | +| | Slack notification ⚡ | + +--- + +## 🏗️ Architecture + +```mermaid +graph TD + A[👤 User] -->|Pastes transcript| B[Next.js Frontend\nkits/embed/chat] + B -->|Sends message| C[Lamatic Chat Widget\nchat-v2] + C -->|POST /widget/chat| D[Chat Trigger Node\nLamatic Studio] + + D --> E[🧠 Generate Text\nLLM - Executive Summary\nAction Items · Risks · Next Steps\nFollow-up Email] + E --> F[📋 Generate JSON\nStructured Output] + + F --> G[⚡ Slack API Node\nWebhook POST] + F --> H[💬 Chat Response\nStreamed back to widget] + + G -->|Formatted insight card| I[📨 Slack Channel] + H -->|Rendered markdown| B + + style A fill:#6366f1,color:#fff + style B fill:#1e293b,color:#fff + style C fill:#1e293b,color:#fff + style D fill:#0f766e,color:#fff + style E fill:#7c3aed,color:#fff + style F fill:#7c3aed,color:#fff + style G fill:#4A154B,color:#fff + style H fill:#0f766e,color:#fff + style I fill:#4A154B,color:#fff +``` + +**Flow inside Lamatic Studio:** + +``` +Chat Widget ──▶ Generate Text (LLM) ──▶ Generate JSON + │ + ┌────────────────┤ + ▼ ▼ + Slack API Chat Response + (Webhook) (back to user) +``` + +--- + +## 📸 Screenshots + +### Live Web App — Transcript Input & Structured Output +![Web App Running](kits/embed/chat/app/Screenshots/FromwebPage-With%20Followup%20mail-Running.png) + +### Lamatic Studio — Flow Execution & Preview +![Lamatic Flow Running](kits/embed/chat/app/Screenshots/fromLamatic-Running.png) + +### Slack Integration — Auto-delivered Insights +![Slack Integration](kits/embed/chat/app/Screenshots/Slack_integrated-Summarizer.png) + +### Frontend Landing Page +![Landing Page](kits/embed/chat/app/Screenshots/1.png) + +--- + +## 🛠️ Tech Stack + +| Layer | Technology | +|---|---| +| Frontend | Next.js 14 (App Router) | +| UI | Tailwind CSS + shadcn/ui | +| AI Workflow | Lamatic Studio | +| Chat Widget | Lamatic `chat-v2` embedded widget | +| LLM | Configured in Lamatic (GPT-4o / Claude) | +| Integrations | Slack Incoming Webhooks | +| Deployment | Vercel | + +--- + +## ⚙️ Quick Start + +### 1. Clone + +```bash +git clone https://github.com/vijayshreepathak/AgentKit.git +cd AgentKit/kits/embed/chat ``` -+------------------+ +------------------+ +-------------------+ -| Web/API Client | - GraphQL-> | Lamatic | <-----> | Integrations/Apps | -+------------------+ +------------------+ +-------------------+ - ^ ^ - Frontend Agent Microservice + +### 2. Install + +```bash +npm install ``` -*** +### 3. Configure environment -## 🚀 Steps to Deploy +Create `.env.local` inside `kits/embed/chat/`: -1. **Clone the Repo** - ```sh - git clone https://github.com/Lamatic/AgentKit.git - cd AgentKit - ``` +```env +NEXT_PUBLIC_LAMATIC_PROJECT_ID=your_project_id +NEXT_PUBLIC_LAMATIC_FLOW_ID=your_flow_id +NEXT_PUBLIC_LAMATIC_API_URL=https://your-project.lamatic.dev +``` + +Get these values from your Lamatic Studio project settings. + +### 4. Run + +```bash +npm run dev +# → http://localhost:3000 +``` + +--- + +## 🔧 Lamatic Studio Setup + +### Flow Structure + +Build this flow in [Lamatic Studio](https://studio.lamatic.ai): + +``` +[Chat Trigger] → [Generate Text] → [Generate JSON] → [Slack API] + → [Chat Response] +``` + +### Chat Trigger Configuration + +1. Open your flow → click the **Chat Trigger** node +2. Under **Allowed Domains**, add `*` (for development) or your production domain +3. Click **Save** → **Deploy** + +### Generate Text Prompt (LLM Node) + +``` +You are an AI Meeting Intelligence Copilot. Analyze this meeting transcript and produce: + +## Executive Summary +[2-3 sentence summary of the meeting] + +## Action Items +- **[Owner]:** [Task] — due [date if mentioned] + +## Risks & Blockers +- [Risk or blocker identified] + +## Next Steps +- [Recommended follow-up action] + +## Follow-up Email Draft +Subject: [Meeting Topic] — Decisions & Next Steps +[Professional email body] + +Meeting transcript: +{{trigger.chatMessage}} +``` + +### Slack Webhook + +1. Create an [Incoming Webhook](https://api.slack.com/messaging/webhooks) in your Slack workspace +2. Add the webhook URL to the **API Node** in Lamatic +3. The agent automatically sends the structured output to your channel + +--- + +## 🚀 Deploy to Vercel + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vijayshreepathak/AgentKit&root-directory=kits/embed/chat&env=NEXT_PUBLIC_LAMATIC_PROJECT_ID,NEXT_PUBLIC_LAMATIC_FLOW_ID,NEXT_PUBLIC_LAMATIC_API_URL&envDescription=Lamatic%20project%20credentials&envLink=https://lamatic.ai) + +After clicking Deploy: +1. Fill in the three env vars from your Lamatic Studio +2. Vercel builds and deploys automatically +3. Add your Vercel production URL to the Chat Trigger's allowed domains in Lamatic + +--- + +## 📁 Project Structure + +``` +kits/embed/chat/ +├── app/ +│ ├── page.js # Landing page (Server Component) +│ ├── layout.js # Root layout with fonts + analytics +│ ├── globals.css # Tailwind v4 + CSS variables +│ └── Screenshots/ # Demo screenshots +├── components/ +│ ├── LamaticChat.js # Lamatic widget lifecycle manager +│ ├── HeroActions.jsx # CTA buttons (Client Component) +│ ├── TranscriptPlayground.jsx # Transcript input + analyze flow +│ └── ui/ # shadcn/ui components +├── flows/ +│ └── embedded-chatbot-chatbot/ # Exported Lamatic flow config +├── .env.local # Local env vars (not committed) +└── package.json +``` -2. **Select Your AgentKit** - - Browse `/templates` for available kits. - - Example: - ```sh - cd templates/agentic/reasoning - ``` +--- -3. **Configure Integrations** - - Enter API keys, endpoints, and credentials in `.env` or `/config`. The setup and configurations for the integration will be defined in that repo itself in it's ReadME. +## 💡 Key Engineering Decisions -4. **Deploy** - - Run the agent locally with : - ```sh - npm run deploy - ``` +**Why `data-*` attributes on the root div?** +The Lamatic `chat-v2` widget reads `data-api-url`, `data-flow-id`, and `data-project-id` from `#lamatic-chat-root` at initialization. These must be set before the script runs. -5. **Monitor & Scale** - - Dashboard live at `studio.lamatic.ai` - - Scale or update agents with a single Click. +**Why bootstrap on mount (not on button click)?** +The widget fetches `chatConfig` and creates an IndexedDB session on init. Bootstrapping early means the session is ready before the user sends their first message — preventing "unexpected error" on first send. -*** +**Why not remove the root on unmount?** +The Lamatic widget uses IndexedDB with the session key as a primary key. Removing + re-adding the root causes a `ConstraintError: Key already exists` because the old session record is still in the database. The root is intentionally a page-lifetime singleton. -## 📚 Documentation & Resources +--- -- [AgentKit Overview](https://lamatic.ai/templates/agentkits) -- [Lamatic Guides](https://lamatic.ai/guides) -- [API Reference](https://lamatic.ai/api) -- [Community Support](https://github.com/Lamatic/AgentKit/discussions) +## 🔮 Future Improvements -*** +- [ ] Audio/video transcript upload (Whisper transcription) +- [ ] Multi-language meeting support +- [ ] Meeting history dashboard +- [ ] Calendar integration (Google Meet / Zoom auto-fetch) +- [ ] Team analytics on action item completion rates +- [ ] Export to Notion / Confluence -## 🤝 Contributing +--- -We welcome your ideas and improvements! See [CONTRIBUTING.md](./CONTRIBUTING.md) for how to get started. +## 👩‍💻 Author -*** +**Vijayshree Vaibhav** -## ⭐ Related Links +[![LinkedIn](https://img.shields.io/badge/LinkedIn-vijayshreevaibhav-0077B5?style=flat&logo=linkedin)](https://www.linkedin.com/in/vijayshreevaibhav/) +[![GitHub](https://img.shields.io/badge/GitHub-vijayshreepathak-181717?style=flat&logo=github)](https://github.com/vijayshreepathak) -- [Lamatic.ai](https://lamatic.ai) -- [Lamatic University](https://lamatic.ai/university) -- [Case Studies](https://lamatic.ai/case-studies) +--- -*** +## 📜 License -Powerful, scalable agentic automations for the modern enterprise — with security, speed, and service at the core. +MIT — see [LICENSE](./LICENSE). diff --git a/kits/embed/chat/README.md b/kits/embed/chat/README.md index bbc2c3dd..8fb6b0d3 100644 --- a/kits/embed/chat/README.md +++ b/kits/embed/chat/README.md @@ -1,138 +1,147 @@ -# Agent Kit Embedded Chat by Lamatic.ai -

- -

+# 🧠 AI Meeting Intelligence Copilot — Kit README -

- - Live Demo - -

+> Part of the [Lamatic AgentKit](https://github.com/Lamatic/AgentKit) · `kits/embed/chat` -**Agent Kit Embedded Chat** is an AI-powered document chat system built with [Lamatic.ai](https://lamatic.ai). It uses intelligent workflows to index PDFs and webpages, then provides an interactive chat interface where users can ask questions about their documents through a modern Next.js interface. +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vijayshreepathak/AgentKit&root-directory=kits/embed/chat&env=NEXT_PUBLIC_LAMATIC_PROJECT_ID,NEXT_PUBLIC_LAMATIC_FLOW_ID,NEXT_PUBLIC_LAMATIC_API_URL&envDescription=Lamatic%20project%20credentials) -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/Lamatic/AgentKit&root-directory=kits/embed/chat&env=EMBEDDED_CHATBOT_PDF_INDEXATION,EMBEDDED_CHATBOT_WEBSITES_INDEXATION,EMBEDDED_CHATBOT_RESOURCE_DELETION,EMBEDDED_CHATBOT_CHATBOT,LAMATIC_API_URL,LAMATIC_PROJECT_ID,LAMATIC_API_KEY&envDescription=Your%20Lamatic%20Config%Embedded%20Chat%20keys%20and%20Blob%20token%20are%20required.&envLink=https://lamatic.ai/templates/agentkits/embed/agent-kit-embed-chat) +An AI-powered Next.js app that converts raw meeting transcripts into structured insights (summary, action items, risks, next steps, follow-up email) and delivers them to Slack — all through a Lamatic chat widget embedded in the UI. --- +## 🗂️ Kit Structure -## Lamatic Setup (Pre and Post) - -Before running this project, you must build and deploy the flow in Lamatic, then wire its config into this codebase. +``` +kits/embed/chat/ +├── app/ +│ ├── page.js # Landing page — Server Component +│ ├── layout.js # Root layout (Geist font + Vercel Analytics) +│ ├── globals.css # Tailwind v4 theme + CSS variables +│ └── Screenshots/ # Demo screenshots +│ ├── 1.png +│ ├── fromLamatic-Running.png +│ ├── FromwebPage-With Followup mail-Running.png +│ └── Slack_integrated-Summarizer.png +├── components/ +│ ├── LamaticChat.js # Widget lifecycle — mounts root div + script +│ ├── HeroActions.jsx # Interactive hero buttons (Client Component) +│ ├── TranscriptPlayground.jsx # Textarea + Analyze button +│ └── ui/ # shadcn/ui primitives +├── flows/ +│ └── embedded-chatbot-chatbot/ # Exported Lamatic flow JSON +├── .env.local # ← create this (see below) +└── package.json +``` -Pre: Build in Lamatic -1. Sign in or sign up at https://lamatic.ai -2. Create a project (if you don’t have one yet) -3. Click “+ New Flow” and select "Templates" -4. Select the 'Embed Chat' agent kit -5. Configure providers/tools/inputs as prompted -6. Deploy the kit in Lamatic and obtain your .env keys -7. Copy the keys from your studio +--- -Post: Wire into this repo -1. Create a .env file and set the keys -2. Install and run locally: - - npm install - - npm run dev -3. Deploy (Vercel recommended): - - Import your repo, set the project’s Root Directory (if applicable) - - Add env vars in Vercel (same as your .env) - - Deploy and test your live URL +## 🚀 Local Setup -Notes -- Coming soon: single-click export and “Connect Git” in Lamatic to push config directly to your repo. +### Prerequisites ---- +- Node.js 18+ +- A [Lamatic account](https://lamatic.ai) with your meeting intelligence flow deployed +- A Slack incoming webhook URL (configured in your Lamatic flow) -## 🔑 Setup -## Required Keys and Config +### 1. Install dependencies -You’ll need two things to run this project locally: - -1. **.env Keys** → get it from your [Lamatic account](https://lamatic.ai) post kit deployment. -2. Vercel Blob Token – Required for resume file storage. Each deployment needs its own Blob token. You can generate it from your Vercel project after the first deploy (see instructions below). +```bash +cd kits/embed/chat +npm install +``` +### 2. Create `.env.local` -| Item | Purpose | Where to Get It | -| ----------------- | -------------------------------------------- | ----------------------------------------------- | -| .env Key | Authentication for Lamatic AI APIs and Orchestration | [lamatic.ai](https://lamatic.ai) | -| Blob Read/Write Token | Resume file storage | [Vercel Blob Quickstart](https://vercel.com/docs/storage/vercel-blob/quickstart) | +```env +NEXT_PUBLIC_LAMATIC_PROJECT_ID=your_project_id +NEXT_PUBLIC_LAMATIC_FLOW_ID=your_flow_id +NEXT_PUBLIC_LAMATIC_API_URL=https://your-project.lamatic.dev +``` -### 1. Environment Variables +All three values are available in **Lamatic Studio → Project Settings → Embed Widget**. -Create `.env.local` with: +### 3. Run ```bash -# Lamatic -EMBEDDED_CHATBOT_PDF_INDEXATION = "EMBEDDED_CHATBOT_PDF_INDEXATION Flow ID" -EMBEDDED_CHATBOT_WEBSITES_INDEXATION = "EMBEDDED_CHATBOT_WEBSITES_INDEXATION Flow ID" -EMBEDDED_CHATBOT_RESOURCE_DELETION = "EMBEDDED_CHATBOT_RESOURCE_DELETION Flow ID" -EMBEDDED_CHATBOT_CHATBOT = "EMBEDDED_CHATBOT_CHATBOT Flow ID" -LAMATIC_API_URL = "LAMATIC_API_URL" -LAMATIC_PROJECT_ID = "LAMATIC_PROJECT_ID" -LAMATIC_API_KEY = "LAMATIC_API_KEY" - -# Vercel Blob (configured on Vercel) -BLOB_READ_WRITE_TOKEN=your_blob_token +npm run dev +# Open http://localhost:3000 ``` -### 2. Install & Run +--- + +## ☁️ Deploy to Vercel ```bash -npm install -npm run dev -# Open http://localhost:3000 +# Option A — Vercel CLI +vercel --root kits/embed/chat + +# Option B — click the button at the top of this file ``` -### 3. Deploy Instructions (Vercel) +Add the same three `NEXT_PUBLIC_*` env vars in the Vercel dashboard. -Click the “Deploy with Vercel” button. +After deploying, add your Vercel production URL to the **Allowed Domains** list in your Lamatic Chat Trigger node, then redeploy the flow. -Fill in .env Keys from lamatic (required). +--- -After deployment, generate your own Blob token: +## 🔧 Lamatic Flow Configuration -```bash -vercel storage blob token create -``` +### Required nodes (in order) + +| # | Node | Purpose | +|---|---|---| +| 1 | Chat Trigger | Receives widget messages; whitelist your domain here | +| 2 | Generate Text | LLM call — extracts summary, action items, risks, next steps, email | +| 3 | Generate JSON | Structures the LLM output for Slack formatting | +| 4a | Slack API | Sends formatted card to your Slack channel | +| 4b | Chat Response | Streams the result back to the widget UI | + +### Domain whitelisting (important) + +In the **Chat Trigger** node config, add `*` for development or your exact domain for production. Without this, the widget returns 400 on every message. -Add/Replace it in Vercel Dashboard → Environment Variables → BLOB_READ_WRITE_TOKEN and redeploy. --- -## 📂 Repo Structure +## 🖼️ Screenshots -``` -/actions - └── orchestrate.ts # Lamatic workflow orchestration -/app - ├── page.tsx # Main upload/indexation UI - ├── chat - │ └── page.tsx # Chat interface with documents - └── api - ├── index # PDF indexation endpoint - ├── index-webpages # Webpage indexation endpoint - ├── delete # PDF deletion endpoint - ├── delete-resource # Resource deletion endpoint - └── check-workflow-status # Async workflow polling -/lib - └── lamatic-client.ts # Lamatic SDK client -/public - └── images - ├── lamatic-logo.png # Lamatic branding - └── *.png # Data source icons -/flows - └── ... # Lamatic Flows -/package.json # Dependencies & scripts -``` +| Web App | Lamatic Studio | +|---|---| +| ![Web](app/Screenshots/FromwebPage-With%20Followup%20mail-Running.png) | ![Studio](app/Screenshots/fromLamatic-Running.png) | + +| Slack Output | Landing Page | +|---|---| +| ![Slack](app/Screenshots/Slack_integrated-Summarizer.png) | ![Landing](app/Screenshots/1.png) | --- -## 🤝 Contributing +## 🔑 How the widget integration works + +``` +page.js (Server Component) + └── (Client Component) + │ + │ On mount (useEffect): + ├── Creates
and appends to document.body + │ + └── Injects