Natural Language to Code Translator with WorqHat AI
Hey there, fam! Welcome to WorqHat, where we’re about to embark on an exciting course that will take your AI skills to the next level!
In this course, we’ll be diving into the fascinating world of AI bots, specifically focusing on building our very own AI bot using the incredible AiCon V2 Model from WorqHat AI. And let me tell you, this bot is not your average bot. It’s a bot that can transform your thoughts into actual code in any programming language you desire! Yes, you heard it right.
Imagine being able to express your ideas or describe the code you want to generate, either in Hindi or English, and have the bot magically generate the code for you in your preferred programming language. It’s like having your own personal coding assistant!
This project is significant because it will not only equip you with the knowledge and skills to build AI-based projects but also give you a fundamental understanding of how to leverage the latest APIs provided by WorqHat. Trust me, this is going to be a cool and game-changing experience!
Now, let’s take a sneak peek into the world of the one and only Code Translator, a project that will revolutionize the way you approach coding. Get ready to be amazed!

Project Outcome
But don’t take my word for it, you gotta try it out for yourself. We’ve got a live code translator on this website, that’s already causing a stir. People can’t get enough of it! So, before you even start this course, go check it out and see what all the fuss is about.So, are you ready to step up and take on the challenge? Let’s do this!
View Live Project
What you’ll learn
We will:
- Cover some super cool basic understanding of AI, WorqHatAI, and AiCon models (Text Generation Models).
- We will set up the development environment with WorqHatAI, NodeJS, and NextJS
- We will write text completion models in NodeJS using amazing WorqHat AiCon V2 models.
- We will build a responsive front-end app in NextJS and back-end that uses WorqHat AI API and interacts with front-end, then we will run it locally.
Prerequisites
Learning new technologies becomes easier when you have some prior knowledge. Before diving into WorqHatAI and AI model development, we recommend brushing up on the following areas:
- Programming Knowledge: Having a basic understanding of programming is essential to start experimenting with advanced languages. While not mandatory, knowledge of the JavaScript programming language is considered a plus.
- Critical Thinking: To grasp the complex and abstract concepts involved in WorqHat APIs and AI development, solid critical thinking skills are beneficial. Developing your ability to analyze, evaluate, and solve problems will greatly aid your learning process.
However, don’t worry if you don’t possess all the prerequisite knowledge beforehand. You can still learn API and AI model development without prior expertise. It’s just that having some background knowledge will make your learning experience smoother and more enjoyable.
House Rules
To ensure a productive learning environment, we kindly request that you adhere to the following house rules:
-
Complete Assignments: It’s important to complete your assignments thoroughly and in a timely manner. Engaging with the course material actively will enhance your understanding and proficiency.
-
Join Discord Server: We highly encourage you to join our Discord server, where you can connect with fellow learners, ask relevant questions, and engage in discussions. The server provides a supportive community that fosters learning and collaboration. WorqHat’s Discord community
- Maintain a Positive Attitude: A positive mindset goes a long way in learning. Stay happy, open-minded, and optimistic throughout your journey. Embrace challenges as opportunities for growth and be supportive of your fellow learners.
We are excited to have you on this learning adventure with us! Let’s create an enriching and empowering environment where we can learn and grow together.
Unleash the Power of WorqHat AI
This is the Video Tutorial for the Entire Project. You can choose to follow it directly from here, or you can follow the written tutorial below. The Video has been broken into 2 parts for your convenience and to make it easier to follow.
AI, WorqHatAI, and AiCon Models
In the realm of artificial intelligence (AI) and machine learning, machines strive to simulate human intelligence, while machine learning focuses on enabling machines to learn and improve autonomously without explicit programming. In this context, WorqHat emerges as a groundbreaking no-code platform builder, harnessing the potential of Generative AI to create custom apps, workflows, and automation solutions tailored to businesses of all sizes.
WorqHat empowers solopreneurs, startups, and medium-sized enterprises by automating complex workflows, fostering seamless team collaboration, and enhancing overall productivity. By automating time-consuming tasks, WorqHat allows businesses to thrive and focus on core operations.
At the heart of WorqHat lies the advanced deep learning model known as AiCon (AI Content Optimization Network). This remarkable language model has undergone extensive training on vast volumes of data, enabling it to comprehend natural language with unparalleled precision and exceptional speed. The result? Faster and more streamlined platform building processes.
The WorqHatAI API serves as a powerful tool, providing developers with access to WorqHat’s cutting-edge AI models and the ability to train their own models. WorqHat’s AiCon models are generative language models developed to generate coherent text based on substantial data inputs. AiCon V2, the fastest language model offered by WorqHat, boasts self-training capabilities and can handle requests involving up to 100,000 words in a single go. For tasks requiring logical thinking and increased creativity, AiCon V3, a larger and more advanced model, comes into play.
To utilize WorqHat’s API, developers must obtain an API key and an ORG key. These keys serve as access credentials and are essential for writing NodeJS programs that interact with WorqHat’s API.
Before diving into writing your first program using NodeJS and the WorqHat API, let’s take a moment to understand the concept of an API key and how you can generate one to facilitate seamless integration with WorqHat’s powerful services.
WorqHat API Key
In order to use the WorqHat API, you must first obtain an API key and the ORG Key. We offer a generous free tier that gets reset every month. You can also upgrade to a paid plan to get more API calls and more features.
This key serves as a unique identifier that allows you to access WorqHat’s API services. To generate an API key, follow the steps below:
- Go to the WorqHat API website and click on the Get Started button.
- Join the WorqHat community by entering your email address and clicking on the Join Now button. You can also sign up using your Google or Microsoft account.
- Once you’ve signed up, you’ll be redirected to the dashboard. Click on the Create a Workspace button on the left-hand side of the screen.
- Add a name for your workspace and click on the Create Workspace button. We use workspaces to organize your projects and keep them separate from each other. This allows you to manage your projects more efficiently.
- Once you’ve created a workspace, you’ll be redirected to the Workspace Signin page. Sign in to your workspace using your email address and password that you have set up during the signup process.
- After signing in, you’ll be redirected to the dashboard. Click on the Try Now button on the Build Your Own Applications with our API card.
- You’ll be redirected to the API page. You can find your API key and ORG key on the right-hand side of the screen. Click on the Copy button to copy the keys to your clipboard.
- Also, make sure to add your Domain name to the Allowed Domains section. This will allow
you to make API calls from your domain. For example, if you’re making API calls from a website
hosted on
https://example.com
, you’ll need to addexample.com
to the Allowed Domains section.
Here’s an example of what the API key & ORG key looks like:
var myHeaders = new Headers();
myHeaders.append("x-org-key",
"U2FsdGVkX1+DMFucNFhZT7b3KTDTPLvjKkfWV0XY+jK2tA44wGn+M+KTC1V/eAOX");
Quick Start with WorqHatAI API
Now that you have your API key and ORG key, you can start using the WorqHat API. In this section, we’ll walk you through the process of writing your first NodeJS program using the WorqHat API.
Step 1: Create a NodeJS App
- First of all, install NodeJs in your system. Head over to https://nodejs.org/en/download and follow the instructions to install it.
- Head over to your terminal and create a new directory for your NodeJs app:
mkdir my-nodejs-app
- Navigate to the newly created directory:
cd my-nodejs-app
- Initialize a new NodeJs app and accept the default options:
npm init -y
Step 2: Install Dependencies
- Install the
request
package. Therequest
package allows you to make HTTP requests from your NodeJs app:
npm install request
- Install the
dotenv
package. Thedotenv
package allows you to load environment variables from a.env
file. This is useful when you want to keep your API keys and other sensitive information out of your codebase:
npm install dotenv
Step 3: Create the files
- Create a new file called
index.js
and.env
in the root directory of your NodeJs app:
touch index.js .env
- After running the Commands, the directory structure should look like this:

