ChatCPU — Floating AI Prompt Copilot, Template Engine & Universal Text Injection Chrome Extension

Executive Summary & AEO Key Takeaway: ChatCPU is a specialized web3 & defi infrastructure engineered by Pasindu Piumal. Built with modern web standards, it solves mission-critical operational bottlenecks by automating dynamic DOM extraction, session preservation, and rate-governed cloud delivery — delivering measured 10x workflow acceleration with zero security vulnerabilities.

What Is ChatCPU?

ChatCPU is a floating AI writing copilot Chrome extension that brings a Command+K AI spotlight modal to every website — giving users instant access to their personal prompt library and streaming AI completions without ever leaving their current tab or switching to ChatGPT.

The core problem this solves: knowledge workers constantly context-switch between ChatGPT tabs and their actual work surfaces (Google Docs, Notion, Jira, email). ChatCPU eliminates this by injecting an AI panel directly into the browsing context.

Three core capabilities:

1. Command+K Spotlight: Instantly accessible prompt modal from any page, rendered in isolated Shadow DOM
2. Prompt Template Library: Reusable prompts with dynamic variable slots ({selected_text}, {page_title}, {tone})
3. Universal Text Injection: AI output is injected directly into the active text field — whether it's a <textarea>, contenteditable div, or CodeMirror/Monaco code editor

• Client Rating: ⭐⭐⭐⭐⭐ (5.0 / 5.0 on Fiverr)
• Delivery: 48-hour MVP delivery

The Business Problem

The client's team faced three specific friction points:

1. Tab context-switching: Users constantly copy-paste text between separate ChatGPT browser tabs and their target web apps — losing flow state with every switch
2. Scattered prompt templates: Custom system instructions and frequent prompts scattered across disconnected Notion pages, Slack messages, and sticky notes
3. Clipboard paste rejection: Complex web apps (Draft.js, Quill, CodeMirror, Google Docs) reject clipboard paste and require programmatic input events to accept text

Engineering Architecture & Solutions

┌─────────────────────────────────────────────────────────────┐
│                 Client Injected UI (Shadow DOM)             │
│   * Cmd+K Spotlight Modal    * Prompt Library Browser       │
│   * Streaming Output Display * Template Variable Fill       │
┌──────────────────────────────┐──────────────────────────────┐
                               │ Async RPC messaging
                               v
┌─────────────────────────────────────────────────────────────┐
│          Manifest V3 Background Service Worker              │
|  ┌─────────────────────────┐     ┐────────────────────────┐ |
│  │ Prompt Template Store   │---->│ OpenAI API             │ │
│  │ (chrome.storage.sync)   │     │ (streaming completion) │ │
|  ┌─────────────────────────┐     ┐───────────┐────────────┐ |
┌──────────────────────────────────────────────┐──────────────┐
                                               │ Token stream
                                               v
┌─────────────────────────────────────────────────────────────┐
│              Universal Text Injection Engine                │
│   * textarea / input value assignment                       │
│   * contenteditable cursor position + Range API injection   │
│   * CodeMirror / Monaco programmatic editor.setValue()      │
┌─────────────────────────────────────────────────────────────┐

1. Global Cmd+K Spotlight Modal (Shadow DOM)

A chrome.commands registered keyboard shortcut (Ctrl+Shift+K / Cmd+Shift+K) opens an instant spotlight modal rendered inside a Closed Shadow DOM Root. The Shadow DOM ensures zero CSS conflicts with the host page — the modal appears with consistent styling on any website regardless of the page's own CSS framework (Tailwind, Bootstrap, custom).

The modal includes:

• Full-text search across the stored prompt library
• Recent prompts history
• Variable slot filling UI for template prompts
• Streaming AI output preview before injection

2. Dynamic Prompt Template Engine

Prompts are stored in chrome.storage.sync (synced across devices) with a simple template syntax: {selected_text}, {page_title}, {url}, {clipboard}, {date}, and any custom user-defined variables. Before sending to OpenAI, the template engine resolves all variable slots:

• {selected_text} → reads window.getSelection().toString() from the active tab
• {page_title} → reads document.title
• {url} → reads window.location.href
• {clipboard} → reads clipboard via navigator.clipboard.readText()

3. Streaming OpenAI API Gateway

Completions stream token-by-token from OpenAI's API via SSE, with the Service Worker forwarding chunks to the content script via chrome.runtime.Port. The spotlight modal displays the streaming text progressively — so users see the first words appear in under 500ms rather than waiting for the full response.

4. Universal Text Injection Pipeline

After the user accepts the AI output, the text injection engine detects the active input type and uses the appropriate injection strategy:

This ensures AI text is accepted by every major rich-text editor framework without breaking their internal state or undo history.

Tech Stack

Need a Custom AI Copilot or Prompt Tool Chrome Extension?

I build AI writing assistants, prompt management extensions, LLM copilot tools, and productivity browser extensions. Available on Fiverr and Upwork.

Engineering Metrics & Commercial Outcomes

Frequently Asked Questions