ArnavK-09

Posted on May 2

🖋️ Unlock Your Writing Potential with CopilotKit's AI-Powered Wizardry!

#githubcopilot #ai #supabase #unocss

💡 Why this?

I created this project to participate in the Quest challenge, but more importantly, to provide a seamless writing experience for technical writers like yourself. This article aims to showcase the power of AI in enhancing your writing process and delivering high-quality content effortlessly.

🔨 What's Being Built?

"Doped Caul" is a cutting-edge platform that combines the expertise of human writers with the capabilities of artificial intelligence. It allows technical writers to create and publish their articles efficiently, with the help of an AI assistant that can automatically enhance and complete your work. The platform boasts a user-friendly interface, a safe and secure environment with GitHub OAuth login, and a streamlined publishing process, eliminating the hassle of managing multiple platforms.

🧠 How Does It Work?

At the heart of "Doped Caul" lies a powerful frontend built with React, Refine, CopilotKit/React, and other modern technologies. When you start typing in the <CopilotTextarea /> component, it sends a request to the backend, which initiates a stream of AI-generated content using GPT-3.5 by OpenAI. This content is then seamlessly appended to your blog post or article, based on your preferences. The CopilotKit takes care of providing the necessary context, crafting beautiful prompts, and ensuring optimal results.

Post Context -> CopilotTextarea -> Backend -> Stream Response -> Shown on Frontend -> Accepted by Writer

⛅ Checkout full App preview on GitHub readme ⛅

✨ Getting Started

🔖 Wierd Name

Admittedly, the name "Doped Caul" might seem a bit peculiar at first, but it was a suggestion from my Discord friends and I decided to embrace the quirky vibe. After all, a unique name can help us stand out in the crowded tech world! 😄

🎨 UI and Color Scheme

For the user interface, I chose UnoCSS, inspired by Tero (the creator of NueJS) and his compelling article on the benefits of using UnoCSS over traditional CSS frameworks. As for the color scheme, I opted for a vibrant palette inspired by TikTok, following the recommendations from this article. The combination of modern UI and eye-catching colors aims to create an engaging and visually appealing experience for our users.

🛠️ Framework and Dependencies

I've always wanted to explore Refine, a powerful framework that streamlines development by providing seamless authentication, database integration, and other essential features. This project was the perfect opportunity to dive into Refine's ecosystem, which has proven to be truly awesome and time-saving.
To integrate AI capabilities, I relied on CopilotKit, a requirement for the Quest challenge. While I was initially forced to use React due to the choice of Refine and CopilotKit, I've grown to appreciate its strengths despite my initial unfamiliarity with the framework.
For the backend, I created a simple API with Express.js to interface with the OpenAI API. Initially, I tried using @copilotkit/backend, but due to some compatibility issues, I opted for a more straightforward approach:

app.post("/", async (req, res) => {
  const stream = openai.beta.chat.completions.stream({
    model: "gpt-3.5-turbo",
    temperature: 0.5,
    messages: req.body.messages,
  });
  res.header("Content-Type", "text/plain");
  for await (const chunk of stream.toReadableStream()) {
    res.write(chunk);
  }
  res.end();
});

Since CopilotKit sends a POST request with all the necessary data to gather the AI response, you'll need to add a corresponding POST request handler in your backend.

📝 Creation of App!

🎯 UI and Styling

I designed the entire UI myself, without relying on external components, to ensure full customization and alignment with the TikTok-inspired color scheme. Instead of a plain black background, I incorporated a subtle pattern from a website, adding an extra touch of beauty to the site.

🔤 Font Selection

After some exploration, I settled on a font that strikes a balance between aesthetics and user experience. While my initial choice wasn't optimal for UX, the current font should provide a pleasant reading experience for our users.

💻 Base Logic Stuff

🔒 Authentication and Database

