The frontier of artificial intelligence is rapidly advancing, bringing new opportunities to build smarter, more assistive software experiences. One exciting area is leveraging large language models that can understand and generate natural language. By integrating an "AI co-pilot" into your web applications, you can provide users with an intelligent assistant capable of things like content generation, text summarization, tone adjustments and multi-lingual translations on demand.

While AI writing tools have been confined mostly to desktop software historically, innovative developers are now finding ways to bake this technology directly into modern web experiences. In a recent talk at Frontend Nation, Vanessa Otto (Senior Frontend Engineer at GitLab) demonstrated how to build an AI-powered rich text editor using the open-source Tiptap library and OpenAI's language models.

An AI Co-Pilot for Content Creation

Vanessa’s demo illustrated how developers can enhance content creation flows on the web by summoning an AI assistant at the tap of a keyboard shortcut. Within a Tiptap-based rich text editor, typing a "/" allows the user to reveal a menu of AI command options like "Ask AI", "Continue Writing", "Translate" and more.

Let's say you select the "Ask AI" option and enter the prompt "Please explain CSS to me". Vanessa’s implementation then seamlessly interfaces with the OpenAI language model behinds the scenes, retrieving a natural language response summarizing CSS which is rendered inline in a formatted UI. From there, the user can choose to insert or discard the AI-generated text.

This AI co-pilot functionality could save writers time and effort by being able to quickly generate drafts, expand on points, rephrase passages and translate content to other languages - all without leaving the rich text editor. The possibilities extend beyond just writing assistance as well. As Vanessa highlighted, detecting potentially inappropriate text, generating social media teasers from long-form articles, and rewriting content for different target audiences are other impactful use cases.

Building the AI Experience

So how was this AI-powered editor experience built? At the core, Vanessa utilized Tiptap's extension API to create a custom "AI" extension that provides the key AI command functionality. This extension encompasses the popup AI command menu, manages making AI requests, renders the AI response UI, and handles inserting or replacing text in the editor based on user interactions.

On the backend, Vanessa’s demo used a Node server to proxy the AI requests to OpenAI's API in order to avoid exposing the OpenAI API key on the client. However, thanks to the rise of Edge Functions and serverless environments, developers have increasingly more secure options for making AI API calls from client applications.

Prompt Engineering Considerations

An underrated but critical aspect that Vanessa highlighted is prompt engineering - the practice of carefully constructing the natural language prompts sent to AI language models. Due to token limitations on the size of prompts and responses, being overly verbose or ambiguous can lead to suboptimal AI outputs.

As Vanessa demonstrated, it's important to explain all required steps and constraints to the AI clearly and concisely when crafting prompts. For example, when translating some text to a new language, be sure to specify to the model to preserve rich formatting like bold or bullet points after translation.

While prompt engineering is still somewhat of an art, various AI prompt optimization strategies, tools and resources are emerging to help developers maximize the utility and accuracy of their AI companions.

The AI Co-Pilot Software Frontier

Integrating an AI co-pilot into your web experience can feel like a small step towards more intelligent, productive and assistive software experiences powered by the latest breakthroughs in artificial intelligence.

As large language models continue advancing and becoming more accessible to developers, we'll likely see AI-powered experiences like Vanessa’s rich text editor becoming more mainstream. There's tremendous potential for AI to empower users to create and communicate more efficiently across a wide range of domains.

If you're interested in learning more about building AI co-pilots into your web apps using technologies like Tiptap and OpenAI, check out the full recording of Vanessa Otto's talk.

The software frontier is rapidly evolving. Don't be afraid to explore how an AI companion could enhance and streamline your applications in creative new ways.