Building a NL2Typescript using Lyzr SDK
Tags: ai, typescript, streamlit, python
Published: 2024-07-01 17:27:41

In the rapidly evolving world of software development, bridging the gap between human language and programming syntax is a sought-after goal. Imagine if you could simply describe what you want in plain English, and have it transformed into functional **TypeScript** code.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/77n00r9u93e5w3oys2qp.png)

**NL2TypeScript** is an innovative web application that leverages advanced AI models to translate **natural language prompts** into precise, efficient **TypeScript code**. Whether you’re a seasoned developer looking to save time or a beginner trying to learn TypeScript, NL2TypeScript is here to help you convert your ideas into working code effortlessly.

**Why use Lyzr SDK’s?**

With **Lyzr** SDKs, crafting your own **GenAI** application is a breeze, requiring only a few lines of code to get up and running swiftly.

[Checkout the Lyzr SDK’s](https://docs.lyzr.ai/introduction)

**Lets get Started!**

Create an **app.py** file

```
import streamlit as st
from lyzr_automata.ai_models.openai import OpenAIModel
from lyzr_automata import Agent, Task
from lyzr_automata.pipelines.linear_sync_pipeline import LinearSyncPipeline
from PIL import Image
from lyzr_automata.tasks.task_literals import InputType, OutputType
import os
```
This code creates a **Streamlit** app using the **Lyzr Automata** SDK and OpenAI’s language model to build a diet assistant tool. It imports necessary libraries for the web interface, AI model, and image handling. The **OpenAI API key** is set from Streamlit secrets. The app hides the default header, displays a logo, and provides a text input for users to log their food intake. An OpenAIModel instance is configured with specific parameters. The generation function defines an AI agent to analyze the user's input and provide nutritional insights.

```
# Set the OpenAI API key
os.environ["OPENAI_API_KEY"] = st.secrets["apikey"]
```
This line sets the **OpenAI API key** as an environment variable, retrieving it securely from Streamlit’s secrets for authentication.

```
st.markdown("Welcome to NL2TypeScript! Translate natural language prompts into accurate TypeScript queries effortlessly. ")
input = st.text_input("Please enter your natural language prompt:",placeholder=f"""Type here""")
```
This code snippet creates a simple **Streamlit** web application for translating natural language prompts into TypeScript queries. Then, it creates a text input field using **st.text_input** where users can enter their **natural language prompt**, with "Type here" as the placeholder text to guide them. The user's input is stored in the variable input.

```
open_ai_text_completion_model = OpenAIModel(
    api_key=st.secrets["apikey"],
    parameters={
        "model": "gpt-4-turbo-preview",
        "temperature": 0.2,
        "max_tokens": 1500,
    },
)
```
This code instantiates an **OpenAIModel** object from the lyzr_automata package, configuring it to use the GPT-4 language model with specific parameters. It securely retrieves the **API key** from Streamlit's secrets for authentication.


```
def generation(input):
    generator_agent = Agent(
        role=" Expert TYPESCRIPT DEVELOPER",
        prompt_persona=f" Your task is to TRANSLATE natural language prompts into EFFICIENT and CONTEXTUALLY ACCURATE TypeScript code.")
    prompt = f"""
[Prompts Here]
 """
```
This function generation(input) sets up a text generation task using the Agent class from the lyzr_automata package. It initializes **generator_agent** with a role specified as "Expert TYPESCRIPT DEVELOPER" and a prompt persona instructing it to translate natural language prompts into efficient and contextually accurate TypeScript code. The prompt variable is formatted to include the user's input as the prompt for generating **TypeScript** code, facilitating the subsequent processing and generation steps within the function.

```

    generator_agent_task = Task(
        name="Generation",
        model=open_ai_text_completion_model,
        agent=generator_agent,
        instructions=prompt,
        default_input=input,
        output_type=OutputType.TEXT,
        input_type=InputType.TEXT,
    ).execute()

    return generator_agent_task
```
This code snippet creates a task instance named “Generation” using the **Lyzr Automata** package’s Task class. It specifies parameters such as the model (open_ai_text_completion_model), agent (generator_agent), instructions (the prompt defined earlier), default input (user input), and output/input types. The execute() method is called to execute the task, and the result is returned.

```

if st.button("Convert"):
    solution = generation(input)
    st.markdown(solution)
```
This piece of code creates a button using Streamlit’s st.button() function. When the button labeled "Convert" is clicked, it triggers the **generation()** function, passing the user input (input) as an argument. The result of the function execution is stored in the solution variable, which is then displayed using Streamlit's **st.markdown()** function.

**App link**: https://nl2typescript-lyzr.streamlit.app/

**Source Code**: https://github.com/isakshay007/NL2TypeScript

The **NL2TypeScript** is powered by the Lyzr Automata Agent, utilizing the capabilities of OpenAI’s GPT-4 Turbo. For any inquiries or issues, please contact Lyzr. You can learn more about Lyzr and their offerings through the following links:

**Website**: [Lyzr.ai](https://www.lyzr.ai/)
**Book a Demo**: [Book a Demo](https://www.lyzr.ai/book-demo/)
**Discord**: [Join our Discord community](https://discord.com/invite/nm7zSyEFA2)
**Slack**: [Join our Slack channel](https://anybodycanai.slack.com/join/shared_invite/zt-2a7fr38f7-_QDOY1W1WSlSiYNAEncLGw#/shared-invite/email)