ai-agent-builder-3

v1.0.0

Published

10 months ago

A React-based AI agent builder web component that can be easily integrated into any web application

0High
0Medium
0Low

sarthakmishraa

ai agent chat copilot react web-component typescript

AI Agent Builder

A React-based AI agent builder web component that can be easily integrated into any web application. This package provides a customizable chat interface powered by CopilotKit.

Installation

npm install ai-agent-builder

Usage

Basic Usage

<!DOCTYPE html>
<html>
  <head>
    <title>AI Agent Builder Demo</title>
  </head>
  <body>
    <!-- Include the web component -->
    <ai-agent-builder></ai-agent-builder>

    <!-- Include the script -->
    <script type="module">
      import "ai-agent-builder";
    </script>
  </body>
</html>

With Configuration

<ai-agent-builder
  data-config='{"apiKey": "your-api-key", "customConfig": "value"}'
  data-test="test-data"
>
</ai-agent-builder>

Using in React

import React, { useEffect } from "react";
import "ai-agent-builder";

function App() {
  useEffect(() => {
    // The web component will be automatically registered
  }, []);

  return (
    <div>
      <ai-agent-builder
        data-config={JSON.stringify({ apiKey: "your-api-key" })}
      />
    </div>
  );
}

Using the JavaScript API

import { AIAgentBuilderWebComponent } from "ai-agent-builder";

// Create a new instance
const agent = new AIAgentBuilderWebComponent();

// Add to DOM
document.body.appendChild(agent);

// Set configuration
agent.dataset.config = JSON.stringify({
  apiKey: "your-api-key",
  customConfig: "value",
});

API Reference

Web Component Attributes

data-config: JSON string containing configuration options
data-test: Test data string

Configuration Options

The data-config attribute accepts a JSON object with the following properties:

{
  "apiKey": "your-copilotkit-api-key",
  "customConfig": "any-custom-configuration"
}

CSS Customization

The web component uses Shadow DOM, so styles are encapsulated. You can customize the appearance by targeting the component:

ai-agent-builder {
  width: 100%;
  height: 100vh;
}

Development

Prerequisites

Node.js 18+
npm or yarn

Setup

git clone <repository-url>
cd ai-agent-builder
npm install

Development Server

npm run dev

Build

npm run build

Lint

npm run lint

License

MIT

Contributing

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Support

If you encounter any issues or have questions, please open an issue on GitHub.