Rainer Borene rainerborene

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 :)

In the olden days, HTML was prepared by the server, and JavaScript was little more than a garnish, considered by some to have a soapy taste.

After a fashion, it was decided that sometimes our HTML is best rendered by JavaScript, running in a user's browser. While some would decry this new-found intimacy, the age of interactivity had begun.

But all was not right in the world. Somewhere along the way, we had slipped. Our pages went uncrawled by Bing, time to first meaningful paint grew faster than npm, and it became clear: something must be done.

And so it was decided that the applications first forged for the browser would also run on the server. We would render our HTML using the same logic on the server and the browser, and reap the advantages of both worlds. In a confusing series of events a name for this approach was agreed upon: Server-side rendering. What could go wrong?

In dark rooms, in hushed tones, we speak of colours.

Ruby 3.1 on Rails

Actions required to use Ruby 3.1.0 with Rails

Rails 7.0.Z

Rails 7.0.0 is not compatible with Ruby 3.1.0.

"Rails::Engine is abstract, you cannot instantiate it directly.."

$ bin/rails s
Calling `DidYouMean::SPELL_CHECKERS.merge!(error_name => spell_checker)' has been deprecated. Please call `DidYouMean.correct_error(error_name, spell_checker)' instead.

[WARNING] Could not load command "rails/commands/server/server_command". Error: Rails::Engine is abstract, you cannot instantiate it directly..

Rails 7 new features. Before and After

Add ComparisonValidator
PostgreSQL generated columns
PostgreSQL custom enum types
Add tracking of belongs_to association
association_previously_changed? method
Add invert_where method
Add associated method
Add missing method
Active Record Encryption

My goal with this was to wrap the terrible YouTube Embed API in a Stimulus controller that would allow me to access the underlying API while providing some convenience methods. One key outcome is that the controller emits youtube events which contain the current position in the video. This means that other code can now respond to the position you are at in the video.

<div data-controller="youtube" data-youtube-code-value="Lo_1pyQ7xvc">
  <button data-action="youtube#play">Play</button>
  <button data-action="youtube#pause">Pause</button>
  <button data-action="youtube#stop">Stop</button>
  <br>
  <div data-youtube-target="frame"></div>

	# This is a thin wrapper of the Simple Form builder. It delegates rendering the resulting form fields to Simple Form
	# but typically amends the Tailwind classes of the various elements in the field layout. It tightly integrates with the
	# unstyled wrapper (aka `:plain`) Simple Form configuration (see `simple_form.rb`). The methods support the same syntax
	# as the original Simple Form methods but enhance it to support replacing defaylt Tailwind claseses.
	class Builders::TailwindFormBuilder < SimpleForm::FormBuilder

	# This is the basic method for rendering `<input>` tags and their variants.
	def input(attribute_name, options = {}, &block)
	# The default Tailwind classes for the various parts of the Simple Form wrapper layout.
	input_class = "block w-full sm:text-sm ... #{'text-gray-500 bg-gray-50' if options.dig(:input_html, :disabled)}"

	class BlurhashAnalyzer < ActiveStorage::Analyzer::ImageAnalyzer::Vips
	def metadata
	read_image do \|image\|
	if rotated_image?(image)
	{ width: image.height, height: image.width }
	else
	{ width: image.width, height: image.height }
	end.merge blurhash(image)
	end
	end

	class Chart < ApplicationRecord
	validate do \|chart\|
	schema = Rails.cache.fetch("vega_lite_schema/v5") do
	Faraday.get("https://vega.github.io/schema/vega-lite/v5.json").body
	end

	JsonSchemaValidator.new(chart, schema: schema, json: vega_json, field: :vega_json).validate
	end
	end

	local wezterm = require 'wezterm';
	return {
	color_scheme = "Dracula",
	-- colors = {
	-- background = "#0c0e14",
	-- },
	window_decorations = "NONE",
	font = wezterm.font("Iosevka"),
	font_size = 10.0,
	-- dpi = 192.0,

	import { Controller } from "stimulus";
	import { get } from "@rails/request.js";
	import { PageSnapshot } from "@hotwired/turbo";

	export default class extends Controller {
	static values = { hoverTime: Number };
	connect() {
	this.element.addEventListener("mouseover", this.prefetch.bind(this));
	this.element.addEventListener("touchstart", this.prefetch.bind(this));
	}