"Doped Caul" utilizes Supabase for authentication, with a GitHub provider for a seamless login experience. I created a posts table (fields required mentioned in GitHub repo's README.md) in the database to store user's post content related data.

Refine.dev's [Supabase provider](https://refine.dev/docs/data/packages/supabase/ made it incredibly easy to configure the database and authentication, saving me a lot of time and effort.

🧠 CopilotKit Integration

I integrated CopilotKit by following their demo projects and documentation. Their React-supported packages greatly facilitated the connection between the frontend and backend, enabling the best use of AI models.

🚀 Publishing Posts

Currently, users can publish their AI-written articles directly to platforms like dev.to, medium.com, and hashnode.com, which provide APIs for publishing content. All API keys are securely handled on the client-side, ensuring that our database never stores any sensitive information. I utilized these platforms' APIs to streamline the publishing process for AI-generated content powered by CopilotKit.

📝 Markdown Rendering

To convert the AI-written articles from markdown to HTML for real-time preview, I used the marked package in conjunction with React's useMemo hook for optimal performance:

const userTextConvertedToMarkdown = useMemo(() => {
  return marked(userTypedContent);
}, [userTypedContent]);

Also I used Unocss's Typography plugin to preview markdown content beautifully without writing any extra css.

🔑 Environment Variables

To ensure smooth operation, "Doped Caul" requires a few environment variables:

VITE_SECRET="<your secret word(s) to encode secret data>"
VITE_SUPABASE_URL="<your supabase project url>"
VITE_SUPABASE_KEY="<your supabase project key>"
OPENAI_KEY="<your openai api key>"

Additionally, you'll need to configure your frontend origin in the backend to prevent CORS errors:

app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "<your app url>");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});

Finally, provide your backend URL to the CopilotKit provider to establish communication:

<CopilotKit
  url="<your copilot backend url>"
  runtimeUrl="<your copilot backend url>"
>
  ....
</CopilotKit>

url field is depreciated in newer versions of copilotkit!

📦 Dependencies

I'm using the latest versions of the dependencies for CopilotKit, as previous versions were causing issues:

"@copilotkit/react-core": "^0.25.0",
"@copilotkit/react-textarea": "^0.35.0",

💝 End of this post

Thank you for taking the time to read this article! While this was my first attempt at writing for the Quest challenge, I recognize that there may be room for improvement. However, I've put in my best efforts to create a project that showcases the power of AI in enhancing the writing experience for technical writers.

🌟 I would greatly appreciate if you could star and vote for my repo/project, as well as react to this post. Your support means a lot and will motivate me to continue improving and delivering even better solutions in the future 🌟

Remember, "Doped Caul" may not be perfect, but it's a testament to my dedication and hard work (10 days of focused effort!). I'm excited to continue refining this project and addressing any bugs or issues that may arise.

🙌 Thank you, everyone, for your interest and support! 🙌

🔗 Links of this project

ArnavK-09 / doped-caul

🖋️ Unlock Your Writing Potential with CopilotKit's AI-Powered Wizardry....

🖋️ Doped-Caul 🖋️

Markdown -> AI -> Publish

Note

"Doped-Caul" is a cutting-edge platform that combines the expertise of human writers with the capabilities of artificial intelligence. It allows technical writers to create and publish their articles efficiently, with the help of an AI assistant that can automatically enhance and complete your work. The platform boasts a user-friendly interface, a safe and secure environment with GitHub OAuth login, and a streamlined publishing process, eliminating the hassle of managing multiple platforms.


💀 React on my dev.to article written on this project! 💀

✨ Features

AI-Powered Writing Assistant 🧠: Leverage the power of AI to enhance and streamline your writing process. Get real-time suggestions and assistance from advanced language models.
Seamless Integration with Popular Platforms 🌐: Publish your AI-written articles directly to platforms like dev.to, Medium, and Hashnode with just a few clicks. No more hassle of managing multiple platforms.
Secure and…

View on GitHub

Top comments (3)

Bap • May 2

Excellent piece - really enjoyable read 👏
I got to try CopilotKit now 👀

Martin Falk Johansson • May 3

Currently, users can publish their AI-written articles directly to platforms like dev.to, medium.com, and hashnode.com, which provide APIs for publishing content.

Thanks for giving us even more AI-written articles that rarely provide anything of value. Why should I bother reading something that you did not bother writing?

A lot of people are currently spending a lot of time filling the internet with content, but what that content actually contains seem not to be as important. I look at dev.to often, and sad to say, but the majority of articles are AI and they are all bad.

ArnavK-09 • May 3 • Edited

Its just a project for copilot usage and for completing a challenge, I do not promote ai written articles, this is just idea

Regards

DEV Community