Building 5 Simple Apps using LlamaCoder

Coding has been a challenge for people without a technical background for a long time. However, Generative AI is changing that. With the advent of GenAI tools, the gap between the coding world and non-tech individuals is shrinking every day. These tools not only give non-technical users the opportunity to experiment with building basic code functions but also simplify the coding process for developers.

LlamaCoder by Together AI is one such tool. It allows users to create impressive applications with just a few clicks by using simple prompts. In this article, I’ll demonstrate how to use LlamaCoder to build 5 simple applications. 

Let’s get started!

What is LlamaCoder?

Together AI –  leading AI acceleration cloud, empowers developers and businesses to seamlessly design, develop, and manage their entire generative AI lifecycle using open-source models like Llama. To inspire developers working with Llama, Together AI built LlamaCoder—an open-source web app that enables users to generate an entire app from a prompt using Llama 3.1 405B.

In just over a month since its release, LlamaCoder has become a success, gaining more than 2,000 GitHub stars, with hundreds of developers cloning the repository. Over 200,000 apps have already been generated using LlamaCoder. Users are creating quiz apps, pomodoro timers, budgeting tools, and more, all through simple prompting, showcasing the power of Llama 3.1 405B.

Tech Stack

• Llama 3.1 405B from Meta for the LLM
• Together AI for LLM inference
• Sandpack for the code sandbox
• Next.js app router with Tailwind
• Helicone for observability
• Plausible for website analytics

LlamaCoder Examples 

Llama 3.1 405B was the first open-source model to excel in specific coding use cases, showcasing its capabilities through several successful applications. Together AI has built example apps using Llama 3.1, including:

• LlamaTutor: An app designed to aid learning through interactive prompts.
• TurboSeek: An AI-powered search engine that enhances information retrieval.

These examples demonstrate how Llama models have pushed the boundaries of open-source large language models (LLMs). Llama models rival the performance of top closed-source models while integrating safety tools to ensure responsible development.

How to Use LlamaCoder?

• Visit the Website: Go to the LlamaCoder App build. 
• Describe Your App: Start by sharing the details of what your app should do and the features you want. Provide a simple prompt outlining the functionality you envision.
• Choosing the Moder: LlamaCoder offers a range of models, including the Llama 3.1 45B and 70B models. Among these, the 45B model is recommended due to its optimal performance. 
• Generate Code: LlamaCoder’s advanced AI will automatically generate a complete React codebase based on your input, giving you a functional foundation to work with.
• Refine and Iterate: Review the generated code and make any necessary adjustments or tweaks. You can refine the code to fit your exact requirements.
• Build and Deploy: Once you’re satisfied with the code, build and deploy your fully functional application, bringing your vision to life with minimal effort.

Now, let’s try using LlamaCoder for building 5 simple apps!

Tic Tac Toe

Prompt: Create a tic tac toe game. Use different colors for player o and x.

Generated Code 

