Skip to content

feat: AI-powered BYOK features, hero redesign & feedback button#33

Closed
anurag629 wants to merge 11 commits intocodercops:devfrom
anurag629:feature/ai-byok-and-ui-improvements
Closed

feat: AI-powered BYOK features, hero redesign & feedback button#33
anurag629 wants to merge 11 commits intocodercops:devfrom
anurag629:feature/ai-byok-and-ui-improvements

Conversation

@anurag629
Copy link
Copy Markdown
Member

Summary

  • AI Integration (BYOK): Full multi-provider AI system (OpenAI, Anthropic, Google, Groq, OpenRouter) with settings modal, copy generator, smart autofill, template recommender, and meta analyzer — all using user-provided API keys stored in localStorage, proxied through stateless server endpoints
  • Hero Redesign: Replaced CSS mockup cards with real rendered template thumbnails (blog-minimal-dark, product-gradient-wave, event-hackathon) with proper outlines and category badges
  • Feedback Button: Fixed bottom-right button on every page linking to GitHub issue template chooser
  • Bug Fix: Resolved resvg-wasm concurrent rendering crash with explicit WASM object cleanup
  • Documentation: API docs updated with 3 AI endpoints, CLAUDE.md updated with AI architecture

Changes

AI Features (Issues #19#31, Epic #32)

  • src/lib/ai/ — Types, providers, storage, validation, prompts, generate, autofill, recommender
  • src/pages/api/ai/ — POST endpoints: generate, validate, autofill
  • src/components/editor/AI*.tsx — Settings modal, copy generator, autofill, template search
  • src/components/preview/AIAnalyzer.tsx — AI-powered meta tag analysis
  • src/styles/ai.css — All AI component styles

UI Improvements

  • src/pages/index.astro — Hero cards with real template thumbnails
  • src/components/FeedbackButton.astro — Global feedback button
  • src/pages/api-docs.astro — AI endpoint documentation with POST badges
  • src/styles/api-docs.css — POST method badge styles

Bug Fix

  • src/lib/og-engine.ts — Explicit pngData.free() / resvg.free() to prevent WASM GC finalizer crash

Test plan

  • All 145 tests pass across 15 test files (npm run test)
  • Production build succeeds (npm run build)
  • Type-check passes (npx tsc --noEmit)
  • Verify AI settings modal opens and saves provider/key/model
  • Verify AI copy generator produces suggestions for text fields
  • Verify smart autofill works with a URL
  • Verify hero shows real template thumbnails
  • Verify feedback button appears and links to issue template chooser

Closes #19, #20, #21, #22, #23, #24, #25, #26, #27, #28, #29, #30, #31, #32

anurag629 and others added 11 commits February 28, 2026 11:16
…w pages

- Redesign API docs page with mobile-first layout: div-based params
  instead of tables, horizontal sticky tab nav, contained code blocks
- Fix hamburger menu broken after View Transitions by removing
  transition:persist from Header and moving mobile menu inside <header>
- Improve editor mobile layout: single scroll column, proper touch
  targets, auto-switch to customize tab on template select
- Add safe-area and viewport-fit handling for notched devices
- Improve preview page mobile: stacked URL input, larger buttons
- Adjust responsive nav-height and global spacing for small screens

Made-with: Cursor
- Fix editor-right panel not stretching full width on mobile by adding
  flex-direction: column (mobile-show forced display:flex without it)
- Enlarge touch targets for toggles, sliders, color swatches, and buttons
- Make customize header sticky with backdrop blur on mobile
- Add icons to export copy buttons for better visual clarity
- Increase export button sizes with proper tap feedback (scale on active)
- Add safe-area-inset-bottom padding for notched phones
- Full-width upload buttons and select dropdowns on small screens
- Responsive breakpoints for 768px, 480px, and 380px (very narrow)

Made-with: Cursor
…ails

- Added introductory guidance for using Claude Code.
- Updated project description to include deployment URL and GitHub link.
- Expanded commands section with additional commands for testing and linting.
- Revised architecture section to reflect the current state of templates and API.
- Introduced a new section for pages and API endpoints with detailed descriptions.
- Enhanced template contribution guidelines and conventions for clarity.
- Added CI/CD process overview and environment variable details.
Add Buy Me a Coffee and PayPal buttons in the Open Source banner
section to allow users to support the project financially.

Closes codercops#7
…inks

- Split hero layout: text+CTAs on left, floating OG card stack on right (desktop)
- Three fanned mockup cards showcasing different template styles (blog, launch, portfolio)
- Floating platform pills (Twitter, LinkedIn, Discord) with bobbing animation
- Subtle support line below CTAs with Buy Me a Coffee and PayPal links
- Branded support buttons (BMC yellow, PayPal blue) in OSS banner section
- Mobile: centered text-only layout, cards hidden

Closes codercops#7
- AI integration with 5 providers (OpenAI, Anthropic, Google, Groq, OpenRouter)
- AI copy generator, smart autofill, template recommender, meta analyzer
- Settings modal with provider/key/model management stored in localStorage
- Server-side stateless proxy endpoints (keys never stored)
- Hero cards now render real template thumbnails instead of CSS mockups
- Feedback button on every page linking to GitHub issue templates
- Fix resvg-wasm concurrent rendering crash with explicit WASM object cleanup
- API docs updated with AI endpoints documentation
- 145 tests passing across 15 test files
@vercel
Copy link
Copy Markdown

vercel bot commented Mar 15, 2026

@anurag629 is attempting to deploy a commit to the CODERCOPS Team on Vercel.

A member of the Team first needs to authorize it.

@vercel
Copy link
Copy Markdown

vercel bot commented Mar 15, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ogcops Ready Ready Preview, Comment Mar 15, 2026 2:42pm

Request Review

@anurag629
Copy link
Copy Markdown
Member Author

Recreating PR from dev to dev.

@anurag629 anurag629 closed this Mar 15, 2026
@anurag629 anurag629 deleted the feature/ai-byok-and-ui-improvements branch March 15, 2026 18:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

AI Provider types, registry, and configuration

1 participant