Julius Francisco baldrailers

How to add ChatGPT streaming to your Ruby on Rails 7 app!

This guide will walk you through adding a ChatGPT-like messaging stream to your Ruby on Rails 7 app using ruby-openai, Rails 7, Hotwire, Turbostream, Sidekiq and Tailwind. All code included below!

Want more content like this, for free? Check out my free book, RailsAI!

Follow me on Twitter for more Ruby AI at https://twitter.com/alexrudall
Released under the MIT License - use as you wish :)

Using Stimulus JS to POST

Whenever you use pagy links that require interception, you will need to reinitialise any javascript that you need to run. If you submit a form, and use a turbo frame to render those search results, and to also render the pagination links to those results, how are you going to reinitialize your javascript code to intercept those pagy page links?

Stimulus JS is very handy for reinitialising javascript code, and is useful if you are using a library like hotwire (by Basecamp) where changes are made to the DOM.

// pagy_controller.js - a stimulus JS controller
import { Controller } from "@hotwired/stimulus"

Rails Active Storage Cheatsheet

Rails Active Storage Cheatsheet
- Install Active Storage
- Usage
Install this libraries first

Alexa

Prerequisites

AWS Account
Create a Developer Portal Account
Alexa-enabled device for testing (Optional)
- Companion App - http://alexa.amazon.com/

	import React from "react";

	const Hello = ({ name }: { name: string }) => <span>Hello {name}</span>;

	Hello.defaultProps = { name: "World" }

	export default Hello;

	# see rkengler.com for related blog post
	# https://www.rkengler.com/how-to-capture-network-traffic-when-scraping-with-selenium-and-python/

	import json
	import pprint

	from selenium import webdriver
	from selenium.webdriver.common.desired_capabilities import DesiredCapabilities

	capabilities = DesiredCapabilities.CHROME

	const puppeteer = require('puppeteer');
	const prettier = require('prettier');
	const atob = require('atob');
	const btoa = require('btoa');

	const scriptUrlPatterns = [
	'*'
	]

	const requestCache = new Map();

	const fs = require('fs');
	const file = JSON.parse(fs.readFileSync('./dump.har')).log;
	const targetMimeType = 'image/jpeg';

	let count = 1;
	for (const entry of file.entries) {
	if (entry.response.content.mimeType === targetMimeType) {
	// ensure output directory exists before running!
	fs.writeFileSync(`output/${count}.png`, new Buffer(entry.response.content.text, 'base64'), 'binary');
	count++;