LLM Interface Plus

🤖 Supported LLMs: ChatGPT · Claude

A Chrome extension that supercharges ChatGPT and Claude through customizable prompt templates and enhanced controls. Crafted with modern web technologies to deliver a seamless user experience.

Install

and other Chromium browsers

Preview

Supported LLMs

ChatGPT Interface	Claude Interface

Prompt editing

New template	Edit template

Features

• 📝 Prompt Templates: Create, edit, and manage reusable prompt templates
• 🏷️ Categories: Organize templates with categories and filter by category
• 💾 Template Backup: Import and export templates for backup and sharing
• 🎨 Modern UI: Built with Shadcn UI and Tailwind CSS for a beautiful interface
• 🌓 Dark Mode Support: Automatic theme detection with manual override option
• ⚡ Quick Access: Easily access your templates from ChatGPT and Claude interfaces
• 🔄 Sync Storage: Templates are synced across your Chrome instances
• 🤖 Multi-LLM Support: Works with both ChatGPT and Claude

Development

🧰 Tech Stack

• TypeScript for type-safe code
• React for UI components
• Shadcn UI & Tailwind CSS for styling
• Parcel for bundling
• Chrome Extension Manifest V3
• Playwright for E2E testing

🎨 Design

• Design file is on Figma

🛠 Build locally

# Checkout the copied repository to your local machine
git clone https://github.com/sotayamashita/llm-interface-plus
cd llm-interface-plus

# Install dependencies
npm install

# Build the extension
npm run build

The build step will create the dist folder, this folder will contain the generated extension.

🏃 Run the extension

Using web-ext is recommended for automatic reloading and running in a dedicated browser instance. Alternatively you can load the extension manually (see below).

# Watch for file changes and build continuously
npm run watch

# Install web-ext globally (only for the first time)
npm install --global web-ext

# Run the extension in a dedicated browser instance
web-ext run -t chromium

# Check that the extension is loaded by opening the extension options

Manually

You can also load the extension manually in Chrome

🧪 Test the extension

# Run tests
npm run test

# Run e2e tests
npm run test:e2e

📕 Read the documentation

Here are some websites you should refer to:

• Parcel’s Web Extension transformer documentation
• Chrome extensions’ API list
• A lot more links in fregante's Awesome WebExtensions list

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.