# Introduction Turn your idea into reality into a website or app with natural conversation using Dualite We aim to make it possible for anyone, without any technical background to turn their ideas into a reality. Join our [discord community here](https://discord.gg/vCXsN3hYpf) or write us at ** for any suggestions and feedbacks for Dualite. ### Watch How {% columns %} {% column %} {% embed url="" %} {% endcolumn %} {% column %} {% embed url="" %} {% endcolumn %} {% endcolumns %} {% columns %} {% column width="50%" %} {% embed url="" fullWidth="true" %} {% endcolumn %} {% column width="50%" %} {% embed url="" %} {% endcolumn %} {% endcolumns %} ### Jump right in
Getting Started/pages/JjjojIyKxaiBPzzLwvtg
User Guidehttps://alphadocs.dualite.dev/user-guide/first-project
Showcase by Dualite/pages/VJW01oWPClyj9o5spcn7
Integrations/pages/LXBFABGlbDNvSljDWjI2
Prompt Techniques/pages/PRNxP6NpMWajiFEkyLiR
Billing and Payment/pages/Dusll6AzGdahQNBwv7QB
FAQs/pages/wgWlBBLK7FqP9oHg0Bdw
Help and Support/pages/cSBMKhUyciL583LDYGXc
# Quickstart The quick intro you need to get started with Dualite. Let's build a finance dashboard for CEOs to manage their company data! ### TLDR; {% embed url="" %} ### Getting Started with Dualite You can signup for Dualite using your email or Google Account at our [login page ](https://alpha.dualite.dev/onboarding)and start building right away. All free users get 20 messages. You can upgrade here to get unlimited messages [here](https://dualite.dev/pricing). ### Put in a prompt You'll be directed to a screen like this where you can start prompting. If you're into tech, you can select the exact tech stack you want to go with, else you can go with the defaults, React and Tailwind CSS with TypeScript. Let's take an example prompt "Generate a finance dashboard for CEOs to manage their company data"
{% hint style="info" %} You can click on Enhance to optimise your prompt for a much better output and fewer iterations. Read more about Prompt Enhancer {% endhint %} ### Sit back and relax Once you hit the white top-arrow button, please wait sometime. It usually takes a minute or two to build your desired application. Once build is complete, Dualite automatically loads the live preview for you ### See the preview, and keep on building! The Preview will show you the final output. You can also keep on building by chatting at the bottom-right. Let us prompt it again to add a dark mode on the below dashboard by prompting in the right-side chatbox.

Dark mode for the dashboard using the prompt added in the bottom-right chatbox

