Prompts

A detail guide on how to use prompts for Accurate Responses.

To get started with our application, follow these simple steps:

Prerequisites

Before running our application, make sure you have the following:

  • Free space on your machine.

Remember:

Please avoid sharing any sensitive credentials or personal information in this document.

Usage Steps

1

Identify your statement

Start by Identifying what to do with your project. In this example we are going to replace a div Elements with Card Component

2

Describe your problem

In this example, I'm going to replace all <div> components with the Card component from ShadCn, as outlined in context2.

3

Describing Context1

Dropstone is organized into three main sections: Context1, Context2, and UserPrompt. One of the key elements is Context1, where the core of your code is stored. This serves as the primary node, and any changes or modifications will be applied to this context.

Context1

This is where you provide your main code that you want to modify or analyze. For example:

"use client"
import React, { useState } from 'react';

export default function SubscriptionForm() {
  //..Some random functions

  return (
    <div className="flex flex-col items-center justify-center p-4 mt-16">
      <div className="w-full flex-1 rounded-lg border border-gray-200 px-6 pb-4 pt-8 shadow-lg md:w-96">
        <h1 className="mb-3 text-2xl font-bold text-center">Example Element!</h1>
        <div className="w-full">
          <div>
            <label className="mb-3 mt-5 block text-lg font-medium text-gray-700 text-center">
              Text1
            </label>
            <label className="mb-3 mt-5 block text-2xl font-medium text-center">
              Text Label
            </label>
            <div className="p-5">
              Lorem ipsum is great!
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Context2

This is where you provide reference code or components that you want to use in Context1. For example:

import * as React from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

export function CardWithForm() {
  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>Create project</CardTitle>
        <CardDescription>Deploy your new project in one-click.</CardDescription>
      </CardHeader>
      <CardContent>
        <form>
          <div className="grid w-full items-center gap-4">
            <div className="flex flex-col space-y-1.5">
              <Label htmlFor="name">Name</Label>
              <Input id="name" placeholder="Name of your project" />
            </div>
            <div className="flex flex-col space-y-1.5">
              <Label htmlFor="framework">Framework</Label>
              <Select>
                <SelectTrigger id="framework">
                  <SelectValue placeholder="Select" />
                </SelectTrigger>
                <SelectContent position="popper">
                  <SelectItem value="next">Next.js</SelectItem>
                  <SelectItem value="sveltekit">SvelteKit</SelectItem>
                  <SelectItem value="astro">Astro</SelectItem>
                  <SelectItem value="nuxt">Nuxt.js</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </form>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline">Cancel</Button>
        <Button>Deploy</Button>
      </CardFooter>
    </Card>
  );
}

UserPrompt

This section instructs the AI on what actions to perform using Context1 and Context2. Here are some examples:

Example1

UserPrompt:

Replace all divs in Context1 with the Card component from Context2. 
Use this implementation as a guide and ensure the card is centered 
with appropriate width and height.

Example2

UserPrompt:

Integrate the form layout from Context2 into Context1. 
Make sure to replace the existing form fields with those specified 
in Context2, and align the form elements properly.

Example3

UserPrompt:

Use the button styles and components from Context2 in Context1. 
Replace any existing buttons with those defined in Context2 
and ensure consistent styling across the application.

Additional Information

For more detailed instructions and troubleshooting tips, refer to our documentation