Squid Agent

The AI app builder for React apps you own.

Research live sources, approve the plan, then generate, verify, and export production-ready React code.

{/* Prompt Input */}

setPrompt(e.target.value)}
            placeholder="Build me a budgeting app..."
            className="w-full h-32 p-4 text-lg bg-transparent border-none focus:ring-0 resize-none placeholder:text-neutral-400"
          />
          <div className="flex items-center justify-between px-2 pb-2">
            <div className="flex items-center gap-2">
              <button className="flex items-center gap-2 px-3 py-1.5 bg-neutral-50 border border-neutral-200 rounded-lg text-sm font-medium text-neutral-700 hover:bg-neutral-100">
                <span className="w-2 h-2 rounded-full bg-emerald-500" /> Gemini 3.1 Flas... <ChevronDown className="w-3 h-3" />
              </button>
              <button className="flex items-center gap-2 px-3 py-1.5 bg-neutral-50 border border-neutral-200 rounded-lg text-sm font-medium text-neutral-700 hover:bg-neutral-100">
                <Sparkles className="w-4 h-4 text-blue-600" /> Plan mode
              </button>
            </div>
            <button className="bg-blue-500 text-white px-6 py-2 rounded-xl font-medium flex items-center gap-2 hover:bg-blue-600 transition-colors">
              Build <Zap className="w-4 h-4 fill-white" />
            </button>
          </div>
        </div>

{/* Secondary Actions */}
        <div className="flex gap-3 mt-6">
          <button className="flex items-center gap-2 px-4 py-2 bg-white border border-neutral-200 rounded-full text-sm font-medium text-neutral-700 hover:bg-neutral-50">
            <Wand2 className="w-4 h-4" /> Prompt Enhancer
          </button>
          <button className="flex items-center gap-2 px-4 py-2 bg-white border border-neutral-200 rounded-full text-sm font-medium text-neutral-700 hover:bg-neutral-50">
            <LayoutGrid className="w-4 h-4" /> Integrations
          </button>
        </div>

{/* Quick Starts */}
        <div className="mt-16 flex flex-col gap-4 text-sm">
          <div className="flex items-center gap-4">
            <span className="font-bold text-blue-600 uppercase tracking-wider">QUICK STARTS:</span>
            <div className="flex gap-6 text-neutral-600 font-medium">
              <a href="#" className="hover:text-blue-600 flex items-center gap-1.5"><CheckSquare className="w-4 h-4" /> Kanban Board</a>
              <a href="#" className="hover:text-blue-600 flex items-center gap-1.5"><FileText className="w-4 h-4" /> Landing Page</a>
              <a href="#" className="hover:text-blue-600 flex items-center gap-1.5"><Zap className="w-4 h-4" /> Habit Tracker</a>
            </div>
          </div>
          <div className="flex items-center gap-4">
            <span className="font-bold text-blue-600 uppercase tracking-wider">CUSTOMIZE:</span>
            <div className="flex gap-6 text-neutral-600 font-medium">
              <a href="#" className="hover:text-blue-600 flex items-center gap-1.5"><Briefcase className="w-4 h-4" /> Portfolio</a>
              <a href="#" className="hover:text-blue-600 flex items-center gap-1.5"><Building2 className="w-4 h-4" /> Company</a>
              <a href="#" className="hover:text-blue-600 flex items-center gap-1.5"><Globe className="w-4 h-4" /> Live API</a>
              <a href="#" className="hover:text-blue-600 flex items-center gap-1.5"><Store className="w-4 h-4" /> Local biz</a>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}</article></body></html>