Table of Contents
An integrated development environment to speed up front-end development.
A user can view their development server through the development environment to gain access to features.
Clone the project to your desired folder with:
git clone https://github.com/kael558/SmartyPantsUI.git
Download the 4 langflows and populate the API keys/applications secrets.
These are now an API that you can call from your local machine.
Navigate to the templates folder and open 'my-app' for a good first example.
Make sure to run npm i and then npm start to spin up the local development server.
Navigate back to the root of the project.
Do the same and run npm i and then npm start
Copy your path from the Local Development Server and paste it in the project_dir, so that the environment knows where the files are.
By this point you should have:
- Langflow running with 4 langflow endpoints
- A local development server running the React starter template
- The development environment
The current main features in the Development Environment are:
- Clicking on the UI and seeing the retrieved source code. You can make edits and save that code to see live updates in the UI.
- After a component is selected, you may type in the text input and:
- Request an edit (e.g., changing the text/styling) and then clicking 'Edit'
- Add a new component (e.g., add a Greeting component that says "Hello world") and then clicking 'Add New' which will create new component files
- You may publish a component so it is saved in the vector database and accessible by search. The purpose of this is:
- So a user can easily select and find components in their project
- It is also for a future feature to allow re-use of existing components instead of always creating new ones
- Initial POC
- Project aware styling
- Handling re-use of components
- Expanding frameworks to include others (like next.js)
You may fork the project and work in your own repository.
Distributed under the MIT License. See LICENSE.txt for more information.