👨🏼‍💻

khriztianmoreno's Blog

Home Tags About |

Posts with tag ai

WebContainers at its best - Bolt.new combines AI and full-stack development in the browser

2024-10-08
javascriptaiweb-development

Remember WebContainers? It’s the WebAssembly-based “microoperating system” that can run Vite operations and the entire Node.js ecosystem in the browser. The StackBlitz team built WebContainers to power their in-browser IDE, but it often felt like the technology was still searching for a killer use case—until now. That’s because StackBlitz just released bolt.new, an AI-powered development sandbox that Eric Simons described during ViteConf as “like if Claude or ChatGPT had a baby with StackBlitz.”Bolt.newI’ll try not to imagine it too vividly, but based on the overwhelmingly positive reviews so far, I’m guessing it’s working – dozens of developers describe it as a combination of v0, Claude, Cursor, and Replit. How Bolt is different: Existing AI code tools can often run some basic JavaScript/HTML/CSS in the browser, but for more complex projects, you need to copy and paste the code to a local environment. But not Bolt. By using WebContainers, you can request, run, edit, and deploy entire web applications, all from the browser. Here’s what it looks like:You can ask bolt.new to build a production-ready multi-page app with a specific backend and database, using any technology stack you want (e.g. “Build a personal blog using Astro, Tailwind, and shadcn”).Unlike other tools, Bolt can install and run relevant npm packages and libraries, interact with third-party APIs, and run Node servers.You can manually edit the code it generates via an in-browser editor, or have Bolt resolve errors for you . This is unique to Bolt, because it integrates AI into all levels of WebContainers (not just the CodeGen step).You can deploy to production from chat via Netlify, no login required.There’s a lot more we could go over here, but Eric’s demo is pretty wild. In closing: From the outside, it wasn’t always clear whether StackBlitz would ever see a significant return on investment over the 5+ years they’ve spent developing WebContainers. But suddenly it looks like they might be uniquely positioned to help developers leverage AI to build legitimate FullStack applications.<iframe width="560" height="315" src="https://www.youtube.com/embed/knLe8zzwNRA?si=7R7-1HxzwuyzL0EZ&amp;start=700" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>I hope this has been helpful and/or taught you something new!Profile@khriztianmoreno �

Unlock your creativity with Google Gemini and JavaScript - A practical guide

2024-06-12
javascriptaitutorial

Hello! Today I bring you a new tool that will boost your creativity to another level: Google Gemini. This artificial intelligence API allows you to generate high-quality text in Spanish, from simple phrases to complete stories, with just a few lines of code.What is Google Gemini?Google Gemini is a state-of-the-art language model developed by Google AI. It has been trained with a massive dataset of text and code, allowing it to understand and generate natural language with impressive accuracy.What can we do with Google Gemini and JavaScript?The possibilities are endless. Here are some examples:Generate creative content: Write poems, stories, scripts, blog posts, or any type of textual content you can imagine.Translate languages: Translate texts from one language to another quickly and accurately.Answer questions: Get answers to your questions in an informative and complete way.Create chatbots: Develop conversational chatbots that interact with users naturally.Automate tasks: Automate the generation of reports, emails, and other tasks that require natural language processing.How to get started?To get started with Google Gemini with JavaScript, you only need:A Google Cloud Platform account: https://cloud.google.com/Enable the Google Gemini API: https://ai.google.dev/Practical example:In this example, we are going to generate a poem using Google Gemini and JavaScript.const { GoogleGenerativeAI } = require("@google/generative-ai"); // Access your API key as an environment variable (see "Set up your API key" above) const genAI = new GoogleGenerativeAI(process.env.API_KEY); async function run() { // For embeddings, use the embedding-001 model const model = genAI.getGenerativeModel({ model: "embedding-001" }); const text = "Escribe un poema sobre la naturaleza"; const result = await model.embedContent(text); const embedding = result.embedding; console.log(embedding.values); } run();For text generation we use the getGenerativeModel method of the genAI object.Example of a generated poem:The green earth, the blue sky, the sun shines with crystal light. The flowers bloom in the garden, the birds sing with sweet trill. The wind rustles through the leaves, the bees buzz among the flowers. Nature is a divine gift, a place of peace and harmony.Conclusion:Google Gemini and JavaScript are a powerful combination that allows you to unlock your creativity and develop amazing applications. With this practical guide, you are ready to start exploring the endless possibilities of this technology.Additional Resources:Google Gemini Documentation: https://ai.google.dev/docsGoogle Gemini Tutorials: https://m.youtube.com/watch?v=TXvbT8ORI50Google Gemini Code Examples: https://m.youtube.com/watch?v=jTdouaDuUOAFeel free to experiment with Google Gemini and JavaScript! Share your creations in the comments and let me know what you think of this tool.I hope this has been helpful and/or taught you something new!Profile@khriztianmoreno ďż˝