Chrome Extension (React + Vite)

Scaffolds a Chrome extension using Manifest V3 with a React sidepanel for AI-powered interactions. Includes a Vite-based build system with multi-entry compilation for sidepanel, background service worker, content script, and options page. Supports Anthropic and OpenAI as LLM providers with streaming chat in the sidepanel.

Name	chrome-ext
Version	0.1.0
Category	applications
License	Apache-2.0
Persona	engineering
Tags	chrome-extension, react, vite, typescript, ai, browser
Source	templates/chrome-ext

Render it

Three front doors, one catalog. Pick whichever suits the caller.

# CLI
npx @nanohype/sdk render chrome-ext --out ./my-app

# SDK
import { LocalSource, renderTemplate } from "@nanohype/sdk";
const result = await renderTemplate(source, "chrome-ext", variables);

# MCP — from an agent
get_template({ name: "chrome-ext" })

Prerequisites

Tool	Version	Why
node	>=22	Node.js runtime for Vite build tooling
chrome (optional)	—	Extension testing via chrome://extensions

Variables

Required

ProjectName string

Kebab-case project name, used as package name and directory Must be lowercase kebab-case starting with a letter.

ExtensionName string

Human-readable extension name displayed in Chrome

Optional

Description string — defaults to An AI-powered Chrome extension

Short extension description for manifest and README

IncludeContentScript bool — defaults to true

Include content script for page interaction and text selection

IncludeOptions bool — defaults to true

Include options page for API key and settings management

LlmProvider string — defaults to anthropic

Default LLM provider for AI interactions

What it produces

35 files. Placeholder names such as __APP_NAME__ are what the renderer substitutes into.

.env.example
.gitignore
biome.json
package.json
public/icons/icon-128.png
public/icons/icon-16.png
public/icons/icon-48.png
public/manifest.json
README.md
src/__tests__/messaging.test.ts
src/__tests__/providers.test.ts
src/background/index.ts
src/bootstrap.ts
src/content/index.ts
src/content/styles.css
src/lib/ai.ts
src/lib/logger.ts
src/lib/messaging.ts
src/lib/providers/anthropic.ts
src/lib/providers/index.ts
src/lib/providers/openai.ts
src/lib/providers/registry.ts
src/lib/providers/types.ts
src/lib/storage.ts
src/options/App.tsx
src/options/index.html
src/options/index.tsx
src/sidepanel/App.tsx
src/sidepanel/components/Chat.tsx
src/sidepanel/components/Message.tsx
src/sidepanel/index.html
src/sidepanel/index.tsx
tsconfig.json
vite.config.ts
vitest.config.ts

Composes with

• Pairs with mcp-server-ts
• Pairs with ts-service
• Nests inside monorepo

Composites that use it

• Chrome AI Extension — Chrome extension with AI sidepanel backed by MCP tool servers and optional prompt library..