What is Prodex Js

prodex-js is a simple JavaScript library designed to enhance coding experiences by integrating advanced features for video coding in MCP environments.

Use cases

Use cases for prodex-js include enhancing user interaction in web applications, providing real-time coding feedback, and integrating visual prompts in coding tutorials or educational platforms.

How to use

To use prodex-js, include the script in the head of your HTML file. You can set the ‘k’ parameter to load magic components or omit it for production builds. Additionally, configure the MCP setup with the provided JSON structure to connect to the prodex API.

Key features

Key features include component-level and page-level prompts, basic vision integration allowing the MCP client to interact with screen content, and planned screen capture integration.

Where to use

prodex-js can be utilized in web development projects, particularly those involving interactive coding environments and applications that require video coding functionalities.

prodex-js

Simple JS library that let you vibe code to the next level!

https://github.com/user-attachments/assets/5fc85e16-0a18-4b97-aa6c-e18e6767a407

Features

• Component-level prompt;
• Page level prompt;
• Basic vision integration (MCP client can “ask question” to what you see in the screen);
• (Not implemented) Screen capture integration.

Usage

Code setup

To use, add the following to the head of your HTML file:

<script name="prodex" src="http://cdn.jsdelivr.net/gh/tarasyarema/[email protected]/core.min.js?k=test"></script>

if you set the k the magic components will be loaded, if you do not set it the magic components will not load (e.g. for production builds).

You can set the @master to always get the latest version, or a specific version. But it might be “more” unstable.

MCP setup

Add the foloowing to your MCP setup

{
  "mcpServers": {
    "prodex": {
      "url": "https://prodex-api.onrender.com/mcp/sse?api_key=sk_test"
    }
  }
}

you can use sk_test as the api_key for testing purposes.

Currently I’m hosting the backend myself, but in the future I might open source / distribute a binary so that you can
run the MCP locally, as it might be part of a bigger project.

If you are really interested in the backend or can not use the an external service, please let me know via LinkedIn
and I may give you access / binaries.

Claude code

Ensure you have 0.2.54 or above

claude mcp add prodex --transport sse https://prodex-api.onrender.com/mcp/sse?api_key=sk_test

Disclaimers

1. I tested with Cursor, but probably any other editor that has an MCP connection with their agentic code;
2. Currently tested in development in two React based projects (with vite), not sure if it will work with other frameworks.

Development

Check the core.js file for the source code.

Contributing

Please open a PR, or just DM me in LinkedIn (Taras Yarema) if you have questions.

License

MIT, see LICENSE for more information.