Introducing Medium-AI: an open-source, AI-powered text editor

Leveraging the power of LLMs to write better articles

Introduction

Most AI-based text editors released in the recent times are template based, meaning the user just provides a description of their idea and lets the AI generate the entire article. While it may look convenient at first, the article often lacks the human touch and fails to capture the essence of the original idea.

Yann LeCunn, one of the pioneers of artificial intelligence, believes chatGPT and other auto-regressive large language models make great writing assistants — provided the user keeps their hands on the keyboard all the time.

This is the core idea behind the development of medium-ai. The design of this editor is inspired from medium.com. If you’re already familiar with medium.com, you’ll feel right at home. However, medium-ai is an independent project and isn’t associated with medium.com in any way.

Check out the live demo here.

Features

While medium-ai has many features, most of them are common to all the popular text editors. Below are the list of some of the most important ones that make medium-ai unique.

AI Autosuggestion

This is probably the coolest feature. As soon as you start typing into the editor, the article context is taken and passed onto the LLM which predicts any possible ideas that might be written. If you don’t like the current suggestion, press ctrl + space to generate a new one. Moreover, you can select different models from the top right corner of the menu to experiment with different suggestions. If you choose the text-davinci-002 model, which is the most powerful and expensive one, you can leverage OpenAI's insert feature to generate suggestions based on both prompt and suffix as shown in the diagram below.

Prompt and suffix make the overall context which is fed into the LLM

Prompt is the current context while suffix is the context that comes after the prompt.

Other models also leverage the overall context of the article to generate suggestions, but they do so in a hack-ish way. Please refer to the ai_autocomplete endpoint in the backend to understand how it works.

You can switch off this feature by selecting None from the model menu. Also, if you want the current suggestion to disappear, simply select and highlight any text.

AI Edit

To edit text, select it and enter the desired instruction in the toolbar’s text field. The editor will then automatically execute the instruction and update the selected text with the result.

If the edited text isn’t as expected, you can always undo using cmd + z and go back.

Initially, I tried editing with OpenAI’s edits endpoint, but it was not effective. Therefore, I switched to GPT-3.5-Turbo, which is the model behind chatGPT.

Armed with AI Autosuggest and AI Edit, medium-ai helps you write better articles and aims to remove writer’s block. However, the AI features are powered by probabilistic models, which means they are not perfect and may make mistakes from time to time.

Support for LaTeX and Markdown

The editor is versatile, supporting both LaTeX and Markdown. medium-ai is equipped with Markdown listeners that automatically detect Markdown syntax and render it accordingly. For instance, if you begin a paragraph with # heading, it will automatically render as a heading. To format the text as LaTeX, enclose it in ‘$’ to create an inline equation or in ‘$$’ to create a block equation.

LaTeX isn’t supported by Medium. Checkout the live demo of medium-ai to see how LaTeX is rendered.

Getting started

1. Clone the repository.

git clone https://github.com/wingedrasengan927/medium-ai

2. Access the project directory.

cd medium-ai

Frontend Installation

1. Access the frontend directory.

cd frontend

2. Install dependencies.

npm install

3. Start the dev server with hot reload at http://localhost:5173.

npm run dev

Backend installation

The frontend will run in itself, however if you would want to save the data and access AI features, the backend must be running.

Before running the backend, you need to create an openai API key from here. Follow the below steps next:

1. Copy the key, create a file called .env inside the backend/app/config folder, and paste the API key like so:

OPENAI_KEY=si-IAx6f6cWlgqJ69RVwFKxT3BlbkFJI15IMe23MVM6GVLgjuSD

Folder Structure:

- medium-ai
-- frontend
-- backend
--- app
---- config
----- .env

2. Next, it’s preferable to install an anaconda virtual environment. You can install the anaconda distribution from here. After installation, you can create a new virtual environment and activate it using the following command:

conda create -n medium-ai python==3.9 anaconda
conda activate medium-ai

3. Next, you need to access the backend folder and install the requirements using the following command:

cd backend
pip install -r requirements.txt

4. Make sure you’re inside the backend directory and run the following command to start the server running on port 8080.

python main.py

5. Finally, refresh the browser and the frontend will automatically pick up the saved data (if any) stored at backend/app/data/editor_state.json.

End Notes

If you’re looking for a template-free, open-source, AI-powered text editor, medium-ai is the right choice.

However, it is still in its early days and has some unnoticed bugs. I will keep on improving it with time. If you find any bugs or have any suggestions, please raise an issue. Also, if you want to contribute to the project, please check out the GitHub repository.

Note: It’s important to take backup of your articles frequently and store it elsewhere just in case something goes wrong.

Acknowledgements

1. medium-ai is built using Lexical — a text editor framework developed by Meta. Most of the plugins are taken from the lexical playground and have been modified slightly.
2. DaisyUI has been used to create most of the UI components.

Thanks to lexical core members and the amazing community for all the help.

License

medium-ai project is licensed under the MIT License.