{
  "dependencies": {
    "react": "^18.0.0", 
    "react-dom": "^18.0.0", 
    "react-scripts": "^4.0.0", 
    "lucide-react": "latest", 
    "recharts": "2.9.0", 
    "react-router-dom": "latest", 
    "@radix-ui/react-accordion": "^1.2.0", 
    "@radix-ui/react-alert-dialog": "^1.1.1", 
    "@radix-ui/react-aspect-ratio": "^1.1.0", 
    "@radix-ui/react-avatar": "^1.1.0", 
    "@radix-ui/react-checkbox": "^1.1.1", 
    "@radix-ui/react-collapsible": "^1.1.0", 
    "@radix-ui/react-dialog": "^1.1.1", 
    "@radix-ui/react-dropdown-menu": "^2.1.1", 
    "@radix-ui/react-hover-card": "^1.1.1", 
    "@radix-ui/react-label": "^2.1.0", 
    "@radix-ui/react-menubar": "^1.1.1", 
    "@radix-ui/react-navigation-menu": "^1.2.0", 
    "@radix-ui/react-popover": "^1.1.1", 
    "@radix-ui/react-progress": "^1.1.0", 
    "@radix-ui/react-radio-group": "^1.2.0", 
    "@radix-ui/react-select": "^2.1.1", 
    "@radix-ui/react-separator": "^1.1.0", 
    "@radix-ui/react-slider": "^1.2.0", 
    "@radix-ui/react-slot": "^1.1.0", 
    "@radix-ui/react-switch": "^1.1.0", 
    "@radix-ui/react-tabs": "^1.1.0", 
    "@radix-ui/react-toast": "^1.2.1", 
    "@radix-ui/react-toggle": "^1.1.0", 
    "@radix-ui/react-toggle-group": "^1.1.0", 
    "@radix-ui/react-tooltip": "^1.1.2", 
    "class-variance-authority": "^0.7.0", 
    "clsx": "^2.1.1", 
    "date-fns": "^3.6.0", 
    "embla-carousel-react": "^8.1.8", 
    "react-day-picker": "^8.10.1", 
    "tailwind-merge": "^2.4.0", 
    "tailwindcss-animate": "^1.0.7", 
    "vaul": "^0.9.1"
  },
  "devDependencies": {
    "@types/react": "^18.0.0", 
    "@types/react-dom": "^18.0.0", 
    "typescript": "^4.0.0"
  },
  "main": "/index.tsx"
}

App Preview

Published App | View and Run Code

Sudoku 

Prompt: Create a basic Sudoku app where users can fill in a 6×6 grid with numbers from 1 to 6. The app should check if the numbers are correctly placed according to the rules of Sudoku. Add a reset button.

Generated Code

import React, { useState, Fragment } from 'react';

interface Board {
  value: number | null;
  isEditable: boolean;
}

const App = () => {
  const [board, setBoard] = useState<Board[][]>([
    [{ value: 5, isEditable: false }, { value: null, isEditable: true }, { value: null, isEditable: true }, { value: null, isEditable: true }, { value: 1, isEditable: false }, { value: null, isEditable: true }],
    [{ value: null, isEditable: true }, { value: null, isEditable: true }, { value: null, isEditable: true }, { value: 6, isEditable: false }, { value: 2, isEditable: false }, { value: 3, isEditable: false }],
    [{ value: null, isEditable: true }, { value: 3, isEditable: false }, { value: null, isEditable: true }, { value: null, isEditable: true }, { value: null, isEditable: true }, { value: null, isEditable: true }],
    [{ value: 4, isEditable: false }, { value: 2, isEditable: false }, { value: null, isEditable: true }, { value: null, isEditable: true }, { value: null, isEditable: true }, { value: null, isEditable: true }],
    [{ value: null, isEditable: true }, { value: null, isEditable: true }, { value: null, isEditable: true }, { value: 5, isEditable: false }, { value: null, isEditable: true }, { value: 6, isEditable: false }],
    [{ value: null, isEditable: true }, { value: null, isEditable: true }, { value: 6, isEditable: false }, { value: 3, isEditable: false }, { value: null, isEditable: true }, { value: null, isEditable: true }],
  ]);

  const handleInputChange = (rowIndex: number, colIndex: number, value: string) => {
    const newBoard = [...board];
    const newRow = [...newBoard[rowIndex]];
    newRow[colIndex] = { value: value === '' ? null : parseInt(value), isEditable: true };
    newBoard[rowIndex] = newRow;
    setBoard(newBoard);
  };

  return (
    <div className="max-w-md mx-auto p-4">
      <h1 className="text-3xl font-bold mb-4">Sudoku App</h1>
      <div className="grid grid-cols-6 gap-1 mb-4">
        {board.map((row, rowIndex) => (
          <Fragment key={rowIndex}>
            {row.map((cell, colIndex) => (
              <div key={colIndex} className="w-12 h-12 border border-gray-400 flex items-center justify-center">
                {cell.isEditable ? (
                  <input
                    type="number"
                    min="1"
                    max="6"
                    value={cell.value === null ? '' : cell.value}
                    onChange={(e) => handleInputChange(rowIndex, colIndex, e.target.value)}
                    className="w-full h-full text-center"
                  />
                ) : (
                  <span className="text-lg">{cell.value}</span>
                )}
              </div>
            ))}
          </Fragment>
        ))}
      </div>
    </div>
  );
};

