5. Frontend Generation

In parallel with, or immediately after, the smart contract step, Nyvo generates the frontend application. This is typically a web (JavaScript/TypeScript) project, often using modern frameworks like React or Svelte – that will allow users to interact with the smart contract.

The AI designs the UI layout based on the prompt (e.g., if the prompt mentioned a “dashboard”, it will create a dashboard page; if it’s a marketplace, it will generate pages for listing items, viewing an item, user profile, etc.). Nyvo uses component libraries and best practices for Web3 frontends (such as integrating wallet connection components, using web3.js or ethers.js or Solana web3 libraries appropriately).

It also matches the styling guidelines from the prompt: for instance, using the specified color scheme or font, or ensuring a “clean and professional” look as requested. The frontend code is then linked to the contract – meaning the contract addresses and ABI (application binary interface) are plugged into the frontend so it knows how to call the contract’s functions. Much like the contract, Nyvo will compile/build the frontend code and run a quick usability test (e.g., ensure that pages render, that it can call a read function from the contract successfully). Nyvo’s preview system can even spin up a temporary instance of the app for the user to interact with in the browser chat itself as a test.