├── public
    ├── vercelLogo.png
    ├── vercel.svg
    └── write.svg
├── postcss.config.js
├── next.config.js
├── @
    ├── lib
    │   └── utils.ts
    └── components
    │   └── ui
    │       └── tabs.tsx
├── pages
    ├── _app.tsx
    ├── _document.tsx
    ├── api
    │   ├── claude.ts
    │   └── openai.ts
    └── index.tsx
├── components
    ├── SetupMarkdown.tsx
    ├── LoadingDots.tsx
    ├── Header.tsx
    ├── GitHub.tsx
    ├── CodeEditor.tsx
    ├── Footer.tsx
    ├── DropDown.tsx
    └── mdx-components.tsx
├── components.json
├── .gitignore
├── tsconfig.json
├── .vscode
    └── launch.json
├── LICENSE
├── styles
    ├── loading-dots.module.css
    └── globals.css
├── README.md
├── package.json
├── tailwind.config.js
├── utils
    └── OpenAIStream.ts
└── .env.example


/public/vercelLogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/XamHans/formulateflow/HEAD/public/vercelLogo.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | module.exports = {
3 |   reactStrictMode: true,
4 |   
5 | };
6 | 


--------------------------------------------------------------------------------
/@/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
 1 | import { Analytics } from "@vercel/analytics/react";
 2 | import type { AppProps } from "next/app";
 3 | import "../styles/globals.css";
 4 | 
 5 | function MyApp({ Component, pageProps }: AppProps) {
 6 |   return (
 7 |     <>
 8 |       <Component {...pageProps} />
 9 |       <Analytics />
10 |     </>
11 |   );
12 | }
13 | 
14 | export default MyApp;
15 | 


--------------------------------------------------------------------------------
/components/SetupMarkdown.tsx:
--------------------------------------------------------------------------------
 1 | import matter from "gray-matter";
 2 | import Markdown from "markdown-to-jsx";
 3 | 
 4 | export default function SetupMarkdown() {
 5 |   const mdx = matter("**TEST**");
 6 |   console.log(mdx);
 7 |   return (
 8 |     <main>
 9 |       <article>
10 |         <Markdown>{mdx.content}</Markdown>
11 |       </article>
12 |     </main>
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.js",
 8 |     "css": "styles/globals.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils"
16 |   }
17 | }


--------------------------------------------------------------------------------
/components/LoadingDots.tsx:
--------------------------------------------------------------------------------
 1 | import styles from '../styles/loading-dots.module.css';
 2 | 
 3 | const LoadingDots = ({
 4 |   color = '#000',
 5 |   style = 'small',
 6 | }: {
 7 |   color: string;
 8 |   style: string;
 9 | }) => {
10 |   return (
11 |     <span className={style == 'small' ? styles.loading2 : styles.loading}>
12 |       <span style={{ backgroundColor: color }} />
13 |       <span style={{ backgroundColor: color }} />
14 |       <span style={{ backgroundColor: color }} />
15 |     </span>
16 |   );
17 | };
18 | 
19 | export default LoadingDots;
20 | 
21 | LoadingDots.defaultProps = {
22 |   style: 'small',
23 | };
24 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | #other stuff
 9 | cli-script
10 | codegen-crew
11 | 
12 | # testing
13 | /coverage
14 | 
15 | # next.js
16 | /.next/
17 | /out/
18 | 
19 | # production
20 | /build
21 | 
22 | # misc
23 | .DS_Store
24 | *.pem
25 | 
26 | # debug
27 | npm-debug.log*
28 | yarn-debug.log*
29 | yarn-error.log*
30 | .pnpm-debug.log*
31 | 
32 | # local env files
33 | .env*.local
34 | 
35 | # vercel
36 | .vercel
37 | 
38 | # typescript
39 | *.tsbuildinfo
40 | next-env.d.ts
41 | .env
42 | 
43 | # idea
44 | .idea
45 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "strict": true,
12 |     "forceConsistentCasingInFileNames": true,
13 |     "noEmit": true,
14 |     "esModuleInterop": true,
15 |     "module": "esnext",
16 |     "moduleResolution": "node",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "jsx": "preserve",
20 |     "incremental": true,
21 |     "plugins": [
22 |       {
23 |         "name": "next"
24 |       }
25 |     ]
26 |   },
27 |   "include": [
28 |     "next-env.d.ts",
29 |     "**/*.ts",
30 |     "**/*.tsx",
31 |     ".next/types/**/*.ts"
32 |   ],
33 |   "exclude": [
34 |     "node_modules"
35 |   ]
36 | }
37 | 