export default App;

App Preview

Published App | View and Run Code

Flames Game

Prompt: Build a Flames Game with a button to calculate flames.

Generated Code 

{
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "^4.0.0",
    "lucide-react": "latest",
    "recharts": "2.9.0",
    "react-router-dom": "latest",
    "@radix-ui/react-accordion": "^1.2.0",
    "@radix-ui/react-alert-dialog": "^1.1.1",
    "@radix-ui/react-aspect-ratio": "^1.1.0",
    "@radix-ui/react-avatar": "^1.1.0",
    "@radix-ui/react-checkbox": "^1.1.1",
    "@radix-ui/react-collapsible": "^1.1.0",
    "@radix-ui/react-dialog": "^1.1.1",
    "@radix-ui/react-dropdown-menu": "^2.1.1",
    "@radix-ui/react-hover-card": "^1.1.1",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-menubar": "^1.1.1",
    "@radix-ui/react-navigation-menu": "^1.2.0",
    "@radix-ui/react-popover": "^1.1.1",
    "@radix-ui/react-progress": "^1.1.0",
    "@radix-ui/react-radio-group": "^1.2.0",
    "@radix-ui/react-select": "^2.1.1",
    "@radix-ui/react-separator": "^1.1.0",
    "@radix-ui/react-slider": "^1.2.0",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-switch": "^1.1.0",
    "@radix-ui/react-tabs": "^1.1.0",
    "@radix-ui/react-toast": "^1.2.1",
    "@radix-ui/react-toggle": "^1.1.0",
    "@radix-ui/react-toggle-group": "^1.1.0",
    "@radix-ui/react-tooltip": "^1.1.2",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "date-fns": "^3.6.0",
    "embla-carousel-react": "^8.1.8",
    "react-day-picker": "^8.10.1",
    "tailwind-merge": "^2.4.0",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.1"
  },
  "devDependencies": {
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "typescript": "^4.0.0"
  },
  "main": "/index.tsx"
}

App Preview

Published App | Run and View Code

Quiz 

Prompt: Create a 10 questions quiz on the food chain. 

Generated Code 

{
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "^4.0.0",
    "lucide-react": "latest",
    "recharts": "2.9.0",
    "react-router-dom": "latest",
    "@radix-ui/react-accordion": "^1.2.0",
    "@radix-ui/react-alert-dialog": "^1.1.1",
    "@radix-ui/react-aspect-ratio": "^1.1.0",
    "@radix-ui/react-avatar": "^1.1.0",
    "@radix-ui/react-checkbox": "^1.1.1",
    "@radix-ui/react-collapsible": "^1.1.0",
    "@radix-ui/react-dialog": "^1.1.1",
    "@radix-ui/react-dropdown-menu": "^2.1.1",
    "@radix-ui/react-hover-card": "^1.1.1",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-menubar": "^1.1.1",
    "@radix-ui/react-navigation-menu": "^1.2.0",
    "@radix-ui/react-popover": "^1.1.1",
    "@radix-ui/react-progress": "^1.1.0",
    "@radix-ui/react-radio-group": "^1.2.0",
    "@radix-ui/react-select": "^2.1.1",
    "@radix-ui/react-separator": "^1.1.0",
    "@radix-ui/react-slider": "^1.2.0",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-switch": "^1.1.0",
    "@radix-ui/react-tabs": "^1.1.0",
    "@radix-ui/react-toast": "^1.2.1",
    "@radix-ui/react-toggle": "^1.1.0",
    "@radix-ui/react-toggle-group": "^1.1.0",
    "@radix-ui/react-tooltip": "^1.1.2",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "date-fns": "^3.6.0",
    "embla-carousel-react": "^8.1.8",
    "react-day-picker": "^8.10.1",
    "tailwind-merge": "^2.4.0",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.1"
  },
  "devDependencies": {
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "typescript": "^4.0.0"
  },
  "main": "/index.tsx"
}

