This contains everything you need to run your app locally.
View your app in AI Studio: https://ai.studio/apps/drive/1FPQHhlNHdSyKf7medxctYbwPOGwBTBg1
Prerequisites: Node.js
- Install dependencies:
npm install - Set the
GEMINI_API_KEYin .env.local to your Gemini API key
The server uses the Google Gemini (GenAI) client for the /api/ai endpoint. If GEMINI_API_KEY is missing, invalid, or unregistered you will see permission errors such as:
ApiError: {"error": {"code": 403, "message": "Method doesn't allow unregistered callers (callers without established identity). Please use API Key or other form of API consumer identity to call this API.", "status": "PERMISSION_DENIED"}}
To avoid this set GEMINI_API_KEY in your .env.local (or the environment used to run the server). Restart your local server (or use the running hot-reload process) after setting the variable.
Example .env.local entry:
GEMINI_API_KEY=sk-...
Note: the server will attempt to read `.env.local` at startup and import missing keys into the running process' environment. If your server process was started before you created or edited `.env.local`, you will need to restart the server (or trigger your hot-reload) for the new variables to be picked up.
- Run the app:
npm run dev
- The front-end will not fetch chat messages unless a logged-in session exists (stored in
localStorageunderline_clone_session). This prevents the client from requesting private chat data when no user is authenticated. - The server now requires an authenticated user for chat-related endpoints. Requests to
/api/messages(GET/POST/DELETE) and/api/aiwill return 401 Unauthorized unless a validx-user-idheader oruserIdquery parameter is provided and matches an active user.
If you need a different auth mechanism (JWT, cookies, or session tokens), I can change the client/server to use that instead.
Message text now supports GitHub-style Markdown (GFM) rendering inside chat bubbles. Features include:
- Bold/italic/strikethrough, links, inline code and code blocks
- Lists, tables and task lists via GFM
- Images in message text will render and are clickable to open the lightbox (if enabled)
Rendering uses react-markdown with sane HTML sanitization to avoid unsafe markup in messages. If you'd like to tighten or relax allowed HTML tags, I can adjust the sanitization rules.
I added a clean, descriptive filename for your original image and a set of app icons (copies of the provided image) that are useful for web PWAs, favicons, and Apple touch icons.
Where I put the files:
assets/originals/lineclone-paperplane-source.png— the original supplied image, renamed to a clear name.public/icons/lineclone-paperplane.png— main icon image (use for in-app branding)public/icons/icon-16x16.png,public/icons/icon-32x32.png,public/icons/icon-48x48.png— favicons for browserspublic/icons/apple-touch-icon.png— iOS home-screen iconpublic/icons/icon-192x192.png,public/icons/icon-512x512.png— Android / PWA iconspublic/favicon.ico— favicon (copied from the source PNG)public/manifest.webmanifest— web manifest linking to the 192/512 icons
Notes & next steps:
- These files are currently copied from the original PNG without automated resizing. For best results, re-export properly resized PNGs (square) using a simple tool such as ImageMagick, Photoshop, or an online image resizer.
- Example ImageMagick command to generate multiple sizes:
magick convert assets/originals/lineclone-paperplane-source.png -resize 16x16 public/icons/icon-16x16.png
magick convert assets/originals/lineclone-paperplane-source.png -resize 32x32 public/icons/icon-32x32.png
magick convert assets/originals/lineclone-paperplane-source.png -resize 180x180 public/icons/apple-touch-icon.png
magick convert assets/originals/lineclone-paperplane-source.png -resize 192x192 public/icons/icon-192x192.png
magick convert assets/originals/lineclone-paperplane-source.png -resize 512x512 public/icons/icon-512x512.pngIf you'd like, I can also generate properly resized images, an optimized multi-resolution favicon.ico, and an SVG version from this source — tell me which you prefer and I will do that next.
I added a generator script at scripts/generate-icons.cjs (uses sharp + png-to-ico) and produced properly resized and optimized PNGs plus a multi-resolution favicon.ico from the original source image.
Run it locally from the workspace root:
npm run generate-iconsFiles the script generates/updates (placed in public/icons):
icon-16x16.png,icon-32x32.png,icon-48x48.png,icon-96x96.png,icon-128x128.pngapple-touch-icon.png(180x180)icon-192x192.png,icon-256x256.png,icon-384x384.png,icon-512x512.pngpublic/favicon.ico(multi-resolution ICO built from the PNGs)
These files were created by the script during this run and are optimized with sharp PNG settings. If you want different cropping, background, or padding rules, I can adjust the script to change how the bitmap is fit into square canvases.
