what is prodex-js?
prodex-js is a simple JavaScript library designed to enhance coding experiences by integrating various prompts and basic vision capabilities.
how to use prodex-js?
To use prodex-js, include the script in the head of your HTML file and set up the MCP configuration as specified in the documentation.
key features of prodex-js?
- Component-level prompt integration
- Page-level prompt functionality
- Basic vision integration allowing the MCP client to interact with on-screen content
- Future plans for screen capture integration
use cases of prodex-js?
- Enhancing user interaction in web applications with dynamic prompts.
- Integrating visual recognition features in coding environments.
- Facilitating real-time coding assistance through MCP connections.
FAQ from prodex-js?
- What is MCP?
MCP stands for Multi-Component Prompt, which allows for enhanced interaction in coding environments.
- Is prodex-js compatible with all JavaScript frameworks?
Currently, it has been tested with React-based projects, but compatibility with other frameworks is not guaranteed.
- How can I contribute to prodex-js?
You can contribute by opening a pull request or contacting the author directly.
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/prodex-js@v0.1.4/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
- I tested with Cursor, but probably any other editor that has an MCP connection with their agentic code;
- 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.