This document provides essential context, architecture details, and working conventions for AI coding agents contributing to this repository.
Project name: AI Chat Prompt URL Generator
Purpose: A small frontend-only web application that generates shareable URLs which open various AI chat platforms (ChatGPT, Claude, Perplexity, etc.) with a prefilled prompt and optional feature flags.
Live site: https://cr2007.github.io/aichat-url-maker
- React 19
- Vite
- TypeScript (strict mode)
- Bun (required runtime and package manager -- do not use Node.js or npm)
- Tailwind CSS v4 + CSS variables
- Radix UI primitives
- Lucide icons
- ESLint (flat config)
- GitHub Pages deployment via GitHub Actions
- Accepts a user prompt.
- Lets user select an AI provider (ChatGPT, Claude, Perplexity, etc.).
- Encodes the prompt into a provider-specific URL using query parameters.
- Optionally adds provider-specific feature flags (where supported).
- Optionally adds temporary chat/incognito flags (where supported).
- Outputs a URL that can be copied or opened directly.
- No backend or server logic.
- No API calls to AI providers.
- No authentication.
- No persistence or analytics.
- No direct usage of AI provider SDKs.
src/
├─ App.tsx # Main UI and URL generation logic
├─ main.tsx # React entry point
├─ index.css # Tailwind setup and theme variables
├─ components/
│ ├─ copyable-input.tsx # Read-only textarea with copy UX
│ ├─ theme-provider.tsx # Dark/light/system theme handling
│ └─ ui/ # shadcn-style Radix wrappers
│ ├─ button.tsx
│ ├─ checkbox.tsx
│ ├─ toggle.tsx
│ └─ toggle-group.tsx
└─ lib/
├─ providers.tsx # AI provider configurations and URL builders
└─ utils.ts # cn() helper (clsx + tailwind-merge)
bun i
bun devRuns the app at http://localhost:5173.
- Production build:
bun run build- Output directory:
dist/ - Deployment handled by
.github/workflows/deploy.yml - When deployed to GitHub Pages, the Vite base path is set dynamically via environment variables.
Do not hardcode or change the base path logic in vite.config.ts.
- Strict mode is enabled.
- Do not introduce
any. - Avoid unused variables, parameters, or imports.
- Prefer explicit union types for feature flags.
- Functional components only.
- Follow the Rules of Hooks.
- Use
useCallbackwhere memoization is meaningful. - Keep state local unless sharing is required.
- Use Tailwind utility classes.
- Do not add new global CSS files.
- Respect existing design tokens and CSS variables.
- Prefer composition over custom styling.
- Reuse components in
src/components/ui/. - Follow Radix + shadcn patterns.
- Always merge class names using
cn().
Each AI provider has its own URL structure and parameters:
- Base URL:
https://chatgpt.com/ - Query parameters:
q→ prompt text (required)hints→ single feature value (optional, e.g., "search", "image", etc.)temporary-chat=true→ optional flag
- Uses
URLandURLSearchParamsfor proper encoding.
- Base URL:
https://claude.ai/new - Query parameters:
q→ prompt text (required)incognito→ added to query string when temporary chat is enabled (no value)
- Uses
URLandURLSearchParamsfor proper encoding.
- Base URL:
https://www.perplexity.ai/search - Query parameters:
q→ prompt text (required)
- Uses
URLandURLSearchParamsfor proper encoding.
Critical guidelines:
- Do not manually encode query strings - always use
URLSearchParams. - Each provider's
buildURLfunction handles its specific format. - When adding new providers, follow the existing pattern in
src/lib/providers.tsx. - Breaking these rules may silently invalidate generated URLs.
- Using Node.js, npm, or npx -- always use Bun (
bun,bunx). - Adding a backend or server.
- Introducing analytics, cookies, or tracking.
- Adding AI provider SDKs or API keys.
- Changing deployment strategy without explicit instruction.
- Overengineering abstractions or state management.
- Making provider-specific changes that break the abstraction layer.
- Hardcoding URLs or query parameters outside of provider configurations.
- Adding a new AI provider (following the pattern in
providers.tsx). - Adding new feature flags for an existing provider (where supported).
- Improving accessibility or keyboard navigation.
- Enhancing copy or feedback UX.
- Fixing URL encoding edge cases.
- Minor visual polish aligned with existing design.
- Updating dependencies or CI/CD configurations.
Keep the app simple and focused.
The primary goal is fast, shareable prompt URLs across multiple AI chat platforms. If a change does not directly support that goal, reconsider whether it belongs.