Skip to content

feat: AI Agent — Prompt Optimizer + HTML Animation Studio#16

Open
wj2132792581 wants to merge 1 commit into
floatboatai:mainfrom
wj2132792581:feat/ai-agent-prompt-optimizer-html-animation
Open

feat: AI Agent — Prompt Optimizer + HTML Animation Studio#16
wj2132792581 wants to merge 1 commit into
floatboatai:mainfrom
wj2132792581:feat/ai-agent-prompt-optimizer-html-animation

Conversation

@wj2132792581

Copy link
Copy Markdown

Summary

This PR adds two AI Agent features to the Open SaaS demo app:

  1. Prompt Optimizer (/prompt-optimizer) — Rewrites and scores user prompts (clarity, specificity, actionability) via OpenAI function calling, with a before/after comparison UI and per-user history.
  2. HTML Animation Studio (/html-animation) — Generates self-contained HTML/CSS animations from natural-language prompts, previews them in a sandboxed iframe, and persists generation history.

The two features are wired together: after optimizing a prompt, users can jump directly to the animation studio with the optimized text pre-filled.

Direction chosen: AI Agent (Prompt Optimizer + HTML Animation Generation)

Design decisions

Shared patterns

  • Structured output via function calling — Both features follow the existing AI Day Scheduler pattern: Zod schemas → z.toJSONSchema() → OpenAI tools + tool_choice for type-safe, parseable responses.
  • Credit parity — Non-subscribed users consume 1 credit per AI call (optimize or generate), matching schedule generation to prevent abuse without adding new rate-limit infrastructure.
  • Auth + ownership — All routes require login; queries/actions are scoped to context.user.id.

Prompt Optimizer

  • Dedicated route — Keeps the scheduler UX unchanged while making the optimizer easy to demo from the navbar.
  • History without over-modelingPromptOptimization stores originalPrompt, optimizedPrompt, and a JSON content blob for full replay (last 10 items).

HTML Animation Studio

  • Self-contained HTML output — The model must return a complete <!DOCTYPE html> document with inline CSS/JS only (no CDN, no fetch). This keeps previews portable and copy-paste friendly.
  • Defense in depth for preview — Server-side assertHtmlSafeForPreview() blocks external scripts, iframes, event handlers, and network APIs; the client renders in <iframe sandbox="allow-scripts"> without allow-same-origin so generated code cannot access the parent page.
  • gpt-4o-mini for generation — Better HTML/CSS quality than gpt-3.5-turbo while keeping latency reasonable for a demo flow.
  • 422 on unsafe HTML — If the model violates safety rules, the user gets a clear error instead of a broken preview.

Intentionally out of scope

  • Background video export (MP4/WebM) — requires job queue + ffmpeg; natural follow-up once animations exist.
  • Per-minute rate limiting beyond existing credits.
  • E2E tests hitting OpenAI in CI (manual test plan below).

Files changed

Area Files
Data model schema.prismaPromptOptimization, HtmlAnimation
Migration migrations/20260713120000_add_prompt_optimizer_and_html_animation/
Prompt Optimizer promptOptimizer.ts, PromptOptimizerPage.tsx, operations.ts, demo-ai-app.wasp.ts
HTML Animation html-animation/ module (schemas, sanitize, operations, page, wasp spec)
Integration NavBar/constants.ts, DemoAppPage.tsx, main.wasp.ts
Tests sanitize.test.ts — unit tests for HTML safety guard

Test plan

Setup

cd template/app
cp .env.server.example .env.server   # set OPENAI_API_KEY, DATABASE_URL
wasp db migrate-dev
wasp start

Prompt Optimizer

  • Sign up / log in, open /prompt-optimizer
  • Click Load exampleOptimize Prompt — verify score bars and before/after panels
  • Confirm record appears under Recent optimizations and reloads on click
  • Click Generate HTML animation with optimized prompt — lands on /html-animation with prompt pre-filled

HTML Animation Studio

  • Open /html-animation, enter a prompt (or use transferred optimized prompt)
  • Click Generate Animation — verify iframe preview renders
  • Toggle View source, Copy HTML
  • Reload a item from Recent animations
  • Verify 402 toast when out of credits (non-subscribed user)

Unit tests

cd template/app && npx vitest run src/html-animation/sanitize.test.ts

Follow-ups

  • Wire optimized prompt into scheduler generation (one-click from optimizer)
  • HTML animation → MP4/WebM export with background jobs and S3 download links
  • E2E coverage for optimizer + animation flows (mock OpenAI in CI)
  • Per-user call logging and stricter rate limits for production hardening

Add two AI Agent features: prompt rewrite/scoring with before-after comparison,
and self-contained HTML animation generation with sandboxed preview. Wire both
through existing credits and auth patterns, with cross-page prompt handoff.

Co-authored-by: Cursor <cursoragent@cursor.com>
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.

1 participant