App Preview

Published App | View and Run Code

Minesweeper

Prompt: Create a minesweeper game.

Generated Code 

{
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "^4.0.0",
    "lucide-react": "latest",
    "recharts": "2.9.0",
    "react-router-dom": "latest",
    "@radix-ui/react-accordion": "^1.2.0",
    "@radix-ui/react-alert-dialog": "^1.1.1",
    "@radix-ui/react-aspect-ratio": "^1.1.0",
    "@radix-ui/react-avatar": "^1.1.0",
    "@radix-ui/react-checkbox": "^1.1.1",
    "@radix-ui/react-collapsible": "^1.1.0",
    "@radix-ui/react-dialog": "^1.1.1",
    "@radix-ui/react-dropdown-menu": "^2.1.1",
    "@radix-ui/react-hover-card": "^1.1.1",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-menubar": "^1.1.1",
    "@radix-ui/react-navigation-menu": "^1.2.0",
    "@radix-ui/react-popover": "^1.1.1",
    "@radix-ui/react-progress": "^1.1.0",
    "@radix-ui/react-radio-group": "^1.2.0",
    "@radix-ui/react-select": "^2.1.1",
    "@radix-ui/react-separator": "^1.1.0",
    "@radix-ui/react-slider": "^1.2.0",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-switch": "^1.1.0",
    "@radix-ui/react-tabs": "^1.1.0",
    "@radix-ui/react-toast": "^1.2.1",
    "@radix-ui/react-toggle": "^1.1.0",
    "@radix-ui/react-toggle-group": "^1.1.0",
    "@radix-ui/react-tooltip": "^1.1.2",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "date-fns": "^3.6.0",
    "embla-carousel-react": "^8.1.8",
    "react-day-picker": "^8.10.1",
    "tailwind-merge": "^2.4.0",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.1"
  },
  "devDependencies": {
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "typescript": "^4.0.0"
  },
  "main": "/index.tsx"
}

App Preview

Published App | View and Run the Code

How to Host LlamaCoder Locally? 

If you prefer to run LlamaCoder locally instead of using the hosted version, follow these steps:

• Clone the LlamaCoder repository to your computer.Open the cloned folder and create an .env file.
• Add your Together AI API key to the .env file. You can create yout account here.
• You can get this key by signing up on the Together AI website, which includes 5 free credits.
• Save the .env file and return to the terminal.
• Run npm install to install the necessary dependencies.
• Start the application with npm run dev.

Use the following code for API call:

from together import Together

client = Together()

completion = client.chat.completions.create(
  model="meta-llama/Meta-Llama-3.1-8B-Instruct-Turbo",
  messages=[{"role": "user", "content": "What are the top 3 things to do in New York?"}],
)

Start the application with npm run dev.

Also Read: 12 Best AI Code Generators You Should Try

End Note

LlamaCoder is revolutionizing the way both developers and non-technical users approach app development.The rise of open-source AI tools like LlamaCoder allows for faster innovation, empowering developers with full control over their data and models while fostering creativity. 

Whether hosted locally or via the Together AI platform, LlamaCoder provides an accessible way for anyone to bring their app ideas to life. This tool showcases how generative AI is transforming the future of coding, empowering users to move from concept to deployment with ease.

Ready to see what LlamaCoder can do? Try it out and share your app link in the comments below!

For more such informative content on Generative AI, stay tuned to Analytics Vidhya Blogs!