Translate SQL with AI 🚀

This repository is the solution to #boraCodar um app de tradução de SQL com IA by Rocketseat.

The objective of this project was the development of a SQL translation app, capable of receiving a schema and responding with queries to questions asked in natural language through artificial intelligence. During development it was possible to develop some additional features.

Design

This Front-end project was developed based on the design proposed in Figma.

Technologies

This project was developed using Vite + ReactJS and OpenAI API.

• Vite ReactJS
• Open AI API

The project dependencies were:

"dependencies": {
    "@phosphor-icons/react": "^2.0.10",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-toastify": "^8.1.0",
    "styled-components": "^6.0.7",
    "react-copy-to-clipboard": "^5.1.0",
    "openai": "^3.3.0"
}

Config Project

Before running the project, create an .env file and fill in your API_KEY and OPEN_AI_ORGANIZATION obtained from the OpenAI API platform. You must register and create a key through the platform.

VITE_API_KEY=...
VITE_OPEN_AI_ORGANIZATION=...

Run Project

With .env file configured, run the installation of dependencies with:

npm i

Run the exe project using the command:

npm run dev

😝 Enjoy!!

What I Learned with This Project?

OpenAI API

I learned how to use Open AI resources in the project using the OpenAI Node.js Library npm package. With that package and with the settings in the OpenAI API account I was able to develop calls to the AI model.

// src/services/api.js
import { Configuration, OpenAIApi } from 'openai'

const configuration = new Configuration({
    apiKey: import.meta.env.VITE_API_KEY,
    organization: import.meta.env.VITE_OPEN_AI_ORGANIZATION
})

delete configuration.baseOptions.headers['User-Agent'];

const api = new OpenAIApi(configuration)

export default api

Environment Variables Vite

With this project I also learned how to configure Vite to have environment variables. As well as integrating into my project.

// .env
VITE_API_KEY=...
VITE_OPEN_AI_ORGANIZATION=...

// src/services/api.js
...
import.meta.env.VITE_API_KEY
import.meta.env.VITE_OPEN_AI_ORGANIZATION
...

React-Toastify

For alert messages, I learned to use React Toastify, a very versatile npm package for nice alterta messages.

// src/components/section/index.jsx
<CopyToClipboard text={response}
    onCopy={handleCopy}>
    <S.LogoImg
        src={copyIcon} 
        alt="copiar"
    />
</CopyToClipboard>

Context and Providers React

I also used a bit of context in the project to share variables between components.

// src/providers/openai-provider.jsx
export const OpenAIContext = createContext({
    loading: false,
    message: ""
})

Acknowledgment

Thanks to Rocketseat for this challenge and initiatives it provides.🚀