DEV Community: Vikrant Guleria

React-EXE: Revolutionizing React Component Rendering and Code Playgrounds

Vikrant Guleria — Wed, 05 Mar 2025 06:56:30 +0000

In the ever-evolving world of React development, creating dynamic, interactive code environments has always been a challenge. Enter React-EXE, a groundbreaking library that's about to transform how we execute, preview, and share React components.

What is React-EXE?

React-EXE is a powerful tool that allows developers to execute React components on the fly, with support for external dependencies, custom styling, and TypeScript. It's like giving your code a supercharged playground where complexity meets simplicity.

Key Features That Make React-EXE Extraordinary

🚀 Dynamic Component Execution
Render React components directly from string code or multiple files, opening up endless possibilities for live demos, documentation, and interactive tutorials.
📦 Seamless Dependency Support
Integrate external libraries like Framer Motion, ECharts, or React Router with ease. No more configuration headaches!
🎨 Tailwind CSS Integration
Built-in Tailwind support means you can style your components instantly, without additional setup.
🔒 Robust Security
Comprehensive security checks prevent potentially harmful code from executing, giving you peace of mind.

A Simple Example

Let's see how easy it is to use React-EXE:

import { CodeExecutor } from "react-exe";

const code = `
export default function HelloWorld() {
  return (
    <div className="p-4 bg-blue-100 rounded">
      <h1 className="text-2xl font-bold">Hello World!</h1>
    </div>
  );
}
`;

function App() {
  return <CodeExecutor code={code} config={{ enableTailwind: true }} />;
}

Multi-File Magic

One of React-EXE's most impressive features is its support for multi-file applications. Imagine creating complex, interconnected components that import and interact with each other – all within a single, dynamic environment.

const files = [
  {
    name: "App.tsx",
    content: `
import React from 'react';
import Header from './Header';
import Counter from './Counter';

const App = () => {
  return (
    <div>
      <Header title="My App" />
      <Counter />
    </div>
  );
};

export default App;
    `,
    isEntry: true,
  },
  {
    name: "Header.tsx",
    content: `
import React from 'react';

const Header = ({ title }) => {
  return (
    <header className="bg-blue-500 text-white p-4">
      <h1 className="text-2xl">{title}</h1>
    </header>
  );
};

export default Header;
    `,
  },
  // More files...
];

function App() {
  return (
    <CodeExecutor
      code={files}
      config={{
        enableTailwind: true,
        dependencies: {
          "framer-motion": framerMotion,
        },
      }}
    />
  );
}

Who Should Use React-EXE?

📝 Technical Writers
🏫 Educators
💻 Documentation Creators
🚀 React Developers
🎓 Coding Bootcamp Instructors

The Future of Interactive Code Demonstrations

React-EXE isn't just a library; it's a paradigm shift in how we think about code sharing and demonstration. By removing barriers to live code execution, it empowers developers to create more engaging, interactive learning experiences.

Getting Started

Installation is a breeze:

npm install react-exe
# or
yarn add react-exe
# or
pnpm add react-exe

Conclusion

React-EXE represents the next evolution of React component rendering. It's flexible, secure, and incredibly powerful. Whether you're building documentation, creating tutorials, or just want to experiment, React-EXE provides the tools you need.

Ready to revolutionize your React development experience? Give React-EXE a try today!

Created by Vikrant, React-EXE is MIT licensed and built with ❤️****

Harnessing the Power of ChatNBX API

Vikrant Guleria — Mon, 18 Sep 2023 12:49:03 +0000

In today's dynamic world of artificial intelligence and chatbots, ChatNBX stands out as a cutting-edge chat interface that merges the familiarity of ChatGPT with the might of open-source LLaMA models working effortlessly behind the scenes. ChatNBX is at the forefront of revolutionizing our interactions with AI-powered chatbots, and in this blog post, we'll dive into how you can leverage its API to craft your own AI-driven applications.

Unleashing ChatNBX for Your AI Apps

ChatNBX isn't just about using AI; it's about empowering you to create AI-driven applications tailored to your specific needs. By integrating ChatNBX's API into your projects, you can infuse your apps with human-like conversational abilities and provide users with intelligent, context-aware interactions.

Generating an API Key for ChatNBX

Before we delve into building AI apps, you'll need an API key from ChatNBX. Here's how you can obtain one:

