FREE Open Canvas: Open Source OpenAI Canvas Alternative!🤖 AI Coding LangChain Local Or Cloud
In this video
- 00:00Introduction to OpenAI Canvas and Open Canvas by LangChain
- 00:36Overview of Open Canvas: Cloud and Local Options
- 00:54Key Features: Memory, Document Starting Options, and Markdown Support
- 01:25User Experience Enhancements and Quick Actions
- 01:55Setting Up Open Canvas Locally: Cloning the Repository
- 02:22API Configuration: OpenAI, Anthropic, and LangChain Keys
- 03:34Configuring Supabase for Local Deployment
- 04:07Running Open Canvas Locally on VS Code and Docker
- 04:41Cloud Version Benefits vs. Local Setup Challenges
- 05:11Live Demo: Building a React To-Do App with Open Canvas
- 05:49Code Tools: Adding Comments, Logs, and Language Porting
- 06:24Using Bug Fixing and Revisions in Open Canvas
- 07:00Stride Agents Ad: AI-Powered Appointment Setters
- 07:36Custom Actions: Creating Quick Actions with Emojis
- 08:10Reflections Tool: Content and Style Enhancements
- 08:39Writing Tools in Open Canvas: Translating and Adding Emojis
- 09:13Adjusting Text Length and Style (Pirate Mode!)
- 09:48Translating Text to Multiple Languages
- 10:15Final Thoughts: Free Open Canvas, Setup Tips, and Community Links
- 10:34Outro: Subscribe, Join the Community, and Book a Call
Links from the video
Transcript
2,237 wordsWhat's going on guys Josh pook here and just a couple weeks ago open aai released their new feature canvas and we did a video covering this tool where it allows you to improve your writing with suggesting edits adjusting the length changing the reading level adding final polish adding emojis you can review your code add logs add comments fix bugs port to a different language and a lot of really cool features but as you guys know open aai is a closed Source
Company and therefore canvas is a Clos Source feature so in today's video we're going to be looking at an open source Solution by Lang chain called open canvas we're going to show you how you can use the cloud version 100% for free or how you could self host it locally with your own API Keys let's dive right into [Music] it so a few cool things with open canvas it has built in memory so open canvas ships out of the box with
A reflection agent which stores style rules and user insights in a shared memory store this allows open canvas to remember facts about you across sessions you can also start from existing documents so open canvas allows users to start with a blank text or code editor in the language of their choice allowing you to start the session with your existing content instead of being forced to start with a chat interaction we believe that this is the ideal user experience because many times
You will already have some content to to start with and you want to iterate on top of it so it includes memory custom quick actions pre-built quick actions artifact versioning code markdown or both live markdown rendering and editing and I'll leave a link to the repo down below so if you want to read through this more in depth you can check that out and then how to use so you can either use the deployed version for free which is pretty damn
Impressive and as of now I personally haven't seen any rate limits at this time or you can go ahead and clone this repository and run it locally deploy it on your own Cloud which we'll show you how to do right now so first things first we're going to get clone the directory right here then we're going to change directory into open canvas and then we're going to run yarn install all right once those dependencies are done installing I'm simply going to
Run code dot to open this up in vs code all right so once you open this up you're going to want to go to the env. example and you're going to want to make a copy of this file then what you're going to want to do is rename it Tov and then start entering in these environment variables so you can enter in either your thropic API key or your open AI API key then you're going to want to enter in your
Lang chain API key now you really have two options so if you're on Mac you can install langra studio right here so you just come to Lang graph studio and you would download it and then you would grab your Lang graph API URL and you could enter it here I believe or in the constant. TS and I'll also leave a link down below to this loom video right here how to set up open canvas locally if you are having any issues
With with Lang graph Studio since I'm not on Mac and when you're running Lang graph Studio you're also going to want to have Docker running make sure you go to dock. and install that or you can create a lang Smith account right here to deploy to production on Lang graph Cloud all right so that link would take you here if I click on new project right here you can see we have our Lang chain endpoint which we would just copy this
Right here paste that into our environment variable and then you would want to grab your Lang chain API key which if you go to settings right here then you'll see API keys and then you can create a new API key or if you already have an API key you can use that one you'll also see here that there's some superbase environment variables right here for authentification now I don't know if there's a way to run it without this maybe you could
Tweak some things or what not it doesn't specifically say in their docs so I just went to superb.com which I'll leave a link down below and I created a new project a free project and then if you just scroll down right here it will show your project API right here with your superbase url as well your super base andon key and you can simply just paste these over into your environment variables here and then save this environment variable file once you
Do that you can run yarn Dev right here as you can see it's starting up on Local Host 3000 all right so it's going to take us to the login page right here you can go ahead and click sign up and create an account and then just log in all right so now we are logged into open canvas on Local Host 3000 now at the moment in terms of actually using this locally I personally found that I was dealing de with
More issues with certain bugs and quite frankly if the cloud version currently is 100% free I personally prefer using the cloud version so if you go ahead to open canvas. lch.com and I'll leave a link down below for that you can use the cloud version for 100% free you don't have to enter in your own API keys or anything like that and maybe the local version works a little bit better if you're on Mac so if you are I would go
Ahead and still try it out and maybe if you're on Windows you can still try it out too and let me know but let's go ahead and actually test out open canvas so first things first let's say write me a to-do app in react okay so you can see here it is writing the code in an artifact like interface right here on the right side all right now over here in the right corner we can see we have a few different
Options so if we click on this code tools we'll be able to see that we have ADD comments we have ad logs we have Port language and we have fixed bugs so very similar to uh the actual open AI canvas so let's go ahead and add some comments all right as you can see the code is being Rewritten with comments here such as Define the to-do app function functional component function to add new to-do to list etc etc now let's say
We want to add some logs okay so now you can see that we do have specific logs such as console warn right here and we still have those comments that we added before as well now we can click over here and actually Port this to a different language so let's say we wanted to Port this to python we can do so and as you can see our app is being ported over to Python and we can even run the fix bugs
Tool right here and that's going to fix potential bugs now you may have noticed if we highlight specific things in this canvas we can say ask open canvas so we can click on that and then we could ask open canvas about a specific area I'm just going to say rewrite this better okay and you can see here that it did rewrite it cool thing too is if you see up here we have six of six so we can actually go back
To specific revision such as the fourth revision or the third revision or the second iteration whatever the case may be and you can even copy the code up here which is really nice if you want to easily copy it are you tired of pouring thousands of dollars into appointment Setters only to watch leads slip away imagine having a team of elite sales agents booking qualified appointments for you around the clock no more wasted time on training no more frustration with performance
And no more draining your budget on inconsistent and expensive call centers introducing stride agents AI powered appointment sets at work 24/7 never get tired and book appointments while you sleep trained on thousands of successful conversations our AI agents outperform human teams at just one tenth of the cost join the ranks of businesses that doubled their appointments and booking rates in just a matter of weeks don't get left behind in the AI Revolution visit stride agents.com now and transform your entire sales
Process with cuttingedge AI technology it's time to accelerate your stride with AI agen now down here this magic wand is for custom quick action so if I click on this you'll see we don't have any if I click on new you can see that we can create a custom quick action which are ways to create your own actions to take against the selected artifact so here in the custom instructions you could actually add some specific custom instructions and this field contains
The custom instructions you set which will then be used to instruct the LM on how to regenerate the selected artifact so let's say we wanted a custom action of adding emojis in the comments and then you have the options to include prefix impr prompt include Reflections in prompt and include recent history in prompt or or include none of those if you want and we can go ahead and click save all right so now if we use our test custom action right
Here you can see that we have some specific emojis right here in the comments right here so changes made right here emojis so I definitely didn't do a perfect prompt right here in the custom actions I kept it very vague but you could of course make it a bit more in depth and precise and get some pretty cool responses now up here is the built-in Reflections right here so you can see current Reflections generated by the assistant for Content generation so
You can see here we got style Reflections content Reflections you can go ahead and Clear Reflections if you want now if you clear them this action cannot be undone so I'm not going to do that right now all right so here I asked it to write an in-depth paper on why marketing is important in a business and as you can see it's writing it here in the canvas now that we're asking it for a writing tab task we of course have
Different tools so we have the writing tools just like how open AI canvas has these same features we can either translate we can change the reading level we can adjust the length or we can add emojis let's say I want to add some emojis here and as you can see it is getting generated right now with some emojis in this now we can go ahead and increase the length right here so now you can see it's a lot longer with the
Regeneration all right so we can adjust the reading level too to either PhD College teenager child or pirate let's go ahead and do pirate all right so we can see here our marketing be playing a crucial role in the success of any business so pretty cool stuff and then we can translate to English Mandarin Hindi Spanish or French so now you can see that this whole paper is in French all right guys so that's pretty much it for open canvas I
Just want to show you guys a free open source alternative to open a eyes canvas now if you set it up low Lo Al you'll have to use your own API keys and from what I've seen it works better on Mac locally but like I said you can use the cloud version for 100% free definitely check it out below let me know what your thoughts are also too guys if you're new to the channel we upload videos every single day on
AI Marketing sales business growth if you like that type of content and you got some value here make sure to smash that like button comment down below and subscribe to stay up to date with the daily uploads also too guys if you haven't already joined our free community stri community.com I'll leave a link down below for our free Facebook group and Discord Channel and if you need help growing your business business guys book a call at executive.com slapp I'll leave that
Link down below other than that guys I will see you in tomorrow's video keep hustling keep grinding and of course guys accelerate your stride take care