Getting Started

Aeflow is a cloud-based application framework with expressive, elegant syntax to build Native LLM(Large Language Model) applications using HTML, Javascript & CSS. You can create highly customized niche applications for your personal or business use. It comes with a fullstack application framework that you can instantiate with just a single line of code.

Let's get started with an example. Imagine we will create an application that will generate a SWOT analysis. The idea is a user will input a business scenario, and the system will generate a SWOT analysis using AI.

First, we will build the application in the built-in Code editor playground and then export it to an app.

Playground

The playground is a built-in code editor. You can write codes to build the application and test it directly on the same window.

Launch the playground , paste the code, and click 'Run.'

            <h1 class="mb-3">SWOT Analysis Generator</h1>

            <div class="input-group">
                <input type="text" class="form-control" id="businessDetailInput"
                       placeholder="Enter short business details...">
                <button class="btn btn-dark" type="button" id="generateButton">Generate</button>
            </div>


            <div id="swotAnalysisContainer" class="my-4"></div>

            <script>

                useApp((app) => {
                    const swotAnalysisContainer = document.getElementById('swotAnalysisContainer');
                    const businessDetailInput = document.getElementById('businessDetailInput');
                    const generateButton = document.getElementById('generateButton');
                    const spinner = app.ui.button.createSpinner(generateButton);
                    const swotPromptTemplate = `Create a concise SWOT analysis for the given business scenario, "{businessDetail}" and format it in markdown.`;

                    const chat = new app.Chat();
                    const memory = new app.Memory();

                    generateButton.addEventListener('click', () => {
                        if (!businessDetailInput.value) {
                            app.ui.notification.error('Please enter your business details.');
                            return;
                        }

                        spinner.start();

                        let prompt = app.formatPrompt(swotPromptTemplate, {
                            businessDetail: businessDetailInput.value
                        });

                        chat.setModel('gpt-3.5-turbo');
                        chat.setTemperature(0.9);
                        chat.addMessage('user', prompt);

                        chat.send().then((response) => {
                            spinner.stop();
                            swotAnalysisContainer.innerHTML = app.markdown.convertToHtml(response.data.text);
                            memory.setOrUpdate('swotAnalysis', response.data.text);
                        });

                    });
                });

            </script>

If you run this code, it will show an Input box where you will enter your business details. Once entered, the code will process the text using LLM and provide you with a response. Then you display this answer on the screen.

Now let's break down the code. The first part is pure HTML. It supports the latest Bootstrap framework code. That means you can use HTML to build the UI. In the next part, we used a function named 'useApp' and passed an anonymous function with the argument 'app'. Now the app has all the magic you will need to build powerful LLM apps.

            <script>
                useApp((app) => {
                    // your code here
                });
            </script>