Directory Structure
Now, let’s move on to the coding part.
Step 4: Write the code
- Open the
.env
file and add the following code:
WORQHAT_API_KEY=YOUR_API_KEY_GOES_HERE
WORQHAT_ORG_KEY=YOUR_ORG_KEY_GOES_HERE
- Open the
index.js
file and add the following code. We are going to write a simple program that will make a POST request to the WorqHat API with the Question/Command and print the response to the console:
// Import the Request library to make requests to the WorqHat API
const request = require("request");
// Load the WorqHat AI API key from a file named ".env"
require("dotenv").config();
// Store the WorqHat API & ORG key in a variable for later use
const worqhatApiKey = process.env.WORQHAT_API_KEY;
const worqhatOrgKey = process.env.WORQHAT_ORG_KEY;
// Set the URL for the API request
const url = "https://api.worqhat.com/api/ai/content/v2";
// Set the required headers for the API request
const headers = {
"x-api-key": worqhatApiKey, // Replace with your API key
"x-org-key": worqhatOrgKey, // Replace with your ORG key
"Content-Type": "application/json",
};
// Prepare the request body in JSON format
const raw = JSON.stringify({
question: "Hi, tell me about you", // The question or command for the AI model
preserve_history: false, // Whether to preserve conversation history for the model. Set to false for one-off questions. Visit documentation for more info.
randomness: 0.4, // Level of randomness for AI model response (0 to 1)
});
// Configure the options for the API request
const requestOptions = {
url: url,
method: "POST",
headers: headers,
body: raw,
};
// Send the API request
request(requestOptions, (error, response, body) => {
if (!error && response.statusCode === 200) {
console.log(body); // Print the response body if the request is successful
} else {
console.log("Error:", error); // Print the error message if the request fails
}
});
Step 5: Let’s break down the code and understand what’s going on
- First, we import the
request
package to make HTTP requests from our NodeJs app:
const request = require("request");
- Next, we import the
dotenv
package to load environment variables from a.env
file:
require("dotenv").config();
- Next, we store the WorqHat API key and ORG key in variables for later use:
const worqhatApiKey = process.env.WORQHAT_API_KEY;
const worqhatOrgKey = process.env.WORQHAT_ORG_KEY;
- Next, we set the URL for the API request:
const url = "https://api.worqhat.com/api/ai/content/v2";
- Next, we set the required headers for the API request:
const headers = {
"x-api-key": worqhatApiKey, // Replace with your API key
"x-org-key": worqhatOrgKey, // Replace with your ORG key
"Content-Type": "application/json",
};
- Next, we prepare the request body in JSON format. This is where we specify the question or command for the AI model and send the request to the API to get the response:
const raw = JSON.stringify({
question: "Hi, tell me about you", // The question or command for the AI model
preserve_history: false, // Whether to preserve conversation history for the model. Set to false for one-off questions. Visit documentation for more info.
randomness: 0.4, // Level of randomness for AI model response (0 to 1)
});
This block of code is where the magic happens. We are sending a POST
request to the WorqHat API,
and we are passing the question/command
to the API. The API will then process the question/command
and return the response
.
- question: The question or command for the AI model (required)
- preserve_history: Whether to preserve conversation history for the model. Set to false for one-off questions. You can also pass in custom training data and conversation history in the for of Key-Value Pairs. Visit documentation for more info.
- randomness: Level of randomness for AI model response (0 to 1). The higher the randomness, the more varied the response will be.
- Next, we configure the options for the API request:
const requestOptions = {
url: url,
method: "POST",
headers: headers,
body: raw,
};
This is where we specify the URL, HTTP method, headers, and request body that we have prepared and send the request to the WorqHat API to process the question/command and return the response.
- Finally, we send the API request:
request(requestOptions, (error, response, body) => {
if (!error && response.statusCode === 200) {
console.log(body); // Print the response body if the request is successful
} else {
console.log("Error:", error); // Print the error message if the request fails
}
});
This is where we send the API request to the WorqHat API and get the response. We are using the
request
package to send the request. We are also checking if the request is successful or not
and printing the response body or error message accordingly.
Step 6: Run the code
Now that we have written the code, let’s run it and see what happens. To run the code, open the terminal and run the following command:
node index.js
You should see the following output in the terminal:
{
"id": "1d9affa3-deac-49ee-87e7-a8d0397826fb",
"status": "success",
"timestamp": 1683057609614,
"content": "I was built by WorqHat, a Generative AI Based No-Code Platform Builder based on the Advanced LLM Model AiCon. It's a predictive technology that is designed to make building applications faster and easier. Is there anything you need help with?",
"processing_count": 58
}
This is the response from the WorqHat API. The response contains the following information:
Field | Description | Example |
---|---|---|
id | The unique ID of the response | 1d9affa3-deac-49ee-87e7-a8d0397826fb |
status | The status of the response | success |
timestamp | The timestamp of the response | 1683057609614 |
content | The response from the AI model | I was built by WorqHat, a Generative AI Based No-Code Platform Builder based on the Advanced LLM Model AiCon. It’s a predictive technology that is designed to make building applications faster and easier. Is there anything you need help with? |
processing_count | The number of times the question/command was processed by the AI model | 58 |
Let’s Start Building
Now that you have learned how to use the WorqHat AI API, it’s time to start building your own application. Today we will be building a simple AI Code Generator application using the WorqHat AI API. The application will generate code for you based on your requirements.
Key Features of the Application
- Generate code for you based on your requirements
- Generate code for multiple programming languages
- Responsive user experience for anyone to convert their codes in an instant.
- Converting the natural language to any programming language.
Setup your Development Environment
Before diving into building our code translator project, it’s essential to set up our development environment. By following these steps, we’ll ensure that we have the necessary tools and configurations in place:
- Install Node.js and npm
Node.js is a JavaScript runtime environment that allows you to run JavaScript code outside of a browser. It’s used to build server-side applications and command-line tools. npm is a package manager for Node.js that allows you to install and manage third-party packages.
To install Node.js and npm, follow the instructions for your operating system:
- Install NextJS: NextJS is a popular framework for building React applications. Install it globally on your machine by running the following command in your terminal:
npm install -g next
- Create a New NextJS Project: Use the following command to create a new NextJS project in your desired directory:
npx create-next-app my-code-translator
- Navigate to the Project Directory: Move into the newly created project directory using the following command:
cd my-code-translator
-
Obtain WorqHat API & ORG Key: If you haven’t already, generate your
API key
andORG key
from WorqHat’s website. These keys will be used to authenticate and access the WorqHat AI engine. -
Configure API & ORG Keys: Open the project in your favorite code editor. Create a File Named . env. Add the following lines to the file, replacing YOUR_API_KEY and YOUR_ORG_KEY with your actual API key and ORG key, respectively:
WORQHAT_API_KEY=YOUR_WORQHAT_API_KEY
WORQHAT_ORG_KEY=YOUR_WORQHAT_ORG_KEY
- Install Dependencies: Install the dependencies for the project using the following command. We will add the dependencies as we go along. As of now, we will be installing the basic dependencies needed to run the project.
npm install
- Run the Project: Run the project using the following command:
npm run dev
- Open the Project in Your Browser: Open the project in your browser by navigating to http://localhost:3000. You should see the default NextJS welcome page, indicating that your development environment is successfully set up.
This is What you should see:

NextJS Welcome Terminal
The project is now ready to be built. This is the basic setup for the project. We will be adding more dependencies as we go along. The file structure of the project will be looking like this:

File Structure for the Project
Well done! You’ve successfully set up your development environment. Now let’s start building our code translator application.
Building the Code Translator Application
A brief summary of what we will be doing to create our application.
This code serves as the foundation for building a text-to-code generator application using Next.js and the WorqHat AI engine. The application allows users to input natural language queries and receive corresponding code snippets in their chosen programming language.
The code begins by importing the necessary dependencies, including React’s useState
, Next.js modules, and other required libraries.
The main component, HomePage
, is defined, which acts as the entry point for the home page of the application. It includes the necessary metadata and the Home
component.
The Home
component handles the user interface and logic for generating code from natural language input. It utilizes the useState
hook to manage the component’s state, including the selected language
, entered text
, generated code
, and loading status
.
The component dynamically imports the Editor component using Next.js’ dynamic function, ensuring it is only loaded on the client-side.
Two important functions, createPrompt
and fetchAIResponse
, are defined to facilitate the generation of code from natural language. The createPrompt
function generates a prompt based on the selected language and user input, while the fetchAIResponse
function performs an asynchronous HTTP request to the WorqHat AI API, passing the prompt and receiving the AI-generated code response.
The user interface is rendered using JSX
, which includes input fields for the question and
language selection, a button to trigger code generation, and an embedded code editor (Monaco Editor)
to display the generated code. The UI elements are styled using CSS classes of
TailwindCSS
.
The code also handles events, such as the button click event to initiate code generation, and updates the component’s state accordingly.
We will be covering all the necessary structure
, logic
, and user interface components
to build a
text-to-code generator application. By leveraging the WorqHat AI engine
and Next.js
, users can input natural language queries and obtain corresponding code snippets, enhancing their programming experience and facilitating better collaboration and comprehension.
Let’s Create the Frontend of the Application
Next.js is a powerful framework for building React applications with server-side rendering capabilities. In this tutorial, we will walk through the process of setting up the entry point for a Next.js application and customizing the initial HTML document. We will also focus on the index.js file, which serves as the main starting point for our application.
The first step in building our application is to create the home page design and layout. We will be using TailwindCSS
to style our application. TailwindCSS is a utility-first CSS framework that allows you to rapidly build custom user interfaces. It provides a set of pre-defined CSS classes that can be used to style HTML elements.
Step 1: Removing Unnecessary Files
Before we begin, let’s remove any unnecessary files from our project. In this case, we can safely remove the “apis” directory since we won’t be using it in this tutorial
Step 2: Understanding the _app.js
File
The _app.js file serves as the entry point for our Next.js application. It acts as a wrapper component for all other components in the application and allows us to define global styles. Let’s take a closer look at the code:
import '../styles/globals.css';
function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default App;
- We import the global styles defined in the “globals.css” file. These styles will be applied globally throughout our application.
- The
App
component is a functional component that receives two parameters:Component
andpageProps
. - Inside the
App
component, we render theComponent
using JSX syntax, spreading thepageProps
as props to theComponent
. This ensures that the initial props for the page component are passed down correctly.
Step 3: Understanding the _document.js
File
The _document.js file allows us to customize the initial HTML document that is sent to the browser. Let’s understand the code:
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
- We import specific components from the
next/document
module:Html
,Head
,Main
, andNextScript
. These components are provided by Next.js and are used to define the structure and content of the HTML document. - The
Document
function is a React functional component that returns JSX code. - The JSX code represents the structure and content of the HTML document.
- The
<Html>
component is the root element of the document and includes an optionallang
attribute set to “en” to specify the language as English.
The <body>
element is where the main content of the page resides. Inside the <body>
, we have two components: <Main>
and <NextScript>
.
The <Main>
component acts as a placeholder for the main content of the page.
The <NextScript>
component includes the necessary Next.js scripts and other resources.
Step 4: Starting from Scratch in index.js
To begin, we need to import the necessary modules. In our case, we will use the next/image module to include images and the next/font/google module to configure custom fonts. Add the following lines at the beginning of the index.js file:
import Image from 'next/image';
import { Inter } from 'next/font/google';
Step 5: Configuring Custom Fonts
Next, we will configure a custom font for our application using the Inter font from Google Fonts. We will assign it to the inter constant. Update your code as follows:
const inter = Inter({ subsets: ['latin'] });
Step 6: Building the Homepage Component
Now, let’s define the homePage component, which will represent our homepage. Replace the existing code in the index.js file with the following:
function homePage() {
return (
<main>
This is the sample code.
</main>
);
}
export default homePage;
In this code, we define the homePage
function as a React functional component. It returns JSX code representing the main content of the homepage. The <main>
element contains the text “This is the sample code.”
To view the changes you’ve made in the code on the actual webpage, follow these simple steps:
- Save the changes you’ve made to the code.
- Ensure that your Next.js application is up and running. If not, start the development server by executing the appropriate command, such as npm run dev or yarn dev.
- Open a web browser and navigate to the URL where your Next.js application is hosted. Typically, this would be http://localhost:3000.
- Once the page loads, you will see the updated content displayed on the screen. In this case,
the text “This is the sample code” will be shown within a
<main>
element.
Step 7: Let’s add the background styling to the homepage
Now, let’s add some styling to the homepage. We will use standard CSS to style the background of
the page. Update your code in body tag
as follows:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: linear-gradient(135deg, #efb0b0, #e6b1f1, #9aa6ef) no-repeat;
background-size: cover;
}
The provided CSS code sets the html
and body
elements to have no margin or padding, and a height of 100% to occupy the full viewport height. The body
element is styled with a linear gradient background that starts in the top-left corner and moves to the bottom-right corner. The background-size
property is set to cover
to ensure the background image covers the entire background area, creating a visually appealing full-screen background effect for the webpage.
Step 8: Adding the Homepage Components
We will now add the components that will be displayed on the homepage. We will create a new
function called HomeComponents
that will return the JSX code for the components. Update
your code as follows:
function HomeComponents(){
return (
<div className="text-black">
<h1 className="text-4xl md:text-5xl text-center mt-8 font-bold">Text to Code Generator</h1>
<div className="text-center mt-8 text-xl md:text-2xl font-semibold">
Generate Code from Natural Language using WorqHat AI in a Click!
</div>
<div className="container">
<div className="mb-6">
<input type="text" id="textbox1" placeholder="Enter your Question here"
className="block mx-auto w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-md focus:ring-blue-500 focus:border-blue-500">
</input>
</div>
<select id="language" className="mx-auto mb-6 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-4">
<option value="">Select language</option>
<option value="c++">C++</option>
<option value="python">Python</option>
<option value="java">Java</option>
<option value="javascript">JavaScript</option>
<option value="c#">C#</option>
<option value="ruby">Ruby</option>
<option value="go">Go</option>
<option value="swift">Swift</option>
<option value="php">PHP</option>
<option value="typescript">TypeScript</option>
<option value="kotlin">Kotlin</option>
<option value="rust">Rust</option>
<option value="matlab">MATLAB</option>
<option value="r">R</option>
<option value="perl">Perl</option>
<option value="scala">Scala</option>
<option value="objective-c">Objective-C</option>
<option value="groovy">Groovy</option>
<option value="lua">Lua</option>
<option value="bash">Bash</option>
<option value="powershell">PowerShell</option>
</select>
<div className="w-full text-center">
<button id="generateButton"
className="mx-auto text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-xl px-5 py-2.5 text-center mr-2 mb-2">
Generate Code
</button>
</div>
</div>
</div>
);
}
In this code, we define the HomeComponents
function as a React functional component. It returns JSX code representing the components that will be displayed on the homepage. The <div>
element contains the following components:
<h1>
element containing the text “Text to Code Generator”<div>
element containing the text “Generate Code from Natural Language using WorqHat AI in a Click!”<div>
element containing the following components:<input>
element for entering the question<select>
element for selecting the programming language<button>
element for generating the code<div>
element for displaying the generated code
We need to style the container properly as well. We will use CSS to style the container. Update
your code in globals.css
as follows:
.container {
color: black;
max-width: 90%;
margin: 0 auto;
margin-top: 70px;
padding: 20px;
background-color: #f5f5f5;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
The provided CSS code sets the .container
class to have a black text color, a maximum width of 90%, a top margin of 70px, and a padding of 20px. The background color is set to #f5f5f5, and the border radius is set to 8px. The box shadow is set to 0 0 10px rgba(0, 0, 0, 0.2) to create a shadow effect for the container.
Now we will add the HomeComponents
function to the homePage
function. Update your code as follows:
function homePage(){
return(
<main>
<HomeComponents></HomeComponents>
</main>
)
}
Step 9: Adding the Code Editor
We will now add the code editor component to the homepage. We will create a new function called
CodeEditor
that will return the JSX code for the code editor. We will be using Monaco Editor for the code editor. Update your code as follows:
First we need to install the @monaco-editor/react
package. Run the following command in the terminal:
npm install @monaco-editor/react
import dynamic from 'next/dynamic';
const Editor = dynamic(() => import('@monaco-editor/react'), {ssr: false});
The Editor
component is imported from the @monaco-editor/react
package. The dynamic
function is used to import the component dynamically. The ssr
option is set to false to prevent the component from being rendered on the server.
Now we will create the CodeEditor
inside the HomeComponents. Update your code as follows:
<div className="edit">
<Editor
height="400px"
language="javascript"
theme="vs-dark"
defaultValue="// Generated code will appear here"
defaultLanguage="javascript"
value="// Generated code will appear here"
options={{
readOnly: true,
wordWrap: "wordWrapRow", // Enable word wrapping at a specific column
wordWrapRow: 10,
}}
/>
<br />
</div>
Add this after the <button>
element in the HomeComponents
function. The <div>
element contains the <Editor>
component. The <Editor>
component has the properties to render the code that is being written.
The <div>
element contains the <Editor>
component. The <Editor>
component has the properties to render the code that is being written.
Now that we are halfway through the project, at this stage, your Project should be looking something like this:

Your Application Halfway
Step 10: Lets work on Handling the button clicks
We will now add the code to handle the button clicks. We will create a new function called
handleGenerateCodeClick
that will handle the button clicks. Update your code as follows:
const handleGenerateCodeClick = async () => {
const language = document.getElementById('language').value;
const questionText = document.getElementById('textbox1').value;
};
The handleGenerateCodeClick
function is defined as an asynchronous function. It gets the
value of the language
and questionText
variables from the <select>
and <input>
elements respectively. We will use these variables to generate the code. Now there are a few
things we need to add as a functionality as well:
- We need to create a Function that will call the API and get the response.
- We need to create a Function that will create the Command that needs to be sent to the API.
- We need to display the code response from the API.
- We need to add a loader to show that the code is being generated.
Step 11: Creating the Fetch Request
We will now create a new function called fetchAIResponse
that will call the API and get the
response. Update your code as follows:
async function fetchAIResponse(selectedLanguage, question) {
const API_ENDPOINT = 'https://api.worqhat.com/api/ai/content/v2';
const API_KEY = process.env.WORQHAT_API_KEY;
const ORG_KEY = process.env.WORQHAT_ORG_KEY;
console.log(API_KEY);
const prompt = "This is the command that will be sent to the API"
const requestOptions = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': API_KEY,
'x-org-key': ORG_KEY,
},
body: JSON.stringify({
question: prompt,
randomness: 0.4,
}),
};
const response = await fetch(API_ENDPOINT, requestOptions);
return await response.json();
}
The fetchAIResponse
function is defined as an asynchronous function. It gets the value of
the selectedLanguage
and question
variables from the <select>
and <input>
that
we will be passing as parameters to the function. We will use these variables to generate the
code. The fetchAIResponse
function will return the response from the API.
Now we have to add the variables to the environment variables. Create a new file called
.env
in the root directory of the project. Add the following code to the file:
WORQHAT_API_KEY=YOUR_WORQHAT_API_KEY
WORQHAT_ORG_KEY=YOUR_WORQHAT_ORG_KEY
In order to get the API keys, you will need to create an account on WorqHat. Once you have created an account, you will be able to get the API keys from the API Keys page.
Now to access the API keys in the code, we will need to add it to the next,config.js
file.
Update your code as follows:
/** @type {import('next').NextConfig} */
require('dotenv').config();
module.exports = {
reactStrictMode: true,
env: {
WORQHAT_API_KEY: process.env.WORQHAT_API_KEY,
WORQHAT_ORG_KEY: process.env.WORQHAT_ORG_KEY,
},
};
This code is a Next.js configuration file that demonstrates how to use environment variables in a Next.js application. It loads environment variables from a .env
file using the dotenv
package. The nextConfig
object contains Next.js configuration options, and reactStrictMode
is set to true
to enable strict mode for React. The env
object exposes environment variables WORQHAT_API_KEY
and WORQHAT_ORG_KEY
, which are assigned values from the corresponding environment variables in the .env
file. This approach helps keep sensitive information secure and allows for flexible configuration across different environments.
Step 12: Creating the function to create the Command
We will now create a new function called createPrompt
that will create the Command that
needs to be sent to the API. Update your code as follows:
const createPrompt = (inputLanguage, inputCode) => {
return endent`
You are an expert programmer in all programming languages. Translate the natural language to "${inputLanguage}" code. Do not include \\\\.
Example translating from natural language to JavaScript:
Natural language:
Print the numbers 0 to 9.
JavaScript code:
for (let i = 0; i < 10; i++) {
console.log(i);
}
Natural language:
${inputCode}
${inputLanguage} code (no \\\\):
`;
};
The createPrompt
function is defined as a function. It gets the value of the inputLanguage
and inputCode
variables from the <select>
and <input>
that we will be passing as parameters to the function. We will use these variables to generate the code. The createPrompt
function will return the Command that needs to be sent to the API.
We have used endent
to format the Command. endent
is a JavaScript template literal tag
that strips leading whitespace from multi-line strings. It is used to format the Command in a
readable way. We have created the Command in such a way that it will be easy for the AI to
generate the code.
Now we will update the fetchAIResponse
function to call the createPrompt
function. Update
your code as follows:
async function fetchAIResponse(selectedLanguage, question) {
const API_ENDPOINT = 'https://api.worqhat.com/api/ai/content/v2';
const API_KEY = process.env.WORQHAT_API_KEY;
const ORG_KEY = process.env.WORQHAT_ORG_KEY;
console.log(API_KEY);
const prompt = createPrompt(selectedLanguage, question);
const requestOptions = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': API_KEY,
'x-org-key': ORG_KEY,
},
body: JSON.stringify({
question: prompt,
randomness: 0.4,
}),
};
const response = await fetch(API_ENDPOINT, requestOptions);
return await response.json();
}
Step 13: Running the function once the user clicks on the Generate Code
button
We will now update the generateCode
function to call the fetchAIResponse
function. Update
your code as follows:
const handleGenerateCodeClick = async () => {
const language = document.getElementById('language').value;
const questionText = document.getElementById('textbox1').value;
let responseData = await fetchAIResponse(language, questionText);
if (responseData?.status == 'success') {
console.log(responseData);
} else {
console.log('Error');
}
};
This code snippet sends a request to an AI service by calling the fetchAIResponse()
function with the language
and questionText
parameters. It then waits for the response using the await
keyword.
If the responseData
object exists and its status
property is equal to 'success'
, the code block inside the if
statement is executed. In this case, the code logs the responseData
object to the console using console.log()
. This is useful for debugging and inspecting the response data received from the AI service.
If the responseData
object does not meet the success condition, meaning the API call was not successful, the code block inside the else
statement is executed. In this case, the code simply logs the string 'Error'
to the console.
We also need to Print this code into the code-editor
that we have created earlier. You need to update the handleGenerateCodeClick
function as follows:
We first need to import the useState
hook from react
. The useState
hook is a function that allows you to create state variables inside a React component. It accepts an initial value as an argument and returns an array containing the state variable and a function to update the state variable. We will use the useState()
hook to create a state variable called generatedCode
and a function called setGeneratedCode()
to update the state variable.
import React, { useState } from 'react';
const [generatedCode, setGeneratedCode] = useState('');
const [selectedLanguage,setSelectedLanguage] = useState('');
const handleGenerateCodeClick = async () => {
const language = document.getElementById('language').value;
const questionText = document.getElementById('textbox1').value;
let responseData = await fetchAIResponse(language, questionText);
if (responseData?.status == 'success') {
let responseCode = responseData?.content || '';
if (responseCode.includes('```')) {
responseCode = responseCode.split('```')[1];
setGeneratedCode(responseCode);
} else {
setGeneratedCode(`${responseCode}`);
}
} else {
setGeneratedCode('Sorry, we could not generate code for your question. Please try again.');
}
};
We have updated the handleGenerateCodeClick
function to set the generatedCode
state
variable to the code generated by the AI service. We have also updated the
handleGenerateCodeClick
function to set the selectedLanguage
state variable to the
language selected by the user. We are passing these variables to the code-editor
component
as props.
The code-editor
component will be updated to accept these props and display the generated
code in the editor. Update the code-editor
component as follows:
<div className="edit">
<Editor
height="400px"
language={selectedLanguage}
theme="vs-dark"
defaultValue="// Generated code will appear here"
defaultLanguage="javascript"
value={setGeneratedCode}
options={{
readOnly: true,
wordWrap: "wordWrapRow", // Enable word wrapping at a specific column
wordWrapRow: 10,
}}
/>
<br />
</div>
We have updated the code-editor
component to accept the selectedLanguage
and
generatedCode
props. We have also updated the code-editor
component to display the
generated code in the editor.
Now we can add the Loading indicator to the Generate Code
button. This will help the user
know that the code is being generated. Update the handleGenerateCodeClick
function as follows:
const [generatedCode, setGeneratedCode] = useState('');
const [selectedLanguage,setSelectedLanguage] = useState('');
const [loading, setLoading] = useState(false);
const handleGenerateCodeClick = async () => {
const language = document.getElementById('language').value;
const questionText = document.getElementById('textbox1').value;
setLoading(true);
setSelectedLanguage(language)
let responseData = await fetchAIResponse(language, questionText);
if (responseData?.status == 'success') {
let responseCode = responseData?.content || '';
if (responseCode.includes('```')) {
responseCode = responseCode.split('```')[1];
setGeneratedCode(responseCode);
setLoading(false);
} else {
setGeneratedCode(`${responseCode}`);
setLoading(false);
}
} else {
setGeneratedCode('Sorry, we could not generate code for your question. Please try again.');
setLoading(false);
}
};
We have updated the handleGenerateCodeClick
function to set the loading
state variable
to true
when the user clicks on the Generate Code
button. We have also updated the
handleGenerateCodeClick
function to set the loading
state variable to false
when
the code is generated or an error occurs.
We have also updated the Generate Code
button to display the Loading indicator when the
loading
state variable is true
. Update the Generate Code
button as follows:
<button id="generateButton" className="mx-auto text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-xl px-5 py-2.5 text-center mr-2 mb-2" onClick={handleGenerateCodeClick}>
{loading ? `Writing your Code ....` : 'Generate Code'}
</button>
We have updated the Generate Code
button to display the Loading indicator (Writing your Code ....
) when the
loading
state variable is true
. We have also updated the Generate Code
button to
display the Generate Code
text when the loading
state variable is false
Congratulations!
Congratulations! You have successfully completed the project. You can now test the project by
refreshing the page or by rerunning npm run dev
button in the top right corner of the page. You
can
also share the
project with your friends and family to showcase your skills and accomplishments.
You can go ahead and deploy the project on Vercel or Netlify. However, you will need to create an account on these platforms to deploy the project. You can also deploy the project on GitHub Pages for free.
After completing the project, you can submit it to the WorqHat team
for review. We’ll provide you
with feedback and suggestions to help you improve your project. You can also share your project on
social media to showcase your skills and accomplishments. After the project is reviewed, you’ll
receive a certificate of completion from WorqHat. You can add this certificate to your portfolio to
demonstrate your skills and knowledge to potential employers. To submit your project, please follow
the steps provided in the Project Submission section below.
Reference Code
You can also find the code on GitHub.
Github Repository
You can use this GitHub repository as a reference to check your code against the reference code.
Project Submission
Once you’ve completed the project, you can submit it to the WorqHat team for review. We’ll provide you with feedback and suggestions to help you improve your project. You can also share your project on social media to showcase your skills and accomplishments.
After the project is reviewed, you’ll receive a certificate of completion from WorqHat. You can add this certificate to your portfolio to demonstrate your skills and knowledge to potential employers.
To submit your project, please follow the steps below:
- Create a GitHub repository for your project.
- Upload your project files to the repository.
- Add a
worqhat.json
file to the root of the repository that includes the following information:
{
"name": "Your Name",
"deploymentUrl": "Your Project Deployment URL (If Deployed to Vercel)",
"authorEmail": "Your Email",
"repository": "Your Project Repository",
"feedback": "Your Feedback",
"tags": [
"Your Project Tags"
]
}
-
Use the link to submit your GitHub repository to the WorqHat team for review. Visit the WorqHat Submission Page to submit your project.
-
Once your project is certified, you will receive a certification badge that you can add to your project’s README.md file and to your resume’s and LinkedIn profile’s certifications.
Project Feedback
We’d love to hear your feedback on the project. Please take a moment to fill out the feedback in
the worqhat.json
file. You can also DM us your Feedbacks on the #feedbacks
channel on
discord WorqHat’s Discord community or via email to support@worqhat.com. Your feedback will
help us improve the project and make it more enjoyable for future learners.
Do stay connected with us on our Social Channels, and we will keep you updated with our latest projects and courses.
Was this page helpful?