{% hint style="info" %} You can refer on how you can prompt better by reading this [guide](/prompting/prompt-techniques) {% endhint %} ### Publishing your creation 🚀 You can directly publish the product by clicking on the top-right 'Publish' button. After you click this, you'll be required to login with 'Netlify', our deployment partner. Netlify gives you ability to deploy your projects in a single click without any DevOps hassle. Here's our project's deployed link though, check it out [here](https://inance-dashboard-rvqr-dualite.netlify.app/) {% hint style="info" %} You can also download your complete code as a ZIP file at the download icon just adjacent to the Publish button {% endhint %}
You're all set! We'll love to see what you're going to build with Dualite, post on X and tag us [@dualitedev](https://x.com/dualitedev) # Your first project Here's an extensive user guide for Dualite. * [Creating your first project](#creating-your-first-project) * [Getting started](#getting-started) * [Iterative chat](#iterative-chat) * [Code Editor](#code-editor) * [Terminal](#terminal) * [Deployment and Download as ZIP](#using-the-code-deployment-and-download) * [Rules](#rules) ### Creating your first project Checkout our [Quickstart Page](/getting-started/quickstart) to learn how to create your first project with Dualite. ### Getting started There are several ways to get started with Dualite
* Prompting: Just describe what you want to build in the prompt box. The more specific you are, the better the results. Start with clear and detailed prompts. We also have a Prompt Enhancer ("Enhance" button) at the bottom-left to optimise your prompts for better results * Templates: Dualite provides templates for quick setup on popular projects like eCommerce Landing Pages. Once a template loads, use prompts to customise features, add new elements, or refine the design to fit your vision. * Integrating AI: You can integrate state-of-the-art models like OpenAI, Gemini. Read more about it here * Importing your Figma designs: Simply select the Import from Figma button, copy the Figma URL. Dualite will be then able to convert that Figma design to code. Read more on this [here](/integrations/figma) * Integrating custom APIs: You can integrate REST APIs by either copy-pasting your OpenAI specification or we can build a dummy API for you. Read more on this [here](/integrations/apis) * References and Screenshots: You can add screenshots and paper-pen based mock-ups to start off {% hint style="info" %} If you're unsure of how to write the correct prompt, go through [Prompting Techniques](/prompting/introduction) {% endhint %} ### Iterative chat After describing what you want to build at first, you can keep iterative and developing on top of it through the iterative chat functionality. You can keep on building on top with concise prompts and adding context like Figma designs or screenshots for the "next" screen, or integrating API post generation of the UI
### Code Editor You can switch from Preview to the Code Editor by clicking on "Code" mode by clicking on the top center toggle.
You can modify code through two ways: * Manually: you can directly edit the code in the specific file you want to change right in the editor, and click on "Save" * Prompting: You can type in the Iterative Chat on what needs to be modified.
### Terminal You can also access the terminal in the code editor by clicking on the terminal icon at the top right icon in the code editor. You can use this for commands like *npm run dev* or *npm install* ### Publish and Download You can download the code as ZIP or Publish it on the Internet, whatever you seem fit.
### Rules You can now define project rules before starting a chat. Rules serve as the blueprint for your project before initiating it, helping structure your core principles around design, code and functionality and objectives all in one place and helping Dualite know here to put the "constraints" These rules will be temporarily stored and applied once you start a chat. If you wish to remove them, simply delete the content.
# Fix with AI Dualite has the ability to detect errors and bugs and give you a button of "Fix with AI" that'll look after those issues automatically. ![](/files/kpvxqiHaHxh7TMYFrROC) #### Log Details Gives you a basic understanding of the error that has happened. This is especially handy if you're integrating AI into the product since at times not mentioning the proper model name can lead to biases with Dualite. Read more on this [here](/build-ai-apps-with-dualite/gemini-use-google-ai#potential-error) #### Additional Context # Import your codebase Dualite has taken another major leap in closing the gap between designers and developers. With the launch of its new GitHub Import feature, Dualite now allows teams to directly import existing code repositories into their design canvas, seamlessly syncing visual and code elements in a unified workflow. This update significantly boosts productivity for engineering and design teams, especially those managing large or legacy codebases. Let’s explore how it works and why it matters. **Step 1: Streamlining Setup: The GitHub Integration** Getting started is as simple as selecting the “Import from GitHub” option from the Dualite interface. Upon selection, the platform prompts the user for OAuth-based GitHub permissions. This one-time step ensures secure and authenticated access to the repositories tied to your GitHub account or organisation. Once granted, Dualite fetches all associated repositories, allowing users to select a project and desired branch for import. ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXdtJlvQkt1cDmauj5A6-kU3iqsZmq7pnZaY1NiEwFYY1OrfKor42HqOTVhYSXdW4CoE6_dUw4_v3aikkHG2PCP-IYzcBWOntn53ZJbopHwBpcDd74l87dKcp3H8XMCOGc9Fn7kbGQ?key=sMFXVmcaB87SH6EHnL-53A)
**Step 2: Paste your GitHub Repository Link** After pasting your GitHub repository link, you can import your code and choose your preferred framework, language, package manager, and branch. For React projects, the default selections are React + Tailwind for the framework and TypeScript for the language. And Submit Repository ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXcn2dUbxvJxR9KajHjUV5NEgl-uLGk_g6qqQP4gBPuLXufosmRe1mQhCxb8K9MFw7Tx6mfkiQWSZsvOhhchW1OB_3nBwRd01FKFp5-ku1gSirqHPk1LdbJ66gBVozjH6N5fYWafBA?key=sMFXVmcaB87SH6EHnL-53A) ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXegYWccsRlq_BBULtv6Mb_biHAWwtn6KIZpSLbQ26u5m1lLJ5myoerOqLW6zzY3D6PgjaXUwq_5ROOjdgQCkB9HwiFPdP1xmjtHyMU0hs9RkCDlVotHuElxifORFfwDNOq7QWH3uw?key=sMFXVmcaB87SH6EHnL-53A)
**Step 3: Chat with Dualite to Modify the Project** Code files, images, and assets are loaded directly into the code environment and displayed in the chat panel. You can install dependencies and run the project to view the existing UI (e.g., a dashboard table). To build on top of it, simply chat with Dualite. For example, you can say:\ Prompt: "Please add a customer page with a list of customers and relevant dummy data."\ Dualite will understand the request, install any necessary dependencies, and generate the new page accordingly. **Step 4: View Generated Customer Page** A new page with dummy customer data is added.
**Step 5: Push Changes Back to GitHub** Click GitHub Connected and choose to push: To the same branch, or Create a new branch Then, add a commit message and click Create Commit. ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXcWv47ljEgLRch3IrPYL-QijFCTisLUBnGo9BdROib5_CcRpGJKARzWAwt7FP04g3hTBnSb05hngfxr1z8VC0Dc-4fgLZsz_BRBZT5gq8v-cO1dgC0OxEX9fuTHMxY1-vlLKfYwiA?key=sMFXVmcaB87SH6EHnL-53A) **Step 6: Verify Changes on GitHub**\ Reload the GitHub repo to see the new commit and file changes.\ Shows a real example: "added customer page" with routing updates.
**Step 7: Create a New Branch (Optional)**\ You can name and push to a new branch, and later open a PR from GitHub. **Conclusion** With the GitHub Import feature, Dualite not only simplifies onboarding existing projects but also creates a fluid, two-way bridge between design and development. From importing code to visually modifying components and pushing updates back to GitHub, teams can now collaborate in real time without switching tools or losing context. Whether you're modernising a legacy app or building something from scratch, Dualite empowers teams to move faster, stay in sync, and ship with confidence.
# Introduction Build it. Showcase it. Welcome to ***Showcase*** - by Dualite! We're thrilled to have you here. We created *Showcase* as a dedicated place where you can share what you've built with the world. It's more than just a portfolio; it's a vibrant stage for your work, a space to connect with fellow builders , and a platform to find inspiration for your next big idea. Join our [slack community here](https://join.slack.com/t/dualiteclosedalpha/shared_invite/zt-2x9jbf6wi-uLQrwRIShawDqgOmQfJPJQ) or write us at ** for any suggestions and feedbacks for Showcase. # Submitting to Showcase Dualite Showcase is your platform to shine, connect, and inspire. Here's a quick, clear guide on how to get your amazing creations featured. *** #### Step 1: Publish Your Project The journey begins with publishing your project to a live URL. Dualite integrates seamlessly with your Netlify account, making publishing a breeze. * **Publish your project:** Click on the top-right icon "Publish" to get live. * **Read more about publishing** [here](https://alphadocs.dualite.dev/integrations/netlify).
#### Step 2: Submit to Showcase Once you're live, you'll be immediately prompted to submit to Showcase. * **Click 'Submit to Showcase':** This option will appear after successful deployment.
* **Fill out the form:** Provide all necessary details about your project – a compelling description, prompts used and tags. The published link, screenshot will be automatically added by Dualite.
* **Submit:** Hit the submit button to send your project for review.
#### Step 3: Our Review Process Your project's safety and quality are paramount. Our dedicated team meticulously reviews every submission. * **Security & Content Check:** We scrutinize for security vulnerabilities and any harmful or inappropriate content. * **Prompt & Transparent:** We aim for quick reviews and will keep you informed every step of the way. For more details on our standards, refer to our [Moderation Procedure here](https://www.google.com/url?sa=E\&q=link-to-your-moderation-procedure). #### Step 4: The Outcome: We'll Reach Out! After our review, you'll receive an email detailing the status of your submission. * **If Approved: Project Live!** * **Congratulations!** We'll send you an email confirming your project is now live on the Dualite Showcase! Get ready for the applause. * **If Not Approved: Constructive Feedback** * We'll provide clear, constructive feedback explaining why it wasn't approved and offer actionable steps for improvement. * **Second Chances:** We believe in your potential! Revise your project based on our feedback and resubmit. We're here to help you succeed. *** Ready to showcase your talent? Submit today and get featured on Showcase. We can't wait to see what you've built! # Guidelines Build it. Showcase it. To ensure our community remains a positive and constructive space for everyone, we've put together these guidelines. Reading them will help you understand how you can make the most of Showcase by Dualite. #### Moderation Process A member of our dedicated moderation team will personally review your project. This involves: * **Testing Functionality:** We check if the project works as described. * **Code & Security Scan:** We review the submission for any of the prohibited content listed above, paying close attention to security vulnerabilities. * **Upholding Community Standards:** We ensure the project aligns with the positive and creative spirit of the Dualite community. We aim to complete this review promptly, though review times can vary depending on submission volume. #### What We Don't Allow To be crystal clear, the following are strictly prohibited on Showcase. Submissions containing any of these will not be approved. * **Harmful or Malicious Content:** Any project containing malware, viruses, or intended to harm users' devices or data. * **Illegal Activities:** Content that promotes or engages in illegal acts. * **Hate Speech and Harassment:** Content that is discriminatory, hateful, or intended to harass or bully others. * **Explicit or NSFW Content:** Nudity, sexually explicit material, or graphically violent content is not permitted. * **Misinformation:** Projects or content that are intentionally deceptive or spread misinformation. * **Security Risks:** Any exposed private credentials (like API keys) or user data. This is a common issue, especially with AI products, so please double-check your code and environment variables before submitting. # Upcoming on Showcase #### The Future is Bright: Coming Soon to the Showcase! We're constantly working to make Showcase by Dualite an even more engaging and interactive platform. Here are a few things you can look forward to: **Upvotes & Discusions:** Soon, you'll be able to show your appreciation for your favorite projects in the Showcase with likes and engage in discussions through comments on each post. **Marketplace**: Share & Monetise what you've built. Join our [discord here](https://discord.gg/jc49AcSby3) or write us at ** for any suggestions and feedbacks for Showcase. # Figma Dualite also supports integrating with your Figma designs. ### TLDR {% embed url="" %} ### Connecting your Figma account Click on the Figma icon at the starting screen, and click on Connect Figma
You'll be redirected to an oAuth screen. Make sure the oAuth account ( in my case) is the same where your Figma file is in.
### Selecting the Figma design URL On successful authentication, you'll be redirected to this screen.
Make sure you select the Figma design URL, preferably a Frame, Component or Instance. Here's how you do that: * Open the Figma design file * Select the Frame you want to convert * Right Click on the design * Select Copy/Paste as * Select Copy link to selection * Paste the copied URL in Dualite the field above and click on "Import"
You can reconfirm the same as Dualite will show you. Click on "Continue with this Design" once you're sure for the same. Once clicked, you'll be able to see the "Figma green tick" as a confirmation at the chat bot
You can then type out in the message any additional details or simply *"Build this Dashboard based off the Figma file"* # GitHub 2-way Sync Dualite supports a 2-way sync with GitHub. You can 1. Import an exising GitHub repository and push changes. 2. Push your Dualite project to a new GitHub repository. ## Import an existing GitHub Repository Click on import from Github and copy-paste your existing GitHub repo
Select the framework and language you're working with as well as the package manager you want to use. Select the branch you want to import in Dualite. Then click Open Repository.
#### Pushing changes to the imported GitHub Repo You can either push to an existing branch or create a new branch. You can also edit the commit message. Then click on create commit.
## Push your Dualite project to a new GitHub Repo If you're starting a project from scratch on Dualite itself, you can click on the GitHub icon and Login it to GitHub
Once connected, click again on the top-right GitHub icon and you can then **create a new repository.**
After creating a new repo, you can either push to an existing branch or create a new branch. You can also edit the commit message. Then click on create commit.
### Conclusion GitHub integration allows you to build with Dualite on top of existing projects. This allows you to streamline your existing workflow and codebases, iterating at much faster speed. You can refactor, add new features, generate screens, fix bugs, and iterate on existing codebases at a dramatically faster pace. Every change stays consistent with your project’s architecture, helping you ship higher-quality updates in a fraction of the time. # Custom APIs Dualite has a unique functionality of integrating REST APIs. There are two ways: * Infer API automatically: Dualite builds out a 'dummy' API for you based on inferring the frontend structure to get you an idea of how the API needs to be developed * OpenAPI spec: You can directly copy-paste your API Swagger doc or OpenAPI spec and it'll automatically understand which API endpoint needs to be connected to which design element
# Netlify With Dualite, you're able to also deploy on Netlify instantly and showcase your project to the world. You simply need to click on Deploy at the top-right, and connect your account with Netlify
# Supabase Bring a powerful backend to your Dualite application with Supabase. Dualite’s native Supabase integration allows you to design your front-end and spin up a production-ready backend from one place. That means you can create app screens, connect a cloud PostgreSQL database, and manage authentication or storage, all without leaving Dualite. This end-to-end workflow makes full-stack development faster and more accessible. Non-technical users can rely on Dualite’s guidance, while experienced developers can dive into Supabase’s advanced features as needed. ### Overview Supabase is an open-source Firebase alternative that provides: * A hosted PostgreSQL database with real-time updates * Secure user authentication * File storage By connecting Supabase to your Dualite project, you instantly get a backend that’s ready for production, no boilerplate, no manual server setup. Supabase’s dashboard makes it simple to manage your data and users, while its SQL foundation ensures you keep the scalability and power of PostgreSQL. Read more about Supabase [here.](https://supabase.com/docs) ### Why Use Dualite’s Supabase Integration? Instead of juggling separate tools for frontend and backend, Dualite handles both in sync. Just describe what you want, and Dualite wires up the UI *and* the backend logic. For example, a prompt like (after you connect your Supabase account) : > “Add a user feedback form and store responses in the database.” Dualite will: * Generate the form UI * Create a Supabase table for feedback * Connect both seamlessly This unified approach accelerates development, reduces integration errors, and lets you focus on shipping features. Beginners get simplicity, while power users move faster with less friction. ### What this integration adds for you? After you connect your Supabase account with Dualite, Dualite will unlock the following features for you. * **Database** – Store, query, and manage your data with full SQL support. Dualite can auto-generate tables and schema directly from your prompts. * **Authentication** – Add secure sign-ups, logins, and access control. Dualite can wire in ready-to-use auth flows (email/password, etc.) with a single instruction. * **File Storage** – Upload and serve images, documents, or media via Supabase Storage. Perfect for profile photos, uploads, or static assets. # Variables Variables is an easy way to save your private keys like AI API keys, Supabase URLs and many more ## Introduction Variables is an easy and simple way to integrate powerful AI models like OpenAI, Claude or Gemini easily through a single click, copy-paste. You simply go and put your API key in the variables modal, and it will integrate seamlessly and power your application with AI. Dualite keeps your credentials secure by keeping them in a special .env file.
Clicking this "Variables" button opens a pop up. Add variables like OpenAI, Gemini, Supabase, etc. keys by simply copy-pasting there.
Click "Save Changes" when you're done. # Introduction Prompting is how you guide Dualite using natural conversation. Learn how it works and why it’s the fastest way to bring your ideas to life. ### Prompting **Prompting is how you tell Dualite *****clearly***** what you want in simple words.**\ With the right prompts, you can turn your idea into reality through Dualite in a matter of minutes Prompting powers your entire Dualite experience. A single well-crafted sentence can help you: * Spin up new apps * Modify or expand current screens * Automate complex flows * Troubleshoot issues * Bridge the gap between design and code Better prompts mean better outcomes. And mastering them is simpler than you think. # Prompt Enhancer Unlock prompt optimization for better results and fewer iterations now in Dualite Simply click on "Enhance" and it will enhance your simple prompt to a well-optimized and elaborate prompt for higher-quality results.
# Prompt Techniques This section introduces the fundamental concepts of prompt writing for **Dualite,** especially if you’re new to the idea of giving effective prompts. The goal is to help you communicate effectively so Alpha can generate high-quality, relevant code without unnecessary back-and-forth. {% hint style="info" %} **What is prompting?** Prompting refers to the text-based instructions you give to Dualite to interact with it. Think of it as messages guiding Dualite on what to do. {% endhint %} ### Understanding how Dualite thinks We've designed Dualite to minimise the number of prompts to achieve a desired output. He's programmed specifically for frontend web and app development. He already understands how a good frontend codebase is structured. Here are some important points about Dualite. 1. Dualite already knows how to organize a front-end codebase and is aware of the programming language, framework and styling library you’ve chosen while the start. 2. Dualite always uses our default framework templates while creating a new project. Example: React & Tailwind template: . Moreover, Alpha is capable to modify these starter files as well based on your requirements or prompts. {% hint style="info" %} Prompts and messages are essentially the same thing. We use that interchangeably, preferring the latter for simplicity. {% endhint %} ### Starting a new project/chat Here are a few tips for your first prompt while starting up a new chat. 1. State the purpose clearly and concisely and explain your vision to Alpha. 2. Let Alpha build a first version, then add more specific details, constraints and data to enhance the output. State exactly what you want and don’t want. 3. Iterate further based on your requirements. ### Single Shot Prompting. Dualite is capable to process large and complex instructions in one go. There are cases where we've build great looking dashboards in a single prompts like the following video {% embed url="" %} The above prompt for this is "Generate a finance dashboard for CEOs to manage their company data" This approach is great if you're starting from scratch, from idea itself. In such case you should be providing Alpha the information about the goal, purpose and constraints of the application. Alpha may take up some liberty on technical implementation and UI, focusing on achieving your usecase. You can make tweeks with next prompts anytime. ### Iterative Prompts Iterative (multi step) prompting is required if you've a complex usecase with multiple moving parts. Seperating concerns across prompts is fairly good approach here. Seperating concerns also gives you more space to explain your custom technical requirements effectively. For example, assuming React with Tailwind as the selected framework. {% hint style="warning" %} **DON'T** Build a wedding dashboard that has 2 pages, Page 1 is a Kanban setup to organise my tasks and also a financial tracker to keep in check of the finance and plan that well . Also integrate the API Specification provided. {% endhint %} {% hint style="success" %} **DO** * Build me a wedding dashboard which has a Kanban setup to organise my tasks. *(*Optional*) <**Technical details>** Use a theme config to store my design tokens and import fonts from WebFonts)* * Now add another page for finance tracking to keep in check of the finance and plan that well. Add bar graphs and pie charts also for this page. *Use Tanstack Router instead of React Router.* * Here is my API specification, *integrate them using a custom hook.* {% endhint %} Ideally, you should not expect a complete web application following all your intricate in one shot. Focus on getting your desired layout and code structure first. Then keep on prompting to add more specific details and features. {% hint style="info" %} You should club multiple small to medium changes into a single prompt, but not significantly different and large instructions together. Here's an example of *building a fairly complex application with just 3 prompts:*\ [*https://www.youtube.com/watch?v=mq\_5DMq6D6A*](https://www.youtube.com/watch?v=mq_5DMq6D6A) {% endhint %} ### Image Prompts As a user, you can upload images along with your prompt and ask Dualite to create a solution based on them. There are two key approaches: the first is a straightforward copying method. {% hint style="info" %} *After uploading the image:* Create and build a UI that matches the attached image as close as possible. {% endhint %} If you add functionalities on top of an existing image, including describing it, that'll also effectively work as well {% hint style="info" %} *After uploading the image:* Build an app as close as the image provided—a Kanban clone. It should allow adding new cards (tickets), reordering them within a column, and moving them between columns. {% endhint %} The second one being inspirational. Suppose you've seen a similar page on web and you want your application to have a similar design theme. In this case you should describe what changes or deflections you expect over the attached image. ### Avoid ambiguity Make sure your prompts are clear and concise. {% hint style="warning" %} **DON'T**\ Make this website better {% endhint %} {% hint style="success" %} **DO**\ Add a sign-up page with typing fields for username, email, and password and include a submit button. Also enhance the layout by adding some extra whitespacing. {% endhint %} ### Conclusion Prompting in Dualite becomes more effective when you combine these strategies. \ Happy Coding! # Chat Limit & Conversation Summarizer Introduced with our new Conversation Summarizer 🎉 Ever noticed how Dualite sometimes “forgets” what you said earlier?\ That’s not bad memory, it’s the **chat limit**, technically called the **context window**.\ \ Think of it like a whiteboard. Dualite writes everything you say on it, your questions, instructions, and even its own responses. But the board isn’t infinite. Once it’s full, the oldest stuff gets faded to make space for new things. Why does this matter?\ Because every message you send to Dualite, from your “make the button blue” to “connect this form to Supabase” — eats into that chat limit. More context = smarter results.\ But too much = confusion for Dualite. That's why we introduced a conversation summarizer. This automatically gets activated after you're reaching AI's optimal memory window. Conversation Summarizer helps you to keep working on your project by summarising all the previous conversations into a short, accurate description. This keeps Dualite faster, more accurate and intelligent.\ \ *Keep Building!* # Enhance your prompt with GPT {% hint style="info" %} We're working on adding a prompt enhancer natively in Dualite! Stay Tuned. {% endhint %} Prompting is one of the most powerfull, and often time-consuming, aspects of developing AI-powered solutions. Whether you're creating a chatbot, automating customer service, or summarising PDFs, finding the ideal prompt might take hours of testing. This is where ChatGPT's Thinking models come in. Using ChatGPT's user-friendly chat interface, you can quickly develop high-quality prompts and then plug them straight into Dualite Alpha to enable smart, generative features in your applications. This method allows you to bypass the painful trial-and-error step and begin working using AI straight away. ### Why use ChatGPT for prompting? * Rapid iteration: Refine and test your prompt ideas through conversation. * Reusable Results: Transfer prompts to Alpha with zero rework. * Faster Build Time: From idea to functional prototype in minutes. #### Step-by-Step Workflow #### Step 1: Talk to ChatGPT First Start a conversation with ChatGPT using a simple description of what you want to build. For example: *'Make me a prompt for Dualite Alpha for a modern UI to-do list'* Refine and iterate until the output looks right for your use case.
#### Step 2: \ Once you're happy with the response format and clarity, extract the final prompt.
#### Step 3: Plug Into Dualite Alpha
#### Step 4: Its ready! (There can be situations where you'll need to re-run the terminal after putting the Gemini API key. make sure you go to Dualite Terminal below do Ctrl + C (on Mac) to kill the server and redo *yarn* and then *yarn run dev* step-by-step)
Now that you’ve shortcut the prompt creation process using ChatGPT, keep building in Alpha: * Combine with tools like Sheety, Zapier, or Notion * Add multi-step flows * Use OpenAI or Gemini as the backend model ### Conclusion You don’t need to start from scratch when designing with AI, let ChatGPT handle the heavy lifting of prompt creation so you can focus on building fast. This workflow not only speeds up development but also helps you craft smarter, more precise prompts that drive better results inside Dualite Alpha. By combining ChatGPT's conversational flexibility with Alpha’s powerful no-code environment, you're setting up your project for success, from the very first line of the prompt. # Troubleshoot with prompts Use the right prompts to debug apps like a builder - identify bugs, prevent breakage, and fix with clarity. ### **Why Prompt-Based Debugging Works** With the right prompt, you can do more than create — you can dissect, inspect, and repair your existing screens or logic. When something feels off, stops working, or suddenly disappears, Dualite guides you through a clear, step-by-step debugging process using nothing but prompts. You need to be giving it two core data points of **what is going wrong**: 1. A reference image if something visually is not aligned (for example, there is not a nav bar where it was supposed to be) in the bottom-right chatbox 2. A specific, concise, and detailed prompt on what is not there and what should be there ideally. ### **Example: Gemini AI integration** # Example - AI PDF Analyser With Dualite, you can integrate state-of-the-art AI models like Gemini, OpenAI and Claude in whatever you've been building with us.

