⚡ Supercharge your favourite AI Chat web apps

Note

Originally a Perplexity AI extension, this repository has now been restructured into a suite of enhancements for multiple platforms and services.

🎨 NEW: Complete Artifact Rendering System

Supported Artifact Types:

Key Features:

New Artifact System Files:

complexity/perplexity/extension/src/plugins/artifacts/
├── engine/
│ ├── ArtifactEngine.ts # Core artifact orchestrator
│ ├── CDNManager.ts # External library management
│ └── SecureSandbox.ts # Safe code execution environment
├── renderers/
│ ├── P5Renderer.ts # p5.js creative coding
│ ├── ThreeRenderer.ts # Three.js 3D graphics
│ ├── D3Renderer.ts # D3.js data visualization
│ ├── ReactRenderer.ts # React component rendering
│ ├── HTMLRenderer.ts # HTML page rendering
│ ├── SVGRenderer.ts # SVG graphics rendering
│ ├── MermaidRenderer.ts # Mermaid diagram rendering
│ └── CodeRenderer.ts # Syntax highlighting
├── components/
│ ├── EnhancedArtifactCanvas.tsx # Full-featured artifact display
│ └── ArtifactIntegration.tsx # Drop-in integration component
├── store/ # State management
├── _locales/ # Internationalization
└── artifacts-index.ts # Export index

Supported Platforms/Services

Perplexity AI

📁 Complete Project Structure

complexity/
├── branding/ # Branding assets and logos
│ ├── amo.svg
│ ├── cws.svg
│ ├── imgs/ # Screenshots and images
│ ├── logo/ # Logo variations
│ └── web-store/ # Web store assets
├── packages/ # Shared packages
│ ├── async-dep-manager/ # Async dependency management
│ ├── cli-logger/ # CLI logging utilities
│ ├── eslint-config/ # ESLint configuration
│ ├── i18n/ # Internationalization
│ └── typescript-config/ # TypeScript configuration
├── perplexity/ # Perplexity AI extension
│ └── extension/ # Main extension code
│ ├── changelogs/ # Version changelogs
│ ├── cli/ # Command line tools
│ ├── docs/ # Documentation
│ ├── e2e/ # End-to-end tests
│ ├── eslint-config/ # Extension-specific ESLint config
│ ├── public/ # Static assets
│ ├── src/ # Source code
│ │ ├── _locales/ # Localization files
│ │ ├── assets/ # CSS and assets
│ │ ├── components/ # UI components
│ │ │ ├── ui/ # Base UI components
│ │ │ └── changelog/ # Changelog components
│ │ ├── data/ # Data management
│ │ │ ├── dashboard/ # Dashboard data
│ │ │ ├── plugin-registry/# Plugin registry
│ │ │ └── query-client/ # Query client setup
│ │ ├── entrypoints/ # Extension entry points
│ │ │ ├── background/ # Background scripts
│ │ │ ├── content-scripts/# Content scripts
│ │ │ └── options-page/ # Options page
│ │ ├── hooks/ # Custom React hooks
│ │ ├── plugins/ # Plugin system
│ │ │ ├── _api/ # Plugin API
│ │ │ ├── _core/ # Core plugins
│ │ │ ├── artifacts/ # 🆕 Artifact rendering system
│ │ │ │ ├── engine/ # Artifact engine
│ │ │ │ ├── renderers/ # Artifact renderers
│ │ │ │ ├── components/ # Artifact components
│ │ │ │ ├── store/ # State management
│ │ │ │ └── _locales/ # Localization
│ │ │ ├── better-search-params/
│ │ │ ├── better-sidebar/
│ │ │ ├── block-analytic-events/
│ │ │ ├── claude-code/ # Claude Code integration
│ │ │ ├── cloudflare-timeout-auto-reload/
│ │ │ ├── comet-isolated-zoom/
│ │ │ ├── command-menu/
│ │ │ ├── custom-thread-container-width/
│ │ │ ├── drag-n-drop-file-to-upload-in-thread/
│ │ │ ├── export-thread/
│ │ │ ├── force-writing-mode/
│ │ │ ├── hide-get-mobile-app-cta-btn/
│ │ │ ├── home-custom-slogan/
│ │ │ ├── image-gen-popover/
│ │ │ ├── incognito-by-default/
│ │ │ ├── language-model-selector/
│ │ │ ├── prompt-history/
│ │ │ ├── query-box-submit-on-ctrl-enter/
│ │ │ ├── slash-command/
│ │ │ ├── thread-better-code-blocks/
│ │ │ ├── thread-better-message-copy-buttons/
│ │ │ ├── thread-better-rewrite-dropdown/
│ │ │ ├── thread-message-length/
│ │ │ ├── thread-message-tts/
│ │ │ ├── thread-raw-headings/
│ │ │ ├── thread-toc/
│ │ │ └── zen-mode/
│ │ ├── services/ # Service layer
│ │ │ ├── cplx-api/ # API services
│ │ │ ├── extension-permissions/
│ │ │ ├── extension-settings/
│ │ │ ├── i18n/ # Internationalization
│ │ │ ├── indexed-db/ # Database services
│ │ │ ├── instant-css/ # CSS injection
│ │ │ ├── plugins-states/ # Plugin state management
│ │ │ └── pplx-api/ # Perplexity API
│ │ ├── types/ # TypeScript type definitions
│ │ ├── utils/ # Utility functions
│ │ └── vite-plugins/ # Vite build plugins
│ ├── tests/ # Test files
│ ├── tsconfig.json # TypeScript configuration
│ ├── vite.config.ts # Vite build configuration
│ └── package.json # Extension dependencies
├── pnpm-lock.yaml # Package lock file
├── package.json # Root package configuration
└── README.md # This file

🚀 Getting Started

For Users:

For Developers:

Artifact System Usage:

// Import the artifact system
import { ArtifactIntegration, detectArtifactType, createArtifact } from '@/plugins/artifacts';
// Auto-detect artifact type
const type = detectArtifactType(content, language);
// Create an artifact
const artifact = createArtifact(content, type, {
 title: 'My Creative Sketch',
 canvasSize: { width: 600, height: 400 }
});
// Use the integration component
<ArtifactIntegration 
 content={content}
 language="javascript"
 onUpdate={handleUpdate}
/>

License