Qwen3 CLI 2K Request Per Day (it's FREE)

Hello guys. Today we're going to test the Quen 3 CLI. I've opened the official Quen CLI GitHub page and this tool is seriously powerful. Quen code is built for the Quen 3 coder models and boosts your whole development workflow with code understanding automation and even vision features. And the best part, Quen O gives you 2,000 free requests per day and 60 requests per minute. And using npm we can install Quen code. Once it's installed just run the version command to check the installed version. If you have an open AI key or an open router key you can use those as well. On open router the Quen 3 models are available and the free plan gives you 50 requests per day. Gro also provides Quen 3 models and they offer a,000 free requests per day which is awesome. If you want to know more about Gro, I have a separate video you can check out. I'm going with Quen off so I can access 2,000 requests per day. I'm using the Quen 3 model in my next JS project. I'm not doing simple demos like a to-do app or a chessboard. I'm going straight into building a full stack AI application. I've already set up the initial project and the app is running now on port 3000. From the project's terminal itself, I'm going to start the Quen CLI. The CLI is now running and it's showing some getting started tips. For example, if you want details about the Quen CLI, just type /help in the terminal. It will show basic instructions like using the at sign to specify files and the exclamation mark to run shell commands. Next, you can see all the available commands in the CLI, and each one comes with a short explanation. For example, the /copy command lets you copy the last result or code snippet. Using the MCP command, you can view all the configured MCP tools. There are also keyboard shortcuts. For example, pressingtrl + l clears the screen. I'll press it now, and you can see everything is cleared. Next, I'm going to type /model. It shows two options and both are Quen 3 models. One is the coder model and the other is the vision model. I'm going to use the default coder model. Next, you can see the third tip. This one is very useful. You can create a quen file to customize how you interact with Quen. Normally, you can run the /init command and it will analyze your project and generate the Quen. MD file automatically. But in my case, this is just a hello world project. So I'll create the file manually and add the project details myself. This is my app idea, an AI powered expense app. It has an expense extraction feature where the user can upload any bill or receipt and the AI will automatically extract the details and store them in the app. I've listed the fields I want to extract along with their categories. I'm using the Gemini models for this because they offer good free limits. I've also added the main features. Image upload with drag and drop extraction using the Gemini 2.5 flash model, manual entry support, an expense table to view everything, a responsive app design, and finally a delete expense option. After that, I mentioned the frameworks I'm using. I'm building this with Nex.js16 JS16 and the app router and I'm using JavaScript and JSX files only. This project is fully JavaScript, no TypeScript, no extra complexity. I'm using PNPM as the package manager because the caching makes development faster. And for styling, I'm using Tailwind CSS, my all-time favorite. Honestly, without Tailwind, I can't build anything. And I also mentioned my environment key for Gemini and I clearly said it should only be used on the server side. That's because exposing it on the client side can leak the key and let anyone misuse my key. Finally, I listed the component names I want. So Quen will generate those components first. Now I'll open the Quen CLI and use this markdown file to set up the project. Quen will read the project details and instructions and based on that it will generate version one of our app. First it starts creating the necessary components based on the markdown file. Now it's asking for shell command permission to create a directory. Just select allow once or always. Once you give permission, it creates the blank components folder. After that, it generates the upload receipt component we mentioned in the instruction file. The more detail you provide to Quen in the Markdown file, the better the results. Not just here, but with any AI. Next, it generates the other two components one by one. And you can see the component code directly in the terminal. It added all the components to the main page file. So, the basic structure of the app is already set. Next, it's going to install the Gemini package. And you can see it's using PNPM correctly. After that, it sets up the Gemini API route for extraction. Here's the code for that route. It's using the Gemini 2.5 flash model exactly as we specified. If you don't specify the model, Quen will return an invalid model name. The fields are also included in the prompt. So now all our tasks are completed and it's time to test the app. Before testing, we need to add the Gemini API key to the ENV file. For that, I opened the Google AI Studio API key page. I've already created a key, so I'm just copying and pasting it. After adding the key, make sure your app is running. Unfortunately, the UI doesn't look great right now, but that's fine. We can fix that later. First, we need to check the app's functionality. That is important. So, I'll upload a food bill receipt and submit it. You can see the extraction is working which means Gemini is integrated correctly. The data is also extracted properly. Here you can see the bill. It picked the correct vendor name and it detected the receipt type as food because this bill is for buying bananas for $25. Next, we'll check the manual entry flow. I'll enter some random values in each field and submit the data. You can see this is working too, which means we've achieved the core functionality. For the UI improvements, I'm going to use this prompt. I clearly mentioned that the UI isn't good, so I asked it to improve the UI with a better dark theme with some gradients. You can see it's improving the UI now. First, it makes changes in the global CSS file. This will take a minute, so I'll pause the video. And now it's done. The updated UI looks much better, and I really like the font it used. Let's recheck the functionality. I'm hoping nothing broke during the UI changes. Nice. Everything is working just like before, but the data isn't stored anywhere yet. Since we're building a full stack app, I'm going to use a real database next. So, I opened the Neon website. In my previous video, I used Superbase, so this time I thought I'd use Neon instead. Here I'll create a new project with a specific name. After that I'll click the connect button. In the popup you can see the connection string for our database. Now open a new tab and type neon next.js. Click the first link you get. They actually provide a pre-built prompt for connecting Neon with Nex.js. It's super easy. Just copy the prompt and use it. Awesome. I'm going to paste the prompt so we can see how it works. You can see it's giving three integration options because the prompt itself includes option A, option B, and option C. Quen understood that and showed the same options. I'll choose the first one, serverless, which is the recommended option. For confirmation, just type number one. It will automatically take that option and start working. Now, it's installing the necessary packages for the serverless database connection. Next, it added a placeholder database URL. So we need to replace it with the real one we got. After waiting a couple of minutes, the setup is done. Here you can see the AI created a new navbar. If you click this menu, it redirects to an API route that returns the current Postgressql version we are connected to. That means our database is connected. Now I'll open the DB test page. Here you can see it shows the database version visually. They also provide the next step to test the database connection. I'll open the action page. Now you can see a form input that stores a comment into the neon table. I'll type some text and submit it. And it gets stored in the neon database. Now I'll open the neon tables. You can see the table and the data we just added. That means the database connection works. The prompt we used gave a great result and testing it was super easy. But our app needs to store the expense data in the database. So I'm opening Quen again to store the expense data just like we stored the comments. After a minute, the setup completed. Before testing the app, we need to finish a few environment steps. I already added the database connection key. So that part is done. Next, we need to run the migration script. For that, we just run the node migrate.js. js file. The expense table was created successfully. Now I'm going to test the app. First, I'll add a manual entry. It's working fine. Next, I'll upload a bill and submit it. This is also working and the expense is stored in our table. To cross check, I'll open the neon tables. After refreshing, you can see our data stored successfully. Awesome. And just like this, you can add other table connections, too. Thanks for watching. If you liked this video, don't forget to share, subscribe, and drop a like to give this video some hype.