Media
4 items
Description
AI-Powered Component Injector — enhance any website with custom UI components Conjure lets you customize any website using AI. Describe what you want in plain English - a dark mode toggle, a floating timer, a price tracker, a custom dashboard widget - and the AI agent writes the code, injects it into the page, and brings it back automatically every time you visit. No coding required. No copy-pasting scripts. Just tell Conjure what you need, and it builds it for you - live, on any website. 🔧 WHAT IS CONJURE? Conjure is an AI-powered Chrome extension that generates and injects custom React components, JavaScript scripts, CSS styles, and background workers into any website. You create "extensions" scoped to URL patterns (like https://*.github.com/*), chat with an AI agent to describe what you want, and the agent handles everything: planning, code generation, deployment, and verification. Your customizations persist. Every time you visit a matching URL, Conjure automatically re-injects your components and scripts. It's like having a personal web developer that lives in your browser. ✨ KEY FEATURES AI-Powered Code Generation Describe what you want in natural language. The AI agent generates production-quality React components, JavaScript snippets, CSS rules, or background workers - no manual coding needed. Autonomous Agent Workflow Conjure's AI agent doesn't just generate code. It plans, inspects the page's DOM and styles, generates artifacts, deploys them, and verifies that everything works - all in a single conversation. Built on LangGraph for reliable multi-step reasoning. Live Injection Generated code is injected directly into web pages in real time. React components render instantly. JavaScript executes immediately. CSS applies on the spot. You see results as soon as the agent finishes. URL Pattern Matching & Auto-Injection Scope your customizations to specific sites using wildcard URL patterns (e.g., https://*.github.com/*, https://mail.google.com/*). Conjure automatically re-injects your artifacts every time you visit a matching page - across tabs, across sessions. Multiple Artifact Types Each extension can contain any combination of: • React Components - Full interactive UI elements with state, props, and persistent data storage • JavaScript Scripts - Custom logic executed in the page context • CSS Styles - Visual tweaks, theme overrides, and layout adjustments • Background Workers - Persistent scripts that run independently, with access to extension storage and optional triggers (intervals, storage changes) Visual Element Picker Point and click to select exactly where on the page you want your component injected. The visual CSS selector picker highlights elements on hover and returns precise selectors - no need to inspect the DOM yourself. DOM & Style Inspection The AI agent can read the page's DOM structure, extract text content, and query computed styles for any element. This means it makes informed decisions about where and how to inject your customizations, adapting to each site's layout. Persistent Storage All your extensions, artifacts, conversations, and settings are stored locally in your browser using IndexedDB. Nothing is lost between sessions. Injected components can also store their own data per-component, per-URL - so a word counter on one page won't interfere with a word counter on another. Version History & Rollback Every artifact maintains a full version history. Made a change you don't like? Roll back to any previous version instantly. Background Workers Need something running continuously? Background workers execute in Chrome's offscreen document with full access to extension storage. Set them to run on a schedule, react to storage changes, or just run persistently. Monitor their status (running, stopped, error) directly from the Artifacts panel. Multi-Provider AI Support Bring your own API key and choose from leading AI providers and models: • OpenAI - GPT-4o, GPT-4o Mini, GPT-4 Turbo • Anthropic - Claude Sonnet 4, Claude Haiku 4 • Google - Gemini 2.0 Flash, Gemini 2.5 Pro, Gemini 2.5 Flash Switch providers and models anytime from the Settings panel. Use the model that best fits your needs - faster models for quick tweaks, more capable models for complex components. 💡 USE CASES & EXAMPLES Website Customization • Add a dark mode toggle to any site that doesn't have one • Inject custom CSS to fix annoying layouts or hide distracting elements • Add a "back to top" button on long pages • Customize fonts, colors, and spacing on sites you use daily Productivity Tools • Add a floating Pomodoro timer to your project management tool • Inject a word counter or reading time estimator into any text editor • Create a quick-notes widget that floats on any page • Build a keyboard shortcut overlay for sites that don't document theirs Shopping & Finance • Add a price history tracker overlay on e-commerce sites • Inject currency converters next to prices on international stores • Create a comparison widget that highlights deals • Build a budget tracker that runs across banking sites Developer Tools • Add JSON formatters or syntax highlighters to API response pages • Inject performance metrics overlays on staging sites • Create custom dashboards on CI/CD platforms • Add quick-action buttons to code review interfaces Social & Communication • Add reading time estimates to blog posts and articles • Inject translation widgets on foreign-language sites • Customize social media feeds with filters or layout changes • Add notification badges or counters to any web app Data & Monitoring • Use background workers to monitor pages for changes on a schedule • Build lightweight dashboards that aggregate data from multiple sources • Create alerts when specific content appears or changes on a page • Track metrics across sites using persistent per-component storage 📋 HOW IT WORKS 1. Open Conjure Click the Conjure icon in your Chrome toolbar to open the side panel. 2. Configure Your AI Go to Settings, choose your AI provider (OpenAI, Anthropic, or Google), enter your API key, and select a model. 3. Create an Extension In the Extensions tab, click "New Extension." Give it a name, set a URL pattern for the sites it should work on (e.g., https://*.github.com/*), and optionally add a description. 4. Chat with the AI Agent Open your extension and start chatting. Describe what you want in plain English: • "Add a floating timer to the bottom-right corner" • "Make the background dark and the text light" • "Create a sticky note widget I can drag around" • "Add a button that copies the page title and URL to clipboard" The agent will inspect the page, generate the code, deploy it, and verify that it works - all automatically. 5. Manage Your Artifacts Switch to the Artifacts tab to see everything the agent has created. Deploy or remove artifacts from the page with one click. For background workers, start, stop, or reload them and monitor their status in real time. 6. Enjoy Automatic Re-Injection Navigate away and come back - your customizations are automatically re-injected on every matching page. They persist across browser sessions, tabs, and restarts. 🛡️ PRIVACY & DATA Your Data Stays Local All extensions, artifacts, conversations, settings, and component data are stored entirely in your browser's local IndexedDB. Conjure does not collect, transmit, or store any of your data on external servers. AI API Communication When you chat with the AI agent, your messages and page context are sent to your chosen AI provider (OpenAI, Anthropic, or Google) using your own API key. Conjure acts as a client - it does not proxy your requests through any intermediary server. Your API key is stored locally and never shared. No Analytics or Tracking Conjure does not include analytics, telemetry, or tracking of any kind. No usage data is collected. No browsing history is recorded. Open Source Conjure is open-source software released under the MIT License. You can inspect the full source code, verify its behavior, and contribute improvements. Permissions Explained • "Read and change all your data on all websites" - Required to inject your custom components, scripts, and styles into web pages, and to inspect DOM structure and styles for the AI agent. • "Storage" - Used to persist your extensions, artifacts, and settings in local IndexedDB. • "Side Panel" - Powers the main Conjure interface. • "Offscreen" - Enables background workers to run in a persistent offscreen document. 🖥️ THE INTERFACE Conjure lives in Chrome's side panel - always accessible, never in your way. Extensions Tab - Browse and manage all your extensions. Each card shows the extension name, URL pattern, and a toggle to enable or disable. Create new extensions with one click. Settings Tab - Configure your AI provider, API key, and preferred model. Changes are saved instantly. Extension Detail View - Open any extension to access: • Chat - A conversational interface where you describe what you want. The agent's tool calls (inspecting DOM, generating code, deploying) are shown as expandable blocks so you can follow along. • Artifacts - A list of everything the agent has created for this extension. Each artifact shows its type (React, JS, CSS, Worker), name, and quick actions (deploy, remove, start/stop for workers). The interface uses a dark, developer-friendly design - clean, minimal, and optimized for Chrome's narrow side panel.