Go to https://chat.nbox.ai to access the ChatNBX platform.
On the platform's sidebar, locate and click on the "APIs" menu. This is where you'll manage and create your API keys.
In the APIs section, you'll find an option to create a new API key. Click on it to initiate the key generation process.

Now that you have your ChatNBX API key, you're ready to harness its capabilities to create AI apps that excel in various domains, from customer support bots that understand user queries to content generation engines that produce compelling articles with ease.

Using ChatNBX API: A Sample Snippet

Once you have your ChatNBX API key, you can start integrating ChatNBX into your applications. Here's a sample code snippet in Python that demonstrates how to make API calls to ChatNBX:

import json
import requests

stream = False

url = "https://chat.nbox.ai/api/chat/completions"
headers = {
    "Authorization": "tune-your-api-key-007078",
    "Content-Type": "application/json"
}
data = {
    "temperature": 0.5,
    "messages": [
        {
            "role": "system",
            "content": "You are ChatNBX"
        },
        {
            "role": "user",
            "content": "Who are you?"
        }
    ],
    "model": "oasst-llama2-70b-4k",
    "stream": stream,
    "max_tokens": 1000
}
response = requests.post(url, headers=headers, json=data)
if stream:
    for line in response.iter_lines():
        if line:
            l = line[6:]
            if l != b'[DONE]':
              print(json.loads(l))
else:
  print(response.json())

ChatNBX is at the forefront of AI-driven conversational experiences, and with your API key in hand, you're ready to unlock its full potential. Whether you're building chatbots, virtual assistants, or simply exploring the capabilities of AI, ChatNBX offers a powerful platform to enhance your applications and engage with your users in a whole new way. So, dive in, experiment, and discover the possibilities of ChatNBX today!

ChatNBX - Your favorite Chat Assistant

Vikrant Guleria — Mon, 24 Jul 2023 20:19:04 +0000

In the world of natural language processing, there has been a growing interest in conversational AI models. While platforms like ChatGPT have gained significant attention, they often require users to sign up and sacrifice their privacy. ChatNBX is here to change that narrative. ChatNBX offers an accessible, flexible, and privacy-focused alternative to ChatGPT, powered by the cutting-edge technology of ChainFury. In this blog post, we will explore the features, advantages, and benefits of using ChatNBX for your conversational AI needs.

Features Unique to ChatNBX:

No Sign Up Required: Unlike other popular conversational AI platforms, ChatNBX does not demand personal information or registration. We believe in fostering a secure and confidential environment for our users. You can start chatting with our models immediately; no need to create an account or provide sensitive data.
Adjustable Temperature Setting: Our platform allows you to customize the "temperature" of your conversation. This feature enables you to fine-tune the model's response according to your preference, ensuring a more satisfying interaction. Whether you want concise answers or detailed explanations, ChatNBX adapts to your needs.
Repetition Penalty: To encourage diverse and creative responses, we've implemented a repetition penalty system. This feature discourages the model from repeatedly giving similar answers, resulting in a more engaging and productive conversation.
System Prompts for Models: ChatNbx incorporates system prompts for seamless communication between humans and AI models. These prompts guide the conversation, allowing the model to better understand your queries and provide accurate, relevant responses.

Models Available on ChatNBX:

Lambda-2 70B: This state-of-the-art model from Meta delivers exceptional performance in various tasks, including text classification, sentiment analysis, and question answering.
Lambda-2 13B: Another powerful model from Meta, Lambda-2 13B offers impressive capabilities in natural language understanding and generation tasks.
FreeWilly by Stability.AI: Specializing in dialogue management, FreeWilly is an excellent choice for engaging in natural-sounding conversations.
Open Assistant: As an open-source version of the popular virtual assistant, Open Assistant provides a versatile and customizable solution for managing everyday tasks.
GPT-4, GPT-3.5-Turbo, and GPT-3.5-Turbo-16K from OpenAI: These models represent some of the most advanced language models developed by OpenAI. They excel in various applications, such as text completion, language translation, and conversational AI.

We're passionate about providing the best possible assistance to our users, and your feedback helps us to achieve that goal. Don't forget to follow us on social media to stay up-to-date with the latest news and updates from our team. You can find us on Twitter @ChatNBX.