How Dualite builders feel building AI builder tools using an AI tool

## Building a simple AI PDF analyser tool with Dualite {% hint style="info" %} The below approach essentially stores your AI model's API key in the frontend, which may not be ideal at certain situations. We're working on a better way to deal with this. {% endhint %} ### 1. Prompt We're using Dualite and starting out with the following prompt: > *Build me an AI PDF analyser tool "PDFAnalyse" in which users can upload any kind of PDF, and the tool analyses and gives a strong summary of the uploaded PDF*
> > *Have an upload functionality where user can upload the PDF. When we submit this form, it should make an AI call to Gemini (use the model name - gemini-2.5-flash-preview-05-20). Pass the PDF files directly to Gemini.*
> > *The final result should be a summarised version of the PDF* {% hint style="info" %} Make sure you type in the model name (in this case, gemini-2.5-flash-preview-05-20). Also in certain cases dealing with PDFs and documents, clearly add another prompt to directly pass the PDF to Gemini since it can sometime start parsing which can cause unnecessary additional iterations {% endhint %}

Choosing React + Tailwind

### 2. Copy-paste your AI API Key into Dualite Now you simply need to integrate your API Key. In the above case, we're just gonna head to [Google AI Studio](https://aistudio.google.com/) and get our API Key and paste it in the env file (your\_gemini\_api\_key\_here) in the "Code" section. For security purposes can't show you the API key.
### 3. And...you're done! {% hint style="info" %} There can be situations where you'll need to re-run the terminal after putting the Gemini API key. make sure you go to Dualite Terminal below do Ctrl + C (on Mac) to kill the server and redo *yarn* and then *yarn run dev* step-by-step {% endhint %}
While there are countless AI tools available online, Dualite stands out with its superior focus on security. Unlike many platforms that expose API keys publicly, Dualite securely stores them in a .env file, ensuring your credentials remain protected. # Gemini: Use Google AI Connect Gemini to your project to build with Google’s powerful multimodal AI models. Google created Gemini, a cutting-edge multimodal AI model for thinking, interpreting, and producing across language, code, images, and other mediums. Integrating Gemini into Dualite allows you to develop intelligent, highly contextual apps that combine the power of Google's AI ecosystem with Dualite's no-code design and automation features. This article will show you how to integrate Gemini into your Dualite projects to improve processes, including document summarisation, conversational assistants, generative design logic, and smart automation triggers. {% hint style="info" %} **Your API key are secure with Dualite.** It is encrypted and never exposed, so you can connect without any worry. {% endhint %} ### Why Gemini? #### Gemini is renowned for: * Multimodal skills include the ability to understand and interpret inputs such as text, graphics, and even code at the same time. * Combines easily with other Google products and APIs. * Excels at logical inference, lengthy context comprehension, and task chaining. * Gemini's characteristics make it a perfect model for Alpha users wishing to create complex, human-like, and context-aware interfaces for a variety of use cases. ### Integrating Gemini AI in Dualite Before integrating Gemini, ensure that you have: * Access to [Google AI Studio](https://aistudio.google.com). * An activated Gemini API key. #### Step 1: Get Access to Gemini via Google AI Studio Visit [Google AI Studio](https://aistudio.google.com) and create an API key for the Gemini model you want to use. Gemini 1.5 Pro is typically recommended for advanced multimodal workflows.
#### Step 2: Tell Dualite about your Gemini key Prompt in about the AI project you want to build (e.g AI Chatbot) and make sure you write that you want to use **Gemini 2.5 Flash AI** for it.
#### Step 3: Add the relevant API key through Variables Open "Variables" and copy-paste your Gemini API key into the Variables pop-up and click on "Save Changes"
#### Step 4: All set and done! Your AI Chatbot is now ready and integrated with Google's multi-modal AI, Gemini.
#### Potential Error There can be times when Dualite has assumed "Gemini 1.5" instead of "Gemini 2.5 Flash" and something like the following screen may appear. You just need to type in to iterate again and use Gemini 2.5 Flash and click on "Fix all Errors" to get it up and running!
### Conclusion Integrating Gemini with Dualite unlocks a new level of AI-powered prototyping. Whether you're building smarter assistants, generating designs, or parsing large documents, Gemini offers a flexible and creative engine within your Alpha workflow. ### Frequently Asked Questions: #### Q1. How to get Google Gemini API Key? * Go to [Google AI Studio](https://aistudio.google.com) and sign in with your Google account. * Create a project, enable billing if needed, then click “Create API Key.” * Copy the key #### Q2. Why am I getting an error even after adding the API key? Even with the correct API key, a 404 error can occur if Dualite is using the wrong Gemini model. To fix this, make sure the model name (e.g., gemini-pro or gemini-1.5-pro) matches the one available in your Google AI Studio. If not, update it in Dualite prompt settings as described above. #### Q3. What should I do if the model is overloaded or not responding? This usually means your API key’s quota is exhausted. Simply create a new API key in [Google AI Studio](https://aistudio.google.com) to continue using the Gemini model without interruption. #### Q4. AI is working, but the results aren’t what I expect. What should I do? Use the chat to improve your prompt. To do this, clearly describe what the AI is currently generating, what you want instead, and give it guidance or examples to steer it in the right direction. Prompting is iterative! # GPT: Use OpenAI Models Connect OpenAI models like GPT 5.1 to Dualite to explore GPT-powered capabilities like summarisation, image generation etc ### Overview OpenAI has created some of the most sophisticated and commonly used language models, such as GPT-4 and GPT-4o, which can generate, summarise, translate, and reason over a wide range of inputs, including text, pictures, and code. Integrating OpenAI into Dualite Alpha allows you to create responsive, intelligent, and user-centred apps that combine Alpha's no-code design and automation with OpenAI's strong generative AI. This article will show you how to integrate OpenAI into Dualite to boost use cases like as smart forms, chatbots, document analysers, creative tools, and more. {% hint style="info" %} **Your API key are secure with Dualite.** It is encrypted and never exposed, so you can connect without any worry. {% endhint %} ### Why OpenAI? OpenAI models are known for: * Exceptional natural language understanding and generation. * Strong coding and logic capabilities. * Ability to handle multimodal inputs (text, images, audio in some versions like GPT-4o). * Robust API ecosystem with reliable support and documentation. * Ideal for building intelligent user flows, dynamic content generation, and context-aware automation. ### Integrating OpenAI in Dualite Alpha Before starting, make sure you have: * Access to OpenAI’s developer platform. * An active OpenAI API key (from ). #### Step 1: Get Access to OpenAI Visit [OpenAI’s platform](https://platform.openai.com/), sign in with your OpenAI account, and create an API key. GPT-4o is generally recommended for rich multimodal and real-time applications. * If you are not being able to locate it, go to , login and create a project.
#### Step 2: Tell Dualite about your OpenAI key Prompt in about the AI project you want to build (e.g AI Chatbot) and make sure you write that you want to use **OpenAI API Key** for it.
#### Step 3: Add the relevant API key through Variables Open "Variables" and copy-paste your OpenAI API key into the Variables pop-up and click on "Save Changes"
#### Step 4: All set and done! Your AI Chatbot is now ready and integrated with Google's multi-modal AI, Gemini.
### Conclusion Bringing OpenAI into your Dualite project opens up endless possibilities. Whether you're building AI assistants, automating content, or analyzing documents, OpenAI provides a versatile, high-performance engine that enhances the power and flexibility of your no-code app. # ChatGPT API with Dualite ### Overview OpenAI has created some of the most sophisticated and commonly used language models, such as GPT-4 and GPT-4o, which can generate, summarise, translate, and reason over a wide range of inputs, including text, pictures, and code. Integrating OpenAI into Dualite Alpha allows you to create responsive, intelligent, and user-centred apps that combine Alpha's no-code design and automation with OpenAI's strong generative AI.This article will show you how to integrate OpenAI into your Alpha projects to boost use cases like as smart forms, chatbots, document analysers, creative tools, and more. ### Why OpenAI? OpenAI models are known for: * Exceptional natural language understanding and generation. * Strong coding and logic capabilities. * Ability to handle multimodal inputs (text, images, audio in some versions like GPT-4o). * Robust API ecosystem with reliable support and documentation. * Ideal for building intelligent user flows, dynamic content generation, and context-aware automation. ### Integrating OpenAI in Dualite Alpha Before starting, make sure you have: * Access to OpenAI’s developer platform. * An active OpenAI API key (from ). #### Step 1: Get Access to OpenAI Visit [OpenAI’s platform](https://platform.openai.com/), sign in with your OpenAI account, and create an API key. GPT-4o is generally recommended for rich multimodal and real-time applications. * If you are not being able to locate it, go to , login and create a project.
#### Step 2: Write Your Prompt in Alpha Start by describing the app you want to build and make sure to include: * What the app does (its core functionality) * The UI elements you need (e.g., input fields, buttons, output areas) * The type of AI integration (e.g., text generation, summarization, classification) * Any specific prompts or behaviors you want the AI to follow Alpha will use this prompt to automatically generate the app interface and backend logic. #### Step 3: Add the API Key in AlphaOnce your app is generated: * Open the "Code" section in Alpha * Navigate to the .env file * Paste your OpenAI API Key in the appropriate variable
### Example: Build a Smart Email Generator Let’s build a tool that helps users instantly generate professional emails based on a brief input. #### Step-by-Step: #### Step1: Write your prompt in Alpha. *For example:* Create a modern UI web app called "Smart Email Generator" that helps users write professional emails using OpenAI. The app should have: 1. A short text input labeled "Describe the Situation" where users enter the context of the email (e.g., “Client asking for a refund”). 2. A dropdown menu labeled "Select Tone" with options: Formal, Friendly, Apologetic, Assertive. 3. A button labeled "Generate Email" that triggers the OpenAI API. 4. A text area below that displays the AI-generated email response. 5. Use GPT-4o to generate the email using a prompt like:
After Alpha has created your tool, it will propose some Setup Instructions and require you to add the API Key.
#### Step 2: Copy your API Key Go to and copy the API Key you generate.
#### Step 3: Paste your API Key \ Go to code and .env to paste your API Key
### Conclusion Bringing OpenAI into your Dualite Alpha workflow opens up endless possibilities. Whether you're building AI assistants, automating content, or analyzing documents, OpenAI provides a versatile, high-performance engine that enhances the power and flexibility of your no-code app. # Attaching Images/Videos in your project ### Overview This article explains how to use images/videos in Dualite and how to reference them correctly and reliably when working with visuals in your project. There are two supported ways to do this: 1. Adding images directly to your Dualite project 2. Hosting images/vidoes externally using Supabase and referencing them via public URLs You can choose the method that best fits your use case. For small projects or quick iterations, adding images directly to the project is usually sufficient. For larger or more dynamic setups, external hosting is recommended. ### Method 1: Add Images Directly to Your Dualite Project Dualite allows you to upload images directly to your project and reuse them across your project. This is the simplest way to work with images in Dualite. #### Step 1: Add Images to the Project Write the message or open an existing Dualite project. Click on the **+** button and click on **Add Images to Project.** Upload images from your computer.
You can add up to 10 images per project. Once uploaded, these images are stored at the project level and can be used anywhere in the project. #### Step 2: Attach Images Where Needed After images are added to the project: * Images can be attached and detached at any time * Detaching an image does not remove it from the project. It simply means that the particular image will no longer used in your project This makes it easy to adjust image placement as your UI changes.
#### Step 3: Reuse Images Across the Project * The same image can be reused in multiple places * No need to re-upload images for each use * Images remain available unless explicitly removed from the project This method works well for small dashboards, profile images, icons, and static visuals. ### Method 2: Hosting and Using Images in Dualite #### Step 1: Set Up Supabase To begin hosting your images, we’ll use [Supabase](https://supabase.com), a free, user-friendly backend platform that includes public image storage. #### To do this- 1. Go to 2. Click *Start Project* and sign in using *GitHub* or email 3. Create a new project (name it something like *dualite* *images*) 4. Once inside your project, go to the *Storage* tab on the left 5. Click *+ New bucket* and give it a name 6. IMPORTANT: Enable Public access to this bucket 7. Click into your new bucket and *upload your images* Each image you upload will generate a *public URL*. This is what you’ll paste into Dualite. #### Step 2: Add images in Supabase Click Upload files on the upper right corner and upload files from your computer
#### Step 3: Add Image URLs in Dualite Once your image is hosted publicly: 1. Open your Dualite project 2. Wherever you want to use an image (inside a card, list, or profile), paste the full image URL 3. If you're inserting multiple images, make sure to clearly define to Alpha which image goes where *Note: Dualite is not capable of “guessing” image placement. Be explicit in your prompt or data mappings.* ### Example Use Case: To-Do List with User Photos Let’s say you’re building a **To-Do list app** where each task has a user profile photo attached. #### Step 1: Upload Images to Supabase 1. Upload 3 user images to your public Supabase bucket:
2. Get the public URLs by clicking on the three dots next to your uploaded image, for example: {% embed url="" %}
#### Step 2: Use Them in Dualite In your *Dualite prompt*, include both the task and the user image clearly. For example:
### Conclusion While Dualite doesn’t support uploading images directly into individual components, it offers flexible ways to work with visuals depending on your project’s needs. For smaller projects or quick iterations, adding images directly to your Dualite project lets you attach and detach visuals easily without any external setup. When your use case grows—such as handling many images, dynamic content, videos, or user-generated media—external services like Supabase provide a reliable and scalable solution. Whichever method you choose, the key is structure and clarity. Make sure each image is clearly associated with its intended content, and be explicit about where it should appear in your project. With the right setup, integrating images into your Dualite builds becomes straightforward, dependable, and easy to maintain as your app evolves. # Adding Midjourney Images [Midjourney](https://www.midjourney.com/) is a powerful creative engine that allows users to generate high-quality, visually compelling images using nothing more than natural language prompts. While these images are striking on their own, their true potential shines when they’re used in dynamic web interfaces. This guide will walk you through how to seamlessly integrate a [Midjourney](https://www.midjourney.com/) generated image into a web-based tool using Dualite. Whether you're designing a product showcase, a personal portfolio, or a landing page, Dualite makes it effortless to blend aesthetic visuals with functional layouts. ### Why Use Midjourney Images in Dualite? [Midjourney](https://www.midjourney.com/) offers unmatched creative freedom, producing stunning imagery that feels artistic, cinematic, or hyper-realistic, depending on your prompt. When paired with Dualite, these images don’t just sit on a canvas, they become a part of your product, driving user experience and interaction. Here’s what you get when you combine the two: * AI-generated imagery tailored to your exact vision * Fast, code-free implementation into responsive UI * Clean layout integration (as backgrounds, cards, hero banners, etc.) * Built-in optimisation for quality and load performance
### Integrating Midjourney Images on Dualite Before you begin, ensure that you’ve already generated your image in [Midjourney](https://www.midjourney.com/) and have access to Dualite #### Step 1: Generate an Image Using Midjourney Start by creating an image using a prompt on Midjourney’s platform. Once the image is generated and you're happy with the result: * Right-click on the image * Select “Copy Image URL” This copied URL will be used as input in your prompt.
#### Step 2: Craft a Prompt in Dualite Now open Dualite. In the prompt field: * Paste the [Midjourney](https://www.midjourney.com/) image URL * Describe your intended use of the image * Specify any layout needs (e.g., “use as hero background,” “embed in a product card,” etc.) Example prompt: “Create a modern and responsive landing page for an art showcase. Use this [Midjourney](https://www.midjourney.com/) image as the hero section background. The image should span full width, maintain high quality, and have a slight overlay to support text visibility.” Dualite will take your input and design the layout accordingly, optimising the image and placing it exactly where and how you describe.
#### Step 3: Let Dualite Build and then Publish Once the prompt is submitted, Dualite handles all technical aspects: * Embeds the image at the correct position * Maintains visual fidelity across screen sizes * Optimises load time for better performance * Applies any design effects (like blur, opacity, overlays) if mentioned When the layout is ready, you can immediately deploy your web tool or landing page. Dualite enables real-time preview and one-click publishing, giving you a shareable, production-ready interface within minutes. Simply click the Publish button located at the top right corner of the screen to make your project live.
### Conclusion Incorporating Midjourney images into Dualite projects is a simple yet powerful way to bring artistic depth to your web tools. With just an image URL and a thoughtfully written prompt, you can build interactive, visually refined web pages that go beyond basic design.\ Whether you're an artist, marketer, or startup founder, this integration unlocks a new level of visual storytelling crafted by AI and deployed effortlessly. # Adding Midjourney Videos [Midjourney](https://www.midjourney.com/) has rapidly emerged as a favorite tool for creators looking to generate visually stunning AI-generated images and videos. Its power lies in its ability to translate prompts into creative visuals with cinematic quality. But what happens when you want to use that visual inside a functional web-based tool? That’s where Dualite comes in. In this guide, we’ll walk you through how to take a video created in [Midjourney](https://www.midjourney.com/) and seamlessly embed it into a responsive web tool using Dualite's no-code design capabilities. Whether you're working on a product landing page, a portfolio, or a niche solution like real estate, this tutorial will help you elevate your visuals through smooth integration. ### Why Use Midjourney Videos in Dualite? [Midjourney](https://www.midjourney.com/) is known for producing artistic, high-resolution videos that can serve as impactful design elements, especially when used as hero backgrounds or immersive content blocks. When paired with Dualite, these videos don’t just stay pretty, they become part of a fully functional, dynamic interface.Using Dualite, you can: * Design tools or websites without writing code * Maintain responsiveness across devices * Adjust video format and quality * Ensure smooth performance even with rich media {% embed url="" %} ### Integrating Midjourney Videos on Dualite Before you begin, make sure you’ve already created your video in [Midjourney ](https://www.midjourney.com/)and have access to Dualite. #### Step 1: Generate a Video Using MidjourneyUse Midjourney on Discord to create your video. Once the video is ready: * Right-click on the video * Select “Copy Video URL”
This will give you the direct link you’ll need to pass into your prompt. #### Step 2: Head to Dualite and Craft Your Prompt Now that you have your video URL, head over to Dualite and start a new project. Here’s what you need to do: * Paste the video URL in your prompt * Describe your use case clearly * Specify the role of the video in the tool For example, if you're building a real estate platform, you can write:“Use this [Midjourney](https://www.midjourney.com/) video as a full-width background in the hero section of a modern, minimal real estate web tool. Ensure it is in 16:9 landscape format and optimized for high quality.” Dualite will parse this and configure your video appropriately within the layout.
#### Step 3: Let Dualite Build and Instantly Dualite takes over from here. It will: * Format the video to fit a 16:9 layout * Maintain video quality and responsiveness * Position the video as a live background in the hero section * Apply a clean, minimal design template suited to your context Once the tool is generated, you're not just looking at a preview, you can instantly deploy your tool. With just a click, your AI-powered site is live and ready to use or share. The end result? A fully functioning web-based tool with a visually engaging hero section powered by your [Midjourney](https://www.midjourney.com/) video. View the deployment here: to explore how seamlessly visual storytelling blends with functional web design. ### Conclusion Integrating Midjourney visuals into Dualite is a powerful way to bridge creativity and functionality. With just a simple video URL and a well-written prompt, it helps you build elegant, responsive tools with immersive design. Whether you’re a designer, a marketer, or an entrepreneur, this workflow unlocks a new way to prototype and publish rich media applications, without writing a single line of code. Explore the intersection of art and automation, start building with Dualite today. # External Backups Backup your project with GitHub With Dualite, you can backup your existing projects to your own GitHub Account\ \ Watch this video for more information. {% embed url="" %} # Interaction mode Use interactions to modify UI elements, adjust layouts, and update styling without writing code. Don't waste time describing 'the blue button on the left' and customise your project visually without writing any code. You can simply click it, add your instruction, and attach it as a smart reference directly into your message. ### Key benefits Traditional AI chat often struggles with "hallucinations" regarding your code structure. By selecting the particular element, you provide the AI with the properties of the element. This results in: 1. **Higher Accuracy:** Code snippets generated by the AI will match your existing class names and styling conventions. 2. **Less Typing:** You don't need to explain *where* an element is; the pill handles the location, you just handle the logic. 3. **Contextual Awareness:** The AI understands the relationship between the element you selected and the rest of your design. ### How it Works The Interaction feature works by capturing the technical metadata of an element (tag, selector, styles) and bundling it with your instruction inside the chat box.
#### Step 1: Enter Interaction Mode Navigate to the **Preview Tab** of your project. Click on the **Interact** button to enter the interaction mode.
As you move your mouse over the interface, you will notice elements being highlighted with a blue overlay. This indicates which element is currently "targetable." #### Step 2: Select and Instruct Once you find the element you want to modify or ask about: 1. **Click** on the highlighted element. 2. An **Instruction Box** will appear immediately over the selection. 3. Type exactly what you want the AI to do with this specific element (e.g., *"Change this to a secondary ghost button style"* or *"Make this text wrap on mobile"*). 4. Click **Save**.
#### Step 3: Manage your Pills After saving, you will notice an yellow pill along with your instructions will appear in your main chat input. * **The Pill contains everything:** The AI now sees the exact CSS styles, the HTML structure, and your specific instruction. * **Smart Deletion:** If you change your mind, simply press `Backspace` or click the `X` on the pill to remove the entire reference.
#### Step 4: Multi-Element Selection You are not limited to one interaction per message! You can repeat this process for multiple elements. * Select a header, add an instruction. * Select a card, add an instruction. * Send the message.
The AI will process all selected elements in context with each other, allowing for complex layout change requests in a single prompt. ### Pro Tips for Better Results * **Be Specific:** Instead of saying *"Fix this,"* use the instruction box to say *"Update the padding to 16px and change the font weight to bold."* * **Combine with Images:** You can attach screenshots and element interactions in the same message to give the AI both visual and structural context. * **Visual Feedback:** If an element isn't highlighting, try hovering over its parent container; sometimes high-level layout changes are easier to prompt by selecting the parent element. # FAQs
Can I import Figma file and convert it to code? Yes, you can. You need to click on "Import from Figma" copy the Figma link and finally click on Continue. Read more [here](/integrations/figma)
Do I need to learn coding to use Alpha? No, you don't need to learn coding. However, having a basic idea really helps in building complex systems.
How can I build a website with Dualite? Yes, you can ! Simply describe in a detailed and structured format what you want to build. Add fonts and other branding details and relevant references or integrate Figma designs. Quickstart [here](/getting-started/quickstart)
How do I generate an APK file from a React Native Project on Dualite? Dualite by default builds the web-build with expo in order to have the ability to preview the result for you right in the browser without emulators. Expo offers the ability to export an application for both Android and iOS. Please refer to the steps below. 1. Clone your Alpha project locally, either download as ZIP or push to GitHub then clone. 2. Make sure Android Studio and relevant libraries for Android Development are installed. 3. You can run your app using expo cli using the command: `expo start -a` (-a flag refers to android) 4. You can also do `npx expo run:android` Here are some reference links 1. 2.
I'm experiencing a white screen on the Preview section. What to do? If you're experiening white screen, you should click on the "Restart" button at the top-right of the Preview section.
Even if this does not work, then it is possible when you're in a low network area. Would recommend to switch to a better network area. If you're still facing issues, contact at
Facing issues in integrating Gemini with the following error: GEMINI_API_KEY not found This is a common issue where the AI needs to replace GEMINI\_API\_KEY with VITE\_GEMINI\_API\_KEY. Just put this error wherever this is showing in the UI or in the error card into the Chatbox and prompt it "to fix", and it should get fixed.
"Sorry, there was an issue processing your request" on Dualite
If you're facing this issue, it is probably either a network error or some internal error at Dualite. Ideally, I would request you to copy the last prompt that you just gave it in the chat box and paste it again. It should work. If it's still not working, then you should contact
# Billing and Payment ### Pricing Model We currently offer a Pro Monthly plan worth $29 per month, and a Pro Annual plan worth $249 per year For commercialisation, you can reach to the founders via mail at or [schedule a call with us](https://calendly.com/dualite-info/alpha-commercialisation) {% hint style="info" %} This limited-time early-bird offer is for a select few. Prices may be updated soon. {% endhint %} #### USD | Free | Pro Monthly | Launch Monthly | | ----------------- | --------------------- | ----------------------------------- | | $0 | $29 | $79 | | 20 messages | 200 messages | Unlimited messages | | Community Support | Premium email support | Dedicated support from the founders | #### INR (inclusive of taxes) | Free | Pro Monthly | Launch Monthly | | ----------------- | --------------------- | ----------------------------------- | | $0 | Rs. 2999 | Rs. 7999 | | 5 messages | 200 messages | Unlimited messages | | Community Support | Premium email support | Dedicated support from the founders | What are 'messages'? Each message that you sent through our initial chatbot or the iterative chat is counted as a message.
### Reaching out for custom plans You can schedule a call with us at [Calendly](https://calendly.com/dualite-info/alpha-commercialisation) # Help and Support Explore free and paid support options, including priority assistance. Dualite is dedicated to providing an outstanding customer experience. We offer technical support for paid projects hosted on the Dualite platform, following the scope, hours, contacts, and channels specified below. ### Plans Free Plan: Slack community and documentation Pro Plan: Prioritised support through email. Launch Plan: 1-on-1 support. ### Slack Channel If you're a Pro member, you can join the following Slack channel for any specific issue [here](https://join.slack.com/t/dualiteclosedalpha/shared_invite/zt-2x9jbf6wi-uLQrwRIShawDqgOmQfJPJQ) ### Email Contact us at for any further queries # Figma rate limit error Understand what this error means in Dualite and when you can retry, based on your Figma plan. ### What this error means Figma has stopped accepting more API requests from your account.\ Dualite is telling you that Figma’s limit for you has been reached.Nothing in your Dualite project or Figma file is broken. ### Figma limits by plan and seat These are the limits that matter for this error: | Seat | Starter | Professional | Organization | Enterprise | | ------------- | --------------- | --------------- | --------------- | --------------- | | View / Collab | Up to 6 / month | Up to 6 / month | Up to 6 / month | Up to 6 / month | | Dev / Full | Up to 6 / month | 10 / min | 15 / min | 20 / min | > [Figma’s official rate limit rules](https://developers.figma.com/docs/rest-api/rate-limits/) ### When you can import Figma design again Use this as a simple rule of thumb: * Any plan, View / Collab seat * Limit: up to 6 Tier 1 requests per month. * If you see this error after a few imports, you are likely out for the month. * Retry next month or ask your admin to move you to a Dev / Full seat. * Starter, Dev / Full * Limit: up to 6 Tier 1 requests per month. * Same as above: you will usually need to wait for the next month or upgrade. * Professional, Dev / Full * Limit: 10 requests per minute. * Wait at least 1 minute, then press Retry once. * Organization, Dev / Full * Limit: 15 requests per minute. * Wait at least 1 minute, then press Retry once. * Enterprise, Dev / Full * Limit: 20 requests per minute. * Wait at least 1 minute, then press Retry once. {% hint style="warning" %} Pressing **Retry** repeatedly will not bypass the limit.\ Always wait first, then retry one time. {% endhint %} {% hint style="info" %} **Need help?**\ Email us at or join our [Discord community](https://discord.com/invite/vSBjB88PVy) to get help, share ideas, and connect with other creators. {% endhint %} # Update Logs Coming Soon