DEV Community

Cover image for Iterating on Web Handlers Implementation
Amnish Singh Arora
Amnish Singh Arora

Posted on

1 1

Iterating on Web Handlers Implementation

Last week, I wrote about introducing the idea of Web Handlers in ChatCraft, and how I implemented an initial proof of concept with a hard-coded Web Handler.

This week, after receiving some feedback, I extended upon that functionality by adding a form that allows users to configure as many Web Handlers as they wish in YAML, which are ultimately persisted in their browser's localStorage.

Table of Contents

 1. How it works ๐Ÿƒ
       1.1. The Model
       1.2. Ability to Configure
       1.3. Executing Handlers
       1.4. Making Sense of it
 2. Looking Ahead ๐Ÿ‘€

How it works ๐Ÿƒ

At this point, you might have been a little confused about what exactly I've been talking about all this time. Trust me, I was also confused when I signed up for this task.

So, here's a quick demo ๐Ÿฅ‚

The Model

If you remember from my last post, I was mostly discussing about the model of Web Handlers.

It looks something like this in its current state.

export class WebHandler {
  handlerUrl: string;
  method: HttpMethod;
  matchPattern: RegExp;

  constructor({
    handlerUrl,
    method,
    matchPattern,
  }: {
    handlerUrl: string;
    method: HttpMethod;
    matchPattern: RegExp | string;
  }) {
    this.handlerUrl = handlerUrl;
    this.method = method;
    this.matchPattern = matchPattern instanceof RegExp ? matchPattern : new RegExp(matchPattern);
  }

  isMatchingHandler(message: string) {
    return this.matchPattern.test(message);
  }
  ...
  ...
  ...
}
Enter fullscreen mode Exit fullscreen mode

Ability to Configure

Users will now have the ability to configure their own Web Handlers in YAML.

Here's an example:

Web Handlers Config

Executing Handlers

And the first matching handler gets executed. In my case, I have configured YouTube URLs to be handled by a mock api just for demonstration purposes.

Prompt:

https://www.youtube.com/watch?v=bnFa4Mq5PAM
Enter fullscreen mode Exit fullscreen mode

Result:

Handler Result

Making Sense of it

This might not make sense at first, but essentially, you can extend the functionality of ChatCraft without the project implementing new features. You can write your own Microservices to provide some functionality and register Web Handlers in ChatCraft to send HTTP requests to your Microservice with your entered message attached to it.

A more realistic example would be using Taras's Scrape2Md Microservice as handlerUrl.

Taras Microservice

Let's try another YouTube URL now with updated config:

Prompt:

https://www.youtube.com/watch?v=tfSS1e3kYeo
Enter fullscreen mode Exit fullscreen mode

Result:
Web handler response

It gave me the lyrics of the song I pasted, and since we have Text to Speech in ChatCraft, I can ask one of our singers

our singers

to sing or download an instantly remixed song for me ๐ŸŽถ๐Ÿชฉ๐Ÿคฉ

Download Song

Looking Ahead ๐Ÿ‘€

You must have noticed that it is already kinda powerful, and still holds a lot of potential as I said in my last post as well.

The coding part for this was fairly simple as I just had to implement a UI for the functionality I wrote last week.

If you really want to follow along, you can look this PR.

Implement initial version of web handlers #519

This is my initial attempt in implementing the idea of what we can call web handlers as discussed in #507 .

I have:

  1. Written a WebHandler class registering/searching web handlers and executing their logic i.e. sending request to handler url based on request config (so far request method)
  2. Added logic to check if the prompt matches with match pattern of one of the registered Web Handlers. The search is sequential as mentioned in the issue, and the first matched web handler processes the prompt url. If there is no match, the prompt is released to the regular control flow (slash command or sent to AI).
  3. Currently, I have hard coded 2 Web Handlers as mentioned in issue, but we can later create UI to configure as many as user wants in localStorage.

Demo:

Prompt: https://github.com/tarasglek/chatcraft.org/pull/519

image

What I don't like is how we are currently allowing prompt like import <url> to be registered as match patterns. This causes ambiguity and I had to write specialized logic to handle edge cases like

url = extractFirstUrl(url) ?? ""; // When the input is not a url itself
Enter fullscreen mode Exit fullscreen mode

as an example.

I feel like we should restrict web handler match patterns to just urls, and let import command serve its own purpose.

Maybe I am wrong and don't understand fully where we are going with this.

@humphd @tarasglek Please let me know what you think.

Next week, I am planning to replace the TextArea being used for configuration with a dedicated code editor called CodeMirror for a better developer experience.

I may also work on making the configuration more flexible by allowing more options to be configured for the handler.

If you have any questions or suggestions, feel free to start a conversation in the comments!

I will follow up with another post ๐Ÿ”œ

Image of Timescale

๐Ÿš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsโ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post โ†’

Top comments (0)

Sentry image

See why 4M developers consider Sentry, โ€œnot bad.โ€

Fixing code doesnโ€™t have to be the worst part of your day. Learn how Sentry can help.

Learn more