--------------------------------------------------------------------------------
/components/Header.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import Github from "./GitHub";
 3 | 
 4 | export default function Header() {
 5 |   return (
 6 |     <header className="flex justify-between items-center w-full mt-5 border-b-2 pb-7 sm:px-4 px-2">
 7 |       <Link href="/" className="flex space-x-3">
 8 |         <h1 className="sm:text-3xl text-2xl font-bold ml-2 tracking-tight">
 9 |           FormulateFlow
10 |         </h1>
11 |       </Link>
12 |       <a
13 |         className="flex max-w-fit items-center justify-center space-x-2 rounded-full border border-gray-300 bg-white px-4 py-2 text-sm text-gray-600 shadow-md transition-colors hover:bg-gray-100"
14 |         href="https://github.com/XamHans/formulateflow"
15 |         target="_blank"
16 |         rel="noopener noreferrer"
17 |       >
18 |         <Github />
19 |         <p>Star on GitHub</p>
20 |       </a>
21 |     </header>
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "version": "0.2.0",
 3 |     "configurations": [
 4 |       {
 5 |         "name": "Next.js: debug server-side",
 6 |         "type": "node-terminal",
 7 |         "request": "launch",
 8 |         "command": "npm run dev"
 9 |       },
10 |       {
11 |         "name": "Next.js: debug client-side",
12 |         "type": "chrome",
13 |         "request": "launch",
14 |         "url": "http://localhost:3000"
15 |       },
16 |       {
17 |         "name": "Next.js: debug full stack",
18 |         "type": "node",
19 |         "request": "launch",
20 |         "program": "${workspaceFolder}/node_modules/.bin/next",
21 |         "runtimeArgs": ["--inspect"],
22 |         "skipFiles": ["<node_internals>/**"],
23 |         "serverReadyAction": {
24 |           "action": "debugWithEdge",
25 |           "killOnServerStop": true,
26 |           "pattern": "- Local:.+(https?://.+)",
27 |           "uriFormat": "%s",
28 |           "webRoot": "${workspaceFolder}"
29 |         }
30 |       }
31 |     ]
32 |   }


--------------------------------------------------------------------------------
/components/GitHub.tsx:
--------------------------------------------------------------------------------
 1 | export default function Github({ className }: { className?: string }) {
 2 |   return (
 3 |     <svg
 4 |       xmlns="http://www.w3.org/2000/svg"
 5 |       width="20"
 6 |       height="20"
 7 |       fill="currentColor"
 8 |       viewBox="0 0 24 24"
 9 |       className={className}
10 |     >
11 |       <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
12 |     </svg>
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License Copyright (c) 2023 Hassan El Mghari
 2 | 
 3 | Permission is hereby granted, free of
 4 | charge, to any person obtaining a copy of this software and associated
 5 | documentation files (the "Software"), to deal in the Software without
 6 | restriction, including without limitation the rights to use, copy, modify, merge,
 7 | publish, distribute, sublicense, and/or sell copies of the Software, and to
 8 | permit persons to whom the Software is furnished to do so, subject to the
 9 | following conditions:
10 | 
11 | The above copyright notice and this permission notice
12 | (including the next paragraph) shall be included in all copies or substantial
13 | portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
16 | ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
17 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
18 | EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
19 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
20 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/styles/loading-dots.module.css:
--------------------------------------------------------------------------------
 1 | .loading {
 2 |   display: inline-flex;
 3 |   align-items: center;
 4 | }
 5 | 
 6 | .loading .spacer {
 7 |   margin-right: 2px;
 8 | }
 9 | 
10 | .loading span {
11 |   animation-name: blink;
12 |   animation-duration: 1.4s;
13 |   animation-iteration-count: infinite;
14 |   animation-fill-mode: both;
15 |   width: 5px;
16 |   height: 5px;
17 |   border-radius: 50%;
18 |   display: inline-block;
19 |   margin: 0 1px;
20 | }
21 | 
22 | .loading span:nth-of-type(2) {
23 |   animation-delay: 0.2s;
24 | }
25 | 
26 | .loading span:nth-of-type(3) {
27 |   animation-delay: 0.4s;
28 | }
29 | 
30 | .loading2 {
31 |   display: inline-flex;
32 |   align-items: center;
33 | }
34 | 
35 | .loading2 .spacer {
36 |   margin-right: 2px;
37 | }
38 | 
39 | .loading2 span {
40 |   animation-name: blink;
41 |   animation-duration: 1.4s;
42 |   animation-iteration-count: infinite;
43 |   animation-fill-mode: both;
44 |   width: 4px;
45 |   height: 4px;
46 |   border-radius: 50%;
47 |   display: inline-block;
48 |   margin: 0 1px;
49 | }
50 | 
51 | .loading2 span:nth-of-type(2) {
52 |   animation-delay: 0.2s;
53 | }
54 | 
55 | .loading2 span:nth-of-type(3) {
56 |   animation-delay: 0.4s;
57 | }
58 | 
59 | @keyframes blink {
60 |   0% {
61 |     opacity: 0.2;
62 |   }
63 |   20% {
64 |     opacity: 1;
65 |   }
66 |   100% {
67 |     opacity: 0.2;
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/pages/_document.tsx:
--------------------------------------------------------------------------------
 1 | import Document, { Head, Html, Main, NextScript } from 'next/document';
 2 | 
 3 | class MyDocument extends Document {
 4 |   render() {
 5 |     return (
 6 |       <Html lang="en">
 7 |         <Head>
 8 |           <link rel="icon" href="/favicon.ico" />
 9 |           <meta
10 |             name="description"
11 |             content="Generate your next Twitter bio in seconds."
12 |           />
13 |           <meta property="og:site_name" content="twitterbio.io" />
14 |           <meta
15 |             property="og:description"
16 |             content="Generate your next Twitter bio in seconds."
17 |           />
18 |           <meta property="og:title" content="Twitter Bio Generator" />
19 |           <meta name="twitter:card" content="summary_large_image" />
20 |           <meta name="twitter:title" content="Twitter Bio Generator" />
21 |           <meta
22 |             name="twitter:description"
23 |             content="Generate your next Twitter bio in seconds."
24 |           />
25 |           <meta
26 |             property="og:image"
27 |             content="https://twitterbio.io/og-image.png"
28 |           />
29 |           <meta
30 |             name="twitter:image"
31 |             content="https://twitterbio.io/og-image.png"
32 |           />
33 |         </Head>
34 |         <body>
35 |           <Main />
36 |           <NextScript />
37 |         </body>
38 |       </Html>
39 |     );
40 |   }
41 | }
42 | 
43 | export default MyDocument;
44 | 


--------------------------------------------------------------------------------
/public/write.svg:
--------------------------------------------------------------------------------
1 | <svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m497 189.948h-32c-8.284 0-15 6.716-15 15v220c0 8.284 6.716 15 15 15h32c8.284 0 15-6.716 15-15v-220c0-8.284-6.716-15-15-15z"/><path d="m290.04 95.281 25-43.301c5.523-9.566 2.245-21.798-7.321-27.321l-17.32-10c-9.566-5.523-21.798-2.245-27.32 7.321l-25 43.301z"/><path d="m17.817 351.301c8.571 4.886 19.508 1.695 24.441-6.849l122.581-212.316c-11.435-2.717-23.639-.3-33.242 6.902l-42.467 31.85c-12.358 9.269-22.626 21.037-30.134 34.537l-54.543 98.076c-9.363 16.836-3.49 38.07 13.193 47.702.057.033.114.065.171.098z"/><path d="m106.76 300.092h65.032l103.248-178.831-51.962-30-120.661 208.993c1.437-.096 2.882-.162 4.343-.162z"/><path d="m48.437 393.75-15.519 26.88c-.73 1.264-1.271 2.628-1.607 4.049l-14.311 60.532c-2.739 11.585 11.244 19.658 19.908 11.494l45.268-42.659c1.062-1.001 1.973-2.152 2.703-3.417l12.27-21.252c-21.421-3.188-39.457-16.867-48.712-35.627z"/><path d="m226.13 430.092h-94.753l-19.798 34.29c6.366 6.598 15.293 10.709 25.185 10.709 19.33 0 35-15.67 35-35 0 19.33 15.67 35 35 35 19.33 0 35-15.67 35-35v-2.285c-3.631-1.661-11.946-5.885-15.634-7.714z"/><path d="m285.815 162.597-79.383 137.495h23.568c8.284 0 15 6.716 15 15 0 8.283-6.714 14.999-14.998 15h-123.242c-19.33 0-35 15.67-35 35 0 19.33 15.67 35 35 35h126.448l16.59 8.288c28.39 14.196 60.191 21.711 91.964 21.711 26.323 0 53.534-5.173 78.239-15.015v-194.987h-23.641z"/></g></svg>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # MultiStepForm Generator - FormulateFlow
 2 | 
 3 | ## Video Showcase:
 4 | https://drive.google.com/file/d/1npAQ-kwl1h6pQrwQlZE3tJawE4BjafF3/view
 5 | 
 6 | Ever wrestle with clunky multi-step forms in React? ‍
 7 | 
 8 | I know I did. That's why I built this open-source project: to streamline the process and make creating multi-step forms in Nextjs applications a breeze.
 9 | 
10 | I have fine-tuned Claude to understand the specific needs of multi-step forms within this tech stack.
11 | 
12 | ## Tech Stack
13 | 
14 | - **React Hook Form Integration**: Utilize the power of React Hook Form for handling form states and validations.
15 | - **Zustand for State Management**: Manage global state across different form steps effortlessly with Zustand.
16 | - **Dynamic Form Schema**: Define your form structure and validation using Zod.
17 | - **Styling with Shadcn**: Ensure your forms are not only functional but also visually appealing with Shadcn.
18 | 
19 | ## Getting Started
20 | 
21 | To get started with the MultiStepForm Generator, follow these steps:
22 | 
23 | ### Installation
24 | 
25 | Clone the repository:
26 | 
27 | ```bash
28 | git clone https://github.com/XamHans/formulateflow
29 | cd formulateflow
30 | ```
31 | 
32 | Rename the .env.example to .env and place your claude api key
33 | 
34 | ```
35 | CLAUDE_API_KEY="<API_KEY>"
36 | 
37 | ```
38 | 
39 | ## Acknowledgments
40 | 
41 | Special thanks to the [twitterbio](https://github.com/Nutlope/twitterbio) project which served as an inspiration and starting point for our MultiStepForm Generator.
42 | 
43 | ```
44 | 
45 | ```
46 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "dev": "next dev",
 5 |     "build": "next build",
 6 |     "start": "next start"
 7 |   },
 8 |   "dependencies": {
 9 |     "@anthropic-ai/sdk": "^0.20.9",
10 |     "@headlessui/react": "^1.7.17",
11 |     "@headlessui/tailwindcss": "^0.1.2",
12 |     "@heroicons/react": "^2.0.13",
13 |     "@mdx-js/loader": "^3.0.1",
14 |     "@mdx-js/react": "^3.0.1",
15 |     "@monaco-editor/react": "^4.6.0",
16 |     "@next/mdx": "^14.2.3",
17 |     "@radix-ui/react-tabs": "^1.0.4",
18 |     "@tailwindcss/forms": "^0.5.3",
19 |     "@types/mdx": "^2.0.13",
20 |     "@uiw/react-textarea-code-editor": "^3.0.2",
21 |     "@vercel/analytics": "^0.1.8",
22 |     "axios": "^1.6.8",
23 |     "class-variance-authority": "^0.7.0",
24 |     "clsx": "^2.1.1",
25 |     "eventsource-parser": "^0.0.5",
26 |     "gray-matter": "^4.0.3",
27 |     "lucide-react": "^0.378.0",
28 |     "markdown-to-jsx": "^7.4.7",
29 |     "next": "^14.0.4",
30 |     "next-mdx-remote": "^4.4.1",
31 |     "openai": "^4.43.0",
32 |     "react": "18.2.0",
33 |     "react-codemirror2": "^8.0.0",
34 |     "react-dom": "18.2.0",
35 |     "react-hook-form": "^7.42.0",
36 |     "react-hot-toast": "^2.4.0",
37 |     "react-use-measure": "^2.1.1",
38 |     "tailwind-merge": "^2.3.0",
39 |     "tailwindcss-animate": "^1.0.7",
40 |     "together-ai": "^0.5.2"
41 |   },
42 |   "devDependencies": {
43 |     "@types/node": "18.11.3",
44 |     "@types/react": "18.0.21",
45 |     "@types/react-dom": "18.0.6",
46 |     "autoprefixer": "^10.4.12",
47 |     "postcss": "^8.4.18",
48 |     "tailwindcss": "^3.2.4",
49 |     "typescript": "4.9.4"
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/components/CodeEditor.tsx:
--------------------------------------------------------------------------------
 1 | import Editor from "@monaco-editor/react";
 2 | import React, { useEffect, useState } from "react";
 3 | import {
 4 |   Tabs,
 5 |   TabsContent,
 6 |   TabsList,
 7 |   TabsTrigger,
 8 | } from "../@/components/ui/tabs";
 9 | 
10 | export interface EditorInstance {
11 |   id: number;
12 |   label: string;
13 |   content: string;
14 | }
15 | 
16 | export interface MonacoEditorWithTabsProps {
17 |   generatedFormCode: EditorInstance[];
18 | }
19 | 
20 | const MonacoEditorWithTabs: React.FC<MonacoEditorWithTabsProps> = ({
21 |   generatedFormCode,
22 | }) => {
23 |   const [editorInstances, setEditorInstances] = useState<EditorInstance[]>([]);
24 | 
25 |   useEffect(() => {
26 |     setEditorInstances(generatedFormCode);
27 |   }, [generatedFormCode]);
28 | 
29 |   return (
30 |     <div className="w-full">
31 |       <Tabs defaultValue={editorInstances?.[0]?.label} className="w-full">
32 |         <TabsList className=" w-full  flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 bg-white ">
33 |           {editorInstances?.map((instance) => (
34 |             <TabsTrigger key={instance.id} value={instance.label}>
35 |               {instance.label}
36 |             </TabsTrigger>
37 |           ))}
38 |         </TabsList>
39 |         {editorInstances?.map((instance, index) => (
40 |           <TabsContent
41 |             key={instance.id}
42 |             value={instance.label}
43 |             className="w-full h-96"
44 |           >
45 |             <Editor
46 |               className="w-full h-96"
47 |               defaultLanguage="jsx"
48 |               theme="vs-dark"
49 |               defaultValue={instance.content}
50 |             />
51 |           </TabsContent>
52 |         ))}
53 |       </Tabs>
54 |     </div>
55 |   );
56 | };
57 | 
58 | export default MonacoEditorWithTabs;
59 | 


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 |   @tailwind components;
 3 |   @tailwind utilities;
 4 | 
 5 |   @layer base {
 6 |     :root {
 7 |       --background: 0 0% 100%;
 8 |       --foreground: 222.2 84% 4.9%;
 9 | 
10 |       --card: 0 0% 100%;
11 |       --card-foreground: 222.2 84% 4.9%;
12 | 
13 |       --popover: 0 0% 100%;
14 |       --popover-foreground: 222.2 84% 4.9%;
15 | 
16 |       --primary: 222.2 47.4% 11.2%;
17 |       --primary-foreground: 210 40% 98%;
18 | 
19 |       --secondary: 210 40% 96.1%;
20 |       --secondary-foreground: 222.2 47.4% 11.2%;
21 | 
22 |       --muted: 210 40% 96.1%;
23 |       --muted-foreground: 215.4 16.3% 46.9%;
24 | 
25 |       --accent: 210 40% 96.1%;
26 |       --accent-foreground: 222.2 47.4% 11.2%;
27 | 
28 |       --destructive: 0 84.2% 60.2%;
29 |       --destructive-foreground: 210 40% 98%;
30 | 
31 |       --border: 214.3 31.8% 91.4%;
32 |       --input: 214.3 31.8% 91.4%;
33 |       --ring: 222.2 84% 4.9%;
34 | 
35 |       --radius: 0.5rem;
36 |     }
37 | 
38 |     .dark {
39 |       --background: 222.2 84% 4.9%;
40 |       --foreground: 210 40% 98%;
41 | 
42 |       --card: 222.2 84% 4.9%;
43 |       --card-foreground: 210 40% 98%;
44 | 
45 |       --popover: 222.2 84% 4.9%;
46 |       --popover-foreground: 210 40% 98%;
47 | 
48 |       --primary: 210 40% 98%;
49 |       --primary-foreground: 222.2 47.4% 11.2%;
50 | 
51 |       --secondary: 217.2 32.6% 17.5%;
52 |       --secondary-foreground: 210 40% 98%;
53 | 
54 |       --muted: 217.2 32.6% 17.5%;
55 |       --muted-foreground: 215 20.2% 65.1%;
56 | 
57 |       --accent: 217.2 32.6% 17.5%;
58 |       --accent-foreground: 210 40% 98%;
59 | 
60 |       --destructive: 0 62.8% 30.6%;
61 |       --destructive-foreground: 210 40% 98%;
62 | 
63 |       --border: 217.2 32.6% 17.5%;
64 |       --input: 217.2 32.6% 17.5%;
65 |       --ring: 212.7 26.8% 83.9%;
66 |     }
67 |   }
68 | 
69 |   @layer base {
70 |     * {
71 |       @apply border-border;
72 |     }
73 |     body {
74 |       @apply bg-background text-foreground;
75 |     }
76 | 
77 |    
78 |   }


--------------------------------------------------------------------------------
/@/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as TabsPrimitive from "@radix-ui/react-tabs";
 4 | import * as React from "react";
 5 | 
 6 | import { cn } from "../../lib/utils";
 7 | 
 8 | const Tabs = TabsPrimitive.Root;
 9 | 
10 | const TabsList = React.forwardRef<
11 |   React.ElementRef<typeof TabsPrimitive.List>,
12 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
13 | >(({ className, ...props }, ref) => (
14 |   <TabsPrimitive.List
15 |     ref={ref}
16 |     className={cn(
17 |       "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
18 |       className
19 |     )}
20 |     {...props}
21 |   />
22 | ));
23 | TabsList.displayName = TabsPrimitive.List.displayName;
24 | 
25 | const TabsTrigger = React.forwardRef<
26 |   React.ElementRef<typeof TabsPrimitive.Trigger>,
27 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
28 | >(({ className, ...props }, ref) => (
29 |   <TabsPrimitive.Trigger
30 |     ref={ref}
31 |     className={cn(
32 |       "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
33 |       className
34 |     )}
35 |     {...props}
36 |   />
37 | ));
38 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
39 | 
40 | const TabsContent = React.forwardRef<
41 |   React.ElementRef<typeof TabsPrimitive.Content>,
42 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
43 | >(({ className, ...props }, ref) => (
44 |   <TabsPrimitive.Content
45 |     ref={ref}
46 |     className={cn(
47 |       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
48 |       className
49 |     )}
50 |     {...props}
51 |   />
52 | ));
53 | TabsContent.displayName = TabsPrimitive.Content.displayName;
54 | 
55 | export { Tabs, TabsContent, TabsList, TabsTrigger };
56 | 


--------------------------------------------------------------------------------
/pages/api/claude.ts:
--------------------------------------------------------------------------------
 1 | import Anthropic from "@anthropic-ai/sdk";
 2 | import type { NextApiRequest, NextApiResponse } from "next";
 3 | 
 4 | // if (!process.env.OPENAI_API_KEY) {
 5 | //   throw new Error("Missing env var from OpenAI");
 6 | // }
 7 | 
 8 | // export const config = {
 9 | //   runtime: "edge",
10 | // };
11 | 
12 | export default async function handler(
13 |   req: NextApiRequest,
14 |   res: NextApiResponse
15 | ) {
16 |   const payload = req.body;
17 |   const { userInput, userClaudeApiKey } = payload;
18 | 
19 |   if (!userInput) {
20 |     return new Response("No userInput in the request", { status: 400 });
21 |   }
22 | 
23 |   // if (!userClaudeApiKey) {
24 |   //   userClaudeApiKey
25 |   //   return new Response("No userClaudeApiKey in the request", { status: 400 });
26 |   // }
27 | 
28 |   const generatedCode = await generateFormCode(userInput, userClaudeApiKey);
29 | 
30 |   return res.status(200).json(generatedCode);
31 | }
32 | 
33 | const generateFormCode = async (
34 |   userInput: string,
35 |   userClaudeApiKey: string
36 | ) => {
37 |   const anthropic = new Anthropic({
38 |     apiKey: process.env.CLAUDE_API_KEY! ?? userClaudeApiKey,
39 |   });
40 |   const msg = await anthropic.messages.create({
41 |     model: "claude-3-sonnet-20240229",
42 |     max_tokens: 4000,
43 |     temperature: 0,
44 |     system: process.env.SYSTEM_PROMPT,
45 |     messages: [
46 |       {
47 |         role: "user",
48 |         content: [
49 |           {
50 |             type: "text",
51 |             text: userInput,
52 |           },
53 |         ],
54 |       },
55 |     ],
56 |   });
57 |   const responseMarkdown = msg.content[0].text;
58 |   return convertResponseFromClaudeToJSON(responseMarkdown);
59 | };
60 | 
61 | const convertResponseFromClaudeToJSON = (responseMarkdown: string) => {
62 |   try {
63 |     const jsonStart = responseMarkdown.indexOf("```json\n") + 8; // Find the start of the JSON data
64 |     const jsonEnd = responseMarkdown.lastIndexOf("```"); // Find the end of the JSON data
65 |     const jsonString = responseMarkdown.slice(jsonStart, jsonEnd); // Extract the JSON data
66 | 
67 |     const responseJson = JSON.parse(jsonString);
68 |     return responseJson;
69 |   } catch (error) {
70 |     throw new Error("Failed to parse JSON from Claude", error as any);
71 |   }
72 | };
73 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | 
 3 | module.exports = {
 4 |   darkMode: ["class"],
 5 |   content: [
 6 |     './@/**/*.{ts,tsx}',
 7 | 
 8 |     './pages/**/*.{ts,tsx}',
 9 |     './components/**/*.{ts,tsx}',
10 |     './app/**/*.{ts,tsx}',
11 |     './src/**/*.{ts,tsx}',
12 |   ],
13 |   prefix: "",
14 |   theme: {
15 |     container: {
16 |       center: true,
17 |       padding: "2rem",
18 |       screens: {
19 |         "2xl": "1400px",
20 |       },
21 |     },
22 |     extend: {
23 |       colors: {
24 |         border: "hsl(var(--border))",
25 |         input: "hsl(var(--input))",
26 |         ring: "hsl(var(--ring))",
27 |         background: "hsl(var(--background))",
28 |         foreground: "hsl(var(--foreground))", 
29 |         primary: {
30 |           DEFAULT: "hsl(var(--primary))",
31 |           foreground: "hsl(var(--primary-foreground))",
32 |         },
33 |         secondary: {
34 |           DEFAULT: "hsl(var(--secondary))",
35 |           foreground: "hsl(var(--secondary-foreground))",
36 |         },
37 |         destructive: {
38 |           DEFAULT: "hsl(var(--destructive))",
39 |           foreground: "hsl(var(--destructive-foreground))",
40 |         },
41 |         muted: {
42 |           DEFAULT: "hsl(var(--muted))",
43 |           foreground: "hsl(var(--muted-foreground))",
44 |         },
45 |         accent: {
46 |           DEFAULT: "hsl(var(--accent))",
47 |           foreground: "hsl(var(--accent-foreground))",
48 |         },
49 |         popover: {
50 |           DEFAULT: "hsl(var(--popover))",
51 |           foreground: "hsl(var(--popover-foreground))",
52 |         },
53 |         card: {
54 |           DEFAULT: "hsl(var(--card))",
55 |           foreground: "hsl(var(--card-foreground))",
56 |         },
57 |       },
58 |       borderRadius: {
59 |         lg: "var(--radius)",
60 |         md: "calc(var(--radius) - 2px)",
61 |         sm: "calc(var(--radius) - 4px)",
62 |       },
63 |       keyframes: {
64 |         "accordion-down": {
65 |           from: { height: "0" },
66 |           to: { height: "var(--radix-accordion-content-height)" },
67 |         },
68 |         "accordion-up": {
69 |           from: { height: "var(--radix-accordion-content-height)" },
70 |           to: { height: "0" },
71 |         },
72 |       },
73 |       animation: {
74 |         "accordion-down": "accordion-down 0.2s ease-out",
75 |         "accordion-up": "accordion-up 0.2s ease-out",
76 |       },
77 |     },
78 |   },
79 |   plugins: [require("tailwindcss-animate")],
80 | }


--------------------------------------------------------------------------------
/components/Footer.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | 
 3 | export default function Footer() {
 4 |   return (
 5 |     <footer className="text-center h-16 sm:h-20 w-full sm:pt-2 pt-4 border-t mt-5 flex sm:flex-row flex-col justify-between items-center px-3 space-y-3 sm:mb-0 mb-3">
 6 |       <div className="flex justify-between">
 7 |         <label className="mx-2">
 8 |           Crafted by{" "}
 9 |           <a className="font-bold px-2" href="https://jhayer.tech">
10 |             Johannes Hayer
11 |           </a>
12 |           for all my developer colleagues
13 |         </label>
14 |       </div>
15 |       <div className="flex space-x-4 pb-4 sm:pb-0">
16 |         <Link
17 |           href="https://www.linkedin.com/in/johannes-hayer-b8253a294/"
18 |           className="group"
19 |           aria-label="Johannes Hayer on LinkedIn"
20 |         >
21 |           <svg
22 |             xmlns="http://www.w3.org/2000/svg"
23 |             width="24"
24 |             height="24"
25 |             viewBox="0 0 24 24"
26 |           >
27 |             <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
28 |           </svg>
29 |         </Link>
30 |         <Link
31 |           href="https://github.com/XamHans"
32 |           className="group"
33 |           aria-label="XamHans on GitHub"
34 |         >
35 |           <svg
36 |             aria-hidden="true"
37 |             className="h-6 w-6 fill-slate-500 group-hover:fill-slate-700"
38 |           >
39 |             <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z" />
40 |           </svg>
41 |         </Link>
42 |       </div>
43 |     </footer>
44 |   );
45 | }
46 | 


--------------------------------------------------------------------------------
/pages/api/openai.ts:
--------------------------------------------------------------------------------
 1 | import OpenAI from "openai";
 2 | 
 3 | // if (!process.env.OPENAI_API_KEY) {
 4 | //   throw new Error("Missing env var from OpenAI");
 5 | // }
 6 | 
 7 | // export const config = {
 8 | //   runtime: "edge",
 9 | // };
10 | 
11 | const openai = new OpenAI({
12 |   apiKey: process.env.OPENAI_API_KEY!,
13 | });
14 | 
15 | let thread = {
16 |   id: "",
17 | };
18 | 
19 | let run: any;
20 | 
21 | // export default async function handler(
22 | //   req: NextApiRequest,
23 | //   res: NextApiResponse
24 | // ) {
25 | //   const payload = req.body;
26 | //   const { userInput } = payload;
27 | 
28 | //   if (!userInput) {
29 | //     return new Response("No userInput in the request", { status: 400 });
30 | //   }
31 | 
32 | //   run = createRunPerUser(userInput);
33 | 
34 | //   const generatedCode = await generateFormCode();
35 | 
36 | //   return res.status(200).json({ generatedCode });
37 | // }
38 | 
39 | // // Function to create a new thread
40 | // const createRunPerUser = async (userInput: string) => {
41 | //   if (!thread?.id) {
42 | //     thread = await openai.beta.threads.create();
43 | //   }
44 | 
45 | //   await openai.beta.threads.messages.create(thread.id, {
46 | //     role: "user",
47 | //     content: userInput,
48 | //   });
49 | 
50 | //   run = await openai.beta.threads.runs.create(thread.id, {
51 | //     assistant_id: process.env.ASSISTANT_ID!,
52 | //   });
53 | // };
54 | 
55 | // const checkRun = async () => {
56 | //   if (!run) {
57 | //     throw new Error("No run found, therefore no check run can be done");
58 | //   }
59 | //   return new Promise((resolve, reject) => {
60 | //     const interval = setInterval(async () => {
61 | //       const retrieveRun = await openai.beta.threads.runs.retrieve(
62 | //         thread.id,
63 | //         run.id
64 | //       );
65 | 
66 | //       console.log("Run status: ", retrieveRun.status);
67 | 
68 | //       if (retrieveRun.status === "completed") {
69 | //         console.log("Run completed: ", retrieveRun);
70 | 
71 | //         clearInterval(interval);
72 | //         resolve(retrieveRun);
73 | //       }
74 | //     }, 3000);
75 | //   });
76 | // };
77 | 
78 | // const generateFormCode = async () => {
79 | //   await checkRun();
80 | 
81 | //   const messages = await openai.beta.threads.messages.list(thread.id);
82 | 
83 | //   const answers = (messages.data ?? [])
84 | //     .filter((m) => m?.role === "assistant")
85 | //     .sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
86 | 
87 | //   if (!answers || answers.length === 0) {
88 | //     return "No answer found";
89 | //   }
90 | 
91 | //   return answers[0].content[0].text.value;
92 | // };
93 | 


--------------------------------------------------------------------------------
/components/DropDown.tsx:
--------------------------------------------------------------------------------
 1 | import { Menu, Transition } from '@headlessui/react';
 2 | import {
 3 |   CheckIcon,
 4 |   ChevronDownIcon,
 5 |   ChevronUpIcon,
 6 | } from '@heroicons/react/20/solid';
 7 | import { Fragment } from 'react';
 8 | 
 9 | function classNames(...classes: string[]) {
10 |   return classes.filter(Boolean).join(' ');
11 | }
12 | 
13 | export type VibeType = 'Professional' | 'Casual' | 'Funny';
14 | 
15 | interface DropDownProps {
16 |   vibe: VibeType;
17 |   setVibe: (vibe: VibeType) => void;
18 | }
19 | 
20 | let vibes: VibeType[] = ['Professional', 'Casual', 'Funny'];
21 | 
22 | export default function DropDown({ vibe, setVibe }: DropDownProps) {
23 |   return (
24 |     <Menu as="div" className="relative block text-left w-full">
25 |       <div>
26 |         <Menu.Button className="inline-flex w-full justify-between items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-black">
27 |           {vibe}
28 |           <ChevronUpIcon
29 |             className="-mr-1 ml-2 h-5 w-5 ui-open:hidden"
30 |             aria-hidden="true"
31 |           />
32 |           <ChevronDownIcon
33 |             className="-mr-1 ml-2 h-5 w-5 hidden ui-open:block"
34 |             aria-hidden="true"
35 |           />
36 |         </Menu.Button>
37 |       </div>
38 | 
39 |       <Transition
40 |         as={Fragment}
41 |         enter="transition ease-out duration-100"
42 |         enterFrom="transform opacity-0 scale-95"
43 |         enterTo="transform opacity-100 scale-100"
44 |         leave="transition ease-in duration-75"
45 |         leaveFrom="transform opacity-100 scale-100"
46 |         leaveTo="transform opacity-0 scale-95"
47 |       >
48 |         <Menu.Items
49 |           className="absolute left-0 z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
50 |           key={vibe}
51 |         >
52 |           <div className="">
53 |             {vibes.map((vibeItem) => (
54 |               <Menu.Item key={vibeItem}>
55 |                 {({ active }) => (
56 |                   <button
57 |                     onClick={() => setVibe(vibeItem)}
58 |                     className={classNames(
59 |                       active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
60 |                       vibe === vibeItem ? 'bg-gray-200' : '',
61 |                       'px-4 py-2 text-sm w-full text-left flex items-center space-x-2 justify-between'
62 |                     )}
63 |                   >
64 |                     <span>{vibeItem}</span>
65 |                     {vibe === vibeItem ? (
66 |                       <CheckIcon className="w-4 h-4 text-bold" />
67 |                     ) : null}
68 |                   </button>
69 |                 )}
70 |               </Menu.Item>
71 |             ))}
72 |           </div>
73 |         </Menu.Items>
74 |       </Transition>
75 |     </Menu>
76 |   );
77 | }
78 | 


--------------------------------------------------------------------------------
/utils/OpenAIStream.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   createParser,
  3 |   ParsedEvent,
  4 |   ReconnectInterval,
  5 | } from "eventsource-parser";
  6 | 
  7 | export type ChatGPTAgent = "user" | "system";
  8 | 
  9 | export interface ChatGPTMessage {
 10 |   role: ChatGPTAgent;
 11 |   content: string;
 12 | }
 13 | 
 14 | export interface OpenAIStreamPayload {
 15 |   model: string;
 16 |   messages: ChatGPTMessage[];
 17 |   temperature: number;
 18 |   top_p: number;
 19 |   frequency_penalty: number;
 20 |   presence_penalty: number;
 21 |   max_tokens: number;
 22 |   stream: boolean;
 23 |   n: number;
 24 | }
 25 | 
 26 | export async function OpenAIStream(payload: OpenAIStreamPayload) {
 27 |   const encoder = new TextEncoder();
 28 |   const decoder = new TextDecoder();
 29 | 
 30 |   const res = await fetch("https://api.openai.com/v1/chat/completions", {
 31 |     headers: {
 32 |       "Content-Type": "application/json",
 33 |       Authorization: `Bearer ${process.env.OPENAI_API_KEY ?? ""}`,
 34 |     },
 35 |     method: "POST",
 36 |     body: JSON.stringify(payload),
 37 |   });
 38 | 
 39 |   const readableStream = new ReadableStream({
 40 |     async start(controller) {
 41 |       // callback
 42 |       const onParse = (event: ParsedEvent | ReconnectInterval) => {
 43 |         if (event.type === "event") {
 44 |           const data = event.data;
 45 |           controller.enqueue(encoder.encode(data));
 46 |         }
 47 |       }
 48 | 
 49 |       // optimistic error handling
 50 |       if (res.status !== 200) {
 51 |         const data = {
 52 |           status: res.status,
 53 |           statusText: res.statusText,
 54 |           body: await res.text(),
 55 |         }
 56 |         console.log(`Error: recieved non-200 status code, ${JSON.stringify(data)}`);
 57 |         controller.close();
 58 |         return
 59 |       }
 60 |         
 61 |       // stream response (SSE) from OpenAI may be fragmented into multiple chunks
 62 |       // this ensures we properly read chunks and invoke an event for each SSE event stream
 63 |       const parser = createParser(onParse);
 64 |       // https://web.dev/streams/#asynchronous-iteration
 65 |       for await (const chunk of res.body as any) {
 66 |         parser.feed(decoder.decode(chunk));
 67 |       }
 68 |     },
 69 |   });
 70 | 
 71 |   let counter = 0;
 72 |   const transformStream = new TransformStream({
 73 |     async transform(chunk, controller) {
 74 |       const data = decoder.decode(chunk);
 75 |       // https://beta.openai.com/docs/api-reference/completions/create#completions/create-stream
 76 |       if (data === "[DONE]") {
 77 |         controller.terminate();
 78 |         return;
 79 |       }
 80 |       try {
 81 |         const json = JSON.parse(data);
 82 |         const text = json.choices[0].delta?.content || "";
 83 |         if (counter < 2 && (text.match(/\n/) || []).length) {
 84 |           // this is a prefix character (i.e., "\n\n"), do nothing
 85 |           return;
 86 |         }
 87 |         // stream transformed JSON resposne as SSE
 88 |         const payload = {text: text};
 89 |         // https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events#event_stream_format
 90 |         controller.enqueue(
 91 |           encoder.encode(`data: ${JSON.stringify(payload)}\n\n`)
 92 |         );
 93 |         counter++;
 94 |       } catch (e) {
 95 |         // maybe parse error
 96 |         controller.error(e);
 97 |       }
 98 |     },
 99 |   });
100 | 
101 |   return readableStream.pipeThrough(transformStream);
102 | }
103 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | 
2 | CLAUDE_API_KEY="<API_KEY>"
3 | SYSTEM_PROMPT= "You are an experienced web developer, you are proficient in the following technologies:\n\n- **Next.js 14** with App Router\n- **Shadcn Components** library\n- Server actions for asynchronous functions on the server\n- **Zod** and **React Hook Form** for handling forms and input validation\n- **TailwindCSS** for styling\n- **Typescript** for type safety\n\nYour expertise extends to developing complex form wizards. Your task is to construct a wrapper component that encompasses all sub-orchestrates of the wizard form. Each new page within the wizard should be encapsulated within a standalone component. To facilitate state sharing between pages, utilize the **Zustand** store and ensure consumption on each page. Make sure that inside the store you store the current step of the wizard steps, also you don\'t need to define for every attribute a key, instead make it generic like this\n````\nexport const useOnboardingStore = create<OnboardingState>((set, get) => ({\n  data: {},\n  setData: (key, value) => set((state) => ({ data: { ...state.data, [key]: value } })),\n  currentStep: 0,\n  setCurrentStep: (step) => set({ currentStep: step }),\n \n}));\n```\n Make sure that you import the setCurrentStep from useOnboardingStore and <Form> from @/components/ui/form. To define the data capture requirements for each page, create a Zod schema accordingly. It\'s imperative to exclusively utilize **Shadcn components** throughout the implementation. Where you then just use the key to set the value like this\n```    \n//usage inside of form submit of wizard page \n   const onFormSubmit = async (data: FormData) => { setData(`personalInfo,` data);     setCurrentStep(currentStep + 1); } \n```\n\n | Create the wizard pages like this: 'use client';   import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from '@/components/ui/form'; import { Input } from '@/components/ui/input'; import { zodResolver } from '@hookform/resolvers/zod'; import React from 'react'; import { useForm } from 'react-hook-form'; import { z } from 'zod'; import OnboardingNavigation from './navigation-btns'; import { useOnboardingStore } from './store'; const schema = z.object({ email: z.string().email('Invalid email address'), profession: z.string().min(1, 'Profession is required'), }); type FormData = z.infer<typeof schema>; const WizardPage2: React.FC = () => { const { setData, currentStep, setCurrentStep } = useOnboardingStore(); const form = useForm<FormData>({ resolver: zodResolver(schema), defaultValues: { email: ', profession: ', }, }); const onFormSubmit = async (data: FormData) => { setData('professionalInfo', data); setCurrentStep(currentStep + 1); }; return ( <Form {...form}> <form onSubmit={form.handleSubmit(onFormSubmit)}> <FormField control={form.control} name='email' render={({ field }) => ( <FormItem> <FormLabel>Email</FormLabel> <FormControl> <Input {...field} /> </FormControl> <FormDescription>Enter your email address.</FormDescription> <FormMessage /> </FormItem> )} /> <FormField control={form.control} name='profession' render={({ field }) => ( <FormItem> <FormLabel>Profession</FormLabel> <FormControl> <Input {...field} /> </FormControl> <FormDescription> Enter your profession or job title. </FormDescription> <FormMessage /> </FormItem> )} /> <OnboardingNavigation /> </form> </Form> ); }; export default WizardPage2;   |  Make sure you retrun everthing in a json format like this so i can parse it : \n[\n    {\n      id: 0,\n      label: store.ts,\n      content:\n        your typescript content for store,\n    },\n    {\n      id: 1,\n      label: WizardWrapper.tsx,\n      content:\n        your tsx content for wizard wrapper,\n    },\n  {\n      id: 2,\n      label: navigation-btns.tsx,\n      content:\n        your tsx content for navigation buttons,\n    },\n   {\n      id: 3,\n      label: WizardPage.tsx,\n      content:\n        your tsx content for first form page,\n    },\n    {\n      id: 4,\n      label: WizardPage2.tsx,\n      content: your tsx format for second form page.,\n    },\n   {\n     ... if more pages needed like object before but increasing id\n    },\n  ]); Create a component called navigation-buttons.tsx that contains code like this: \n import React from react; import Button from ~/core/ui/Button; import { useOnboardingStore } from ../store; const OnboardingNavigation: React.FC = ({}) => { const { setCurrentStep, currentStep } = useOnboardingStore(); return ( <div className={flex flex-col space-y-2 col-span-2 my-2}> <Button type=submit>Next</Button> <Button data-cy={prev-onboarding-step} variant={ghost} type={button} onClick={() => { setCurrentStep(currentStep - 1); }} > Back </Button> </div> ); }; export default OnboardingNavigation; Import that component in every wizard page to handle the navigation so you dont need to use it inside the wrapper only consume the current step and show the page accordingly. Make sure you import the shadcn components from @/components/ui/<component-of-shadcn>\, like this: import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from @/components/ui/form; import { Input } from @/components/ui/input; Make all components to client components by adding:  'use client'; in the very first line above all the imports like this: 1) 'use client'; 2) import { zodResolver } from '@hookform/resolvers/zod'; 3) ... and so on. DO NOT output any additional text outside of the JSON, do only return JSON that is valid and I can parse back;"


--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
  1 | import type { NextPage } from "next";
  2 | import Head from "next/head";
  3 | import Image from "next/image";
  4 | import { useState } from "react";
  5 | import MonacoEditorWithTabs, { EditorInstance } from "../components/CodeEditor";
  6 | import Footer from "../components/Footer";
  7 | import Header from "../components/Header";
  8 | import LoadingDots from "../components/LoadingDots";
  9 | 
 10 | const Home: NextPage = () => {
 11 |   const [loading, setLoading] = useState(false);
 12 |   const [generatedFormCode, setGeneratedFormCode] = useState<EditorInstance[]>(
 13 |     []
 14 |   );
 15 | 
 16 |   const [userInput, setUserInput] = useState(
 17 |     "Create me a form that captures users firstname, lastname and email. On the second page capture the email and profession."
 18 |   );
 19 | 
 20 |   const [userClaudeApiKey, setUserClaudeApiKey] = useState("");
 21 | 
 22 |   const generateFormCode = async (e: any) => {
 23 |     e.preventDefault();
 24 | 
 25 |     setLoading(true);
 26 | 
 27 |     const response = await fetch("/api/claude", {
 28 |       method: "POST",
 29 |       headers: {
 30 |         "Content-Type": "application/json",
 31 |       },
 32 |       body: JSON.stringify({
 33 |         userInput: userInput,
 34 |         userClaudeApiKey: userClaudeApiKey,
 35 |       }),
 36 |     });
 37 | 
 38 |     if (!response.ok) {
 39 |       console.error(response);
 40 |       throw new Error(response.statusText);
 41 |     }
 42 | 
 43 |     const generatedCode = await response.json();
 44 |     setGeneratedFormCode(generatedCode);
 45 |     setLoading(false);
 46 |   };
 47 | 
 48 |   return (
 49 |     <div className="flex max-w-5xl mx-auto flex-col items-center justify-center py-2 min-h-screen">
 50 |       <Head>
 51 |         <title>Form Wizard Generator</title>
 52 |         <link rel="icon" href="/favicon.ico" />
 53 |       </Head>
 54 | 
 55 |       <Header />
 56 |       <main className="flex flex-1 w-full flex-col items-center justify-center text-center px-4 mt-12 sm:mt-20">
 57 |         <p className="border rounded-2xl py-1 px-4 text-slate-500 text-sm mb-5 hover:scale-105 transition duration-300 ease-in-out">
 58 |           nextjs14 + shadcn + zod + zustand + react-hook-form
 59 |         </p>
 60 |         <h1 className="sm:text-6xl text-4xl max-w-[708px] font-bold text-slate-900">
 61 |           Generate your Multi-Page Form form in seconds
 62 |         </h1>
 63 | 
 64 |         <div className="max-w-xl w-full">
 65 |           <div className="flex mt-10 items-center space-x-3">
 66 |             <Image
 67 |               src="/1-black.png"
 68 |               width={30}
 69 |               height={30}
 70 |               alt="1 icon"
 71 |               className="mb-5 sm:mb-0"
 72 |             />
 73 |             <p className="text-left font-medium">
 74 |               Drop in your form requirements and let the AI do the heavy
 75 |               lifting. Be as detailed as possible how many pages you want and
 76 |               what information a page should capture.
 77 |             </p>
 78 |           </div>
 79 |           <textarea
 80 |             value={userInput}
 81 |             onChange={(e) => setUserInput(e.target.value)}
 82 |             rows={4}
 83 |             className="w-full rounded-md border-gray-300 shadow-sm focus:border-black focus:ring-black my-5"
 84 |             placeholder={
 85 |               "Create me a form that captures users firstname, lastname and email. On the second page capture the email and profession. On the third page capture the profession and"
 86 |             }
 87 |           />
 88 | 
 89 |           <div className="flex  mb-5 items-center space-x-3">
 90 |             <Image src="/2-black.png" width={30} height={30} alt="1 icon" />
 91 |             <p className="text-left font-medium w-full">
 92 |               Paste in your CLAUDE API Key
 93 |             </p>
 94 |           </div>
 95 |           <div className="block">
 96 |             <input
 97 |               type="text"
 98 |               className="w-full rounded-md border-gray-300 shadow-sm focus:border-black focus:ring-black my-5"
 99 |               placeholder="sk-xxxxxx"
100 |               value={userClaudeApiKey}
101 |               onChange={(e) => setUserClaudeApiKey(e.target.value)}
102 |             />
103 |             <label className="text-xs">
104 |               Your API key will not be stored. It is only sent to the backend to
105 |               fulfill the Claude API key request and is not retained
106 |               post-request.
107 |             </label>{" "}
108 |           </div>
109 | 
110 |           {!loading && (
111 |             <button
112 |               className="bg-black rounded-xl text-white font-medium px-4 py-2 sm:mt-10 mt-8 hover:bg-black/80 w-full"
113 |               onClick={(e) => generateFormCode(e)}
114 |             >
115 |               Generate your multi-step form &rarr;
116 |             </button>
117 |           )}
118 |           {loading && (
119 |             <button
120 |               className="bg-black rounded-xl text-white font-medium px-4 py-2 sm:mt-10 mt-8 hover:bg-black/80 w-full"
121 |               disabled
122 |             >
123 |               <LoadingDots color="white" style="large" />
124 |             </button>
125 |           )}
126 |         </div>
127 |         <hr className="h-px bg-gray-700 border-1 dark:bg-gray-700" />
128 | 
129 |         <div className="py-2 mt-8 flex space-y-4 w-full">
130 |           <MonacoEditorWithTabs generatedFormCode={generatedFormCode} />
131 |         </div>
132 |       </main>
133 |       <Footer />
134 |     </div>
135 |   );
136 | };
137 | 
138 | export default Home;
139 | 


--------------------------------------------------------------------------------
/components/mdx-components.tsx:
--------------------------------------------------------------------------------
  1 | // @ts-nocheck
  2 | "use client";
  3 | 
  4 | import { useMDXComponent } from "next-contentlayer/hooks";
  5 | import Image from "next/image";
  6 | import Link from "next/link";
  7 | import * as React from "react";
  8 | import { NpmCommands } from "types/unist";
  9 | 
 10 | import { Callout } from "@/components/callout";
 11 | import { CodeBlockWrapper } from "@/components/code-block-wrapper";
 12 | import { ComponentExample } from "@/components/component-example";
 13 | import { ComponentPreview } from "@/components/component-preview";
 14 | import { ComponentSource } from "@/components/component-source";
 15 | import { CopyButton, CopyNpmCommandButton } from "@/components/copy-button";
 16 | import { FrameworkDocs } from "@/components/framework-docs";
 17 | import { StyleWrapper } from "@/components/style-wrapper";
 18 | import { useConfig } from "@/hooks/use-config";
 19 | import { Event } from "@/lib/events";
 20 | import { cn } from "@/lib/utils";
 21 | import {
 22 |   Accordion,
 23 |   AccordionContent,
 24 |   AccordionItem,
 25 |   AccordionTrigger,
 26 | } from "@/registry/new-york/ui/accordion";
 27 | import {
 28 |   Alert,
 29 |   AlertDescription,
 30 |   AlertTitle,
 31 | } from "@/registry/new-york/ui/alert";
 32 | import { AspectRatio } from "@/registry/new-york/ui/aspect-ratio";
 33 | import {
 34 |   Tabs,
 35 |   TabsContent,
 36 |   TabsList,
 37 |   TabsTrigger,
 38 | } from "@/registry/new-york/ui/tabs";
 39 | import { Style } from "@/registry/styles";
 40 | 
 41 | const components = {
 42 |   Accordion,
 43 |   AccordionContent,
 44 |   AccordionItem,
 45 |   AccordionTrigger,
 46 |   Alert,
 47 |   AlertTitle,
 48 |   AlertDescription,
 49 |   h1: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
 50 |     <h1
 51 |       className={cn(
 52 |         "font-heading mt-2 scroll-m-20 text-4xl font-bold",
 53 |         className
 54 |       )}
 55 |       {...props}
 56 |     />
 57 |   ),
 58 |   h2: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
 59 |     <h2
 60 |       className={cn(
 61 |         "font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0",
 62 |         className
 63 |       )}
 64 |       {...props}
 65 |     />
 66 |   ),
 67 |   h3: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
 68 |     <h3
 69 |       className={cn(
 70 |         "font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight",
 71 |         className
 72 |       )}
 73 |       {...props}
 74 |     />
 75 |   ),
 76 |   h4: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
 77 |     <h4
 78 |       className={cn(
 79 |         "font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight",
 80 |         className
 81 |       )}
 82 |       {...props}
 83 |     />
 84 |   ),
 85 |   h5: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
 86 |     <h5
 87 |       className={cn(
 88 |         "mt-8 scroll-m-20 text-lg font-semibold tracking-tight",
 89 |         className
 90 |       )}
 91 |       {...props}
 92 |     />
 93 |   ),
 94 |   h6: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
 95 |     <h6
 96 |       className={cn(
 97 |         "mt-8 scroll-m-20 text-base font-semibold tracking-tight",
 98 |         className
 99 |       )}
100 |       {...props}
101 |     />
102 |   ),
103 |   a: ({ className, ...props }: React.HTMLAttributes<HTMLAnchorElement>) => (
104 |     <a
105 |       className={cn("font-medium underline underline-offset-4", className)}
106 |       {...props}
107 |     />
108 |   ),
109 |   p: ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => (
110 |     <p
111 |       className={cn("leading-7 [&:not(:first-child)]:mt-6", className)}
112 |       {...props}
113 |     />
114 |   ),
115 |   ul: ({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) => (
116 |     <ul className={cn("my-6 ml-6 list-disc", className)} {...props} />
117 |   ),
118 |   ol: ({ className, ...props }: React.HTMLAttributes<HTMLOListElement>) => (
119 |     <ol className={cn("my-6 ml-6 list-decimal", className)} {...props} />
120 |   ),
121 |   li: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
122 |     <li className={cn("mt-2", className)} {...props} />
123 |   ),
124 |   blockquote: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
125 |     <blockquote
126 |       className={cn("mt-6 border-l-2 pl-6 italic", className)}
127 |       {...props}
128 |     />
129 |   ),
130 |   img: ({
131 |     className,
132 |     alt,
133 |     ...props
134 |   }: React.ImgHTMLAttributes<HTMLImageElement>) => (
135 |     // eslint-disable-next-line @next/next/no-img-element
136 |     <img className={cn("rounded-md", className)} alt={alt} {...props} />
137 |   ),
138 |   hr: ({ ...props }: React.HTMLAttributes<HTMLHRElement>) => (
139 |     <hr className="my-4 md:my-8" {...props} />
140 |   ),
141 |   table: ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => (
142 |     <div className="my-6 w-full overflow-y-auto">
143 |       <table className={cn("w-full", className)} {...props} />
144 |     </div>
145 |   ),
146 |   tr: ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
147 |     <tr
148 |       className={cn("m-0 border-t p-0 even:bg-muted", className)}
149 |       {...props}
150 |     />
151 |   ),
152 |   th: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
153 |     <th
154 |       className={cn(
155 |         "border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
156 |         className
157 |       )}
158 |       {...props}
159 |     />
160 |   ),
161 |   td: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
162 |     <td
163 |       className={cn(
164 |         "border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
165 |         className
166 |       )}
167 |       {...props}
168 |     />
169 |   ),
170 |   pre: ({
171 |     className,
172 |     __rawString__,
173 |     __npmCommand__,
174 |     __yarnCommand__,
175 |     __pnpmCommand__,
176 |     __bunCommand__,
177 |     __withMeta__,
178 |     __src__,
179 |     __event__,
180 |     __style__,
181 |     ...props
182 |   }: React.HTMLAttributes<HTMLPreElement> & {
183 |     __style__?: Style["name"];
184 |     __rawString__?: string;
185 |     __withMeta__?: boolean;
186 |     __src__?: string;
187 |     __event__?: Event["name"];
188 |   } & NpmCommands) => {
189 |     return (
190 |       <StyleWrapper styleName={__style__}>
191 |         <pre
192 |           className={cn(
193 |             "mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900",
194 |             className
195 |           )}
196 |           {...props}
197 |         />
198 |         {__rawString__ && !__npmCommand__ && (
199 |           <CopyButton
200 |             value={__rawString__}
201 |             src={__src__}
202 |             event={__event__}
203 |             className={cn("absolute right-4 top-4", __withMeta__ && "top-16")}
204 |           />
205 |         )}
206 |         {__npmCommand__ &&
207 |           __yarnCommand__ &&
208 |           __pnpmCommand__ &&
209 |           __bunCommand__ && (
210 |             <CopyNpmCommandButton
211 |               commands={{
212 |                 __npmCommand__,
213 |                 __yarnCommand__,
214 |                 __pnpmCommand__,
215 |                 __bunCommand__,
216 |               }}
217 |               className={cn("absolute right-4 top-4", __withMeta__ && "top-16")}
218 |             />
219 |           )}
220 |       </StyleWrapper>
221 |     );
222 |   },
223 |   code: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
224 |     <code
225 |       className={cn(
226 |         "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm",
227 |         className
228 |       )}
229 |       {...props}
230 |     />
231 |   ),
232 |   Image,
233 |   Callout,
234 |   ComponentPreview,
235 |   ComponentExample,
236 |   ComponentSource,
237 |   AspectRatio,
238 |   CodeBlockWrapper: ({ ...props }) => (
239 |     <CodeBlockWrapper className="rounded-md border" {...props} />
240 |   ),
241 |   Step: ({ className, ...props }: React.ComponentProps<"h3">) => (
242 |     <h3
243 |       className={cn(
244 |         "font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight",
245 |         className
246 |       )}
247 |       {...props}
248 |     />
249 |   ),
250 |   Steps: ({ ...props }) => (
251 |     <div
252 |       className="[&>h3]:step steps mb-12 ml-4 border-l pl-8 [counter-reset:step]"
253 |       {...props}
254 |     />
255 |   ),
256 |   Tabs: ({ className, ...props }: React.ComponentProps<typeof Tabs>) => (
257 |     <Tabs className={cn("relative mt-6 w-full", className)} {...props} />
258 |   ),
259 |   TabsList: ({
260 |     className,
261 |     ...props
262 |   }: React.ComponentProps<typeof TabsList>) => (
263 |     <TabsList
264 |       className={cn(
265 |         "w-full justify-start rounded-none border-b bg-transparent p-0",
266 |         className
267 |       )}
268 |       {...props}
269 |     />
270 |   ),
271 |   TabsTrigger: ({
272 |     className,
273 |     ...props
274 |   }: React.ComponentProps<typeof TabsTrigger>) => (
275 |     <TabsTrigger
276 |       className={cn(
277 |         "relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none",
278 |         className
279 |       )}
280 |       {...props}
281 |     />
282 |   ),
283 |   TabsContent: ({
284 |     className,
285 |     ...props
286 |   }: React.ComponentProps<typeof TabsContent>) => (
287 |     <TabsContent
288 |       className={cn(
289 |         "relative [&_h3.font-heading]:text-base [&_h3.font-heading]:font-semibold",
290 |         className
291 |       )}
292 |       {...props}
293 |     />
294 |   ),
295 |   FrameworkDocs: ({
296 |     className,
297 |     ...props
298 |   }: React.ComponentProps<typeof FrameworkDocs>) => (
299 |     <FrameworkDocs className={cn(className)} {...props} />
300 |   ),
301 |   Link: ({ className, ...props }: React.ComponentProps<typeof Link>) => (
302 |     <Link
303 |       className={cn("font-medium underline underline-offset-4", className)}
304 |       {...props}
305 |     />
306 |   ),
307 |   LinkedCard: ({ className, ...props }: React.ComponentProps<typeof Link>) => (
308 |     <Link
309 |       className={cn(
310 |         "flex w-full flex-col items-center rounded-xl border bg-card p-6 text-card-foreground shadow transition-colors hover:bg-muted/50 sm:p-10",
311 |         className
312 |       )}
313 |       {...props}
314 |     />
315 |   ),
316 | };
317 | 
318 | interface MdxProps {
319 |   code: string;
320 | }
321 | 
322 | export function Mdx({ code }: MdxProps) {
323 |   const [config] = useConfig();
324 |   const Component = useMDXComponent(code, {
325 |     style: config.style,
326 |   });
327 | 
328 |   return (
329 |     <div className="mdx">
330 |       <Component components={components} />
331 |     </div>
332 |   );
333 | }
334 | 


--------------------------------------------------------------------------------