\n {/* General Section */}\n

General Observations and Disclaimers

- AI code generation produces varied results—you'll rarely get identical outputs even when using the same prompt. Instead of trying to fix badly generated code, it's often better to try the prompt several times until you get a satisfactory result.

- Game generation is HIGHLY error-prone and still in its early stages. You'll likely need patience to achieve the results you want.

- Even though coding knowledge isn't required, there is still a learning curve to AI coding. To achieve the best results, you'll need to be very descriptive and understand the problems you want to solve.

- As much as it can be satisfying when you immediately get a result that surpasses your expectations, it can also be frustrating when your AI coder misunderstands you.

- Do not hesitate to ask us for advice or use the brainstorm mode to get ideas or help formulate your ideas better.

\n\n {/* Beginners Section */}\n

Beginners

Building with dev.fun is simple—just type what you want to see, and it will give you a result in seconds while trying its best to capture your intentions. You can then prompt it again to make changes or fix potential bugs (like working with a human developer, the code doesn't always work on the first try).

A typical beginner conversation could be:

User: I want to build a landing page for my conspiracy theories blog.

DEV0: Here is your website.

User: I don't like the colors; can you make it more pink?

DEV0: Here is your update.

User: The home button isn't working correctly; can you fix it?

Tips

Be precise and descriptive about what you want; the more information, the better.

\"Make a website about cars\" will give you more random and less interesting results than:

\"Make a car comparison website:

There is a menu with different brands and models.
I can select two models and do a side-by-side comparison of their characteristics.
When I'm done, I can select the car I prefer.\"

Talk about the vibe and tone you are looking for.

Describe the mood and style you want with more details for more accurate results. Example requests:

I want a hilarious and lighthearted landing page about the coronavirus.
Can you make it colorful (I like green the most) and add snappy animations?
Please be very verbose; I want a lot of text and details.
I love minimalism; please make sure the website has a very pure vibe.

When trying to get bugs fixed, be as descriptive as possible.

If you try to bug fix, asking \"it doesn't work\" may get a lucky result and fix the bug, but it's very unlikely. Try to describe the interactions when the bug happened more precisely to help guide the bug fixing.

\"When I click on the homepage button, suddenly my computer shuts down\" would increase your chances of getting the bug fixed.

This is a pretty good starter. However, in order to make really juicy apps, there is a little bit of a learning curve and more advanced concepts we can go through.

\n\n {/* Stepping Up Section */}\n

Stepping Up

External APIs

When you have very specific needs for external data sources, it is possible to paste API links you want to consume, coupled with a succinct documentation of the expected response formats, and your AI coder will then be able to use it.

Example:

Use https://frontend-api.pump.fun/coins/king-of-the-hill to retrieve the latest king of the hill coins on pump.fun.

The response will look like this:

\n                {`{\"mint\":\"6uNJn5q4SVfAFGmHD7sENkLQPTRBzKvWkCxqrzp6pump\",\"name\":\"what acute cat\",\"symbol\":\"∠cat\",\"description\":\"\",\"image_uri\":\"https://ipfs.io/ipfs/Qmf2bYaSwwmEwsfHJzh6LwKCUmXLWCKZAw1anbQbuiS29G\",\"video_uri\":null,\"metadata_uri\":\"https://ipfs.io/ipfs/QmQiepsgrACksjptRrx6fHAUYkjk5sGtJMPm1HPs7QLhkU\",\"twitter\":null,\"telegram\":null,\"bonding_curve\":\"BbsKvrR4i5WZ7q2secj8UK7Vn3JRZAuRYigFsuesqBik\",\"associated_bonding_curve\":\"HDLeTX7y1xyYqqtG3qNduYqPhURwUzqQa4YRjFT6Z466\",\"creator\":\"5ikFJQckEbuWrpsyHpDUAGjBokjSCMXN3GJ8FQnsp3KG\",\"created_timestamp\":1736834523743,\"raydium_pool\":null,\"complete\":false,\"virtual_sol_reserves\":84449477385,\"virtual_token_reserves\":381174651802592,\"total_supply\":1000000000000000,\"website\":null,\"show_name\":true,\"king_of_the_hill_timestamp\":1736834785000,\"market_cap\":221.550611998,\"reply_count\":97,\"nsfw\":false,\"market_id\":null,\"inverted\":null,\"is_currently_live\":false,\"username\":null,\"profile_image\":null,\"usd_market_cap\":41033.38884814958}`}\n

\n\n

Assets

You can use images and any other types of media in your apps as long as you paste a direct link to the file.

Example:

Here is the logo I want to use: https://i.imgflip.com/4/1ur9b0.jpg

\n\n

Debugging

Bugs can happen (a lot), and sometimes there is no visual feedback for the bugs (especially for games; you will usually just have a black screen). In this case, it is usually possible to fix the bug by just opening your browser console (F12 in most browsers), and there is a good chance you find a bunch of red text that looks like this:

\n                {`Error: createEmitter removed. See ParticleEmitter docs for info createEmitter https://cdn.jsdelivr.net/npm/phaser@3.86.0/dist/phaser.min.js:1 create https://2690c3f48ab2a40-preview.sandpack-static-server.codesandbox.io/:75 create https://cdn.jsdelivr.net/npm/phaser@3.86.0/dist/phaser.min.js:1 loadComplete https://cdn.jsdelivr.net/npm/phaser@3.86.0/dist/phaser.min.js:1 emit https://cdn.jsdelivr.net/npm/phaser@3.86.0/dist/phaser.min.js:1`}\n

You can then just paste these error messages into the prompt and send them; it will help a lot with debugging and, in a lot of cases, will fix the problem in one shot.

\n\n

Code Injection

It is perfectly possible and acceptable to paste some code snippets in the prompt bar, and your AI coder will then use it in your app.

\n\n

Some Special Features

We've incorporated several special features you can hint at your AI coder to implement for you:

You can add chatbot functionality to your app by defining a specific personality or tone for the AI to create tailored conversational experiences.
You can paste image and asset links with a short description to make them usable in your app.
You can open WebSocket channels between instances of the same app, enabling users to communicate and interact with each other in real time, such as in a trollbox app or chat app.
You can use most external APIs by pasting their links and providing brief documentation.

\n\n {/* Scroll to top button */}\n \n