function MainComponent() { const [productDescription, setProductDescription] = React.useState(''); const [appSpecs, setAppSpecs] = React.useState(null); const handleSubmit = async (e)=>{ e.preventDefault(); const response = await fetch('/integrations/anthropic-claude/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: `Given the following short product description, break it down into detailed specs for an app: Product Description: ${productDescription} Specs: - List each page you'd need for the app - For each page, provide a short description of its key features - For each feature, provide a short bullet list of the exact UI and functionality needed` } ] }) }); const data = await response.json(); const assistantResponse = data.choices[0].message.content; setAppSpecs(assistantResponse); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, "Product Description Breakdown"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-8", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "description", className: "block mb-2 font-bold", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "Product Description:"), /*#__PURE__*/ React.createElement("textarea", { id: "description", name: "description", rows: "4", className: "w-full p-2 border border-gray-300 rounded", value: productDescription, onChange: (e)=>setProductDescription(e.target.value), __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "Generate App Specs")), appSpecs && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "Detailed App Specs:"), /*#__PURE__*/ React.createElement("pre", { className: "whitespace-pre-wrap", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, appSpecs))); }