@arcteninc/core 0.0.108 → 0.0.110

package/README.md

@@ -1,6 +1,6 @@
 # @arcteninc/core
 
-React component library for building AI-powered agent interfaces.
+Core hooks, utilities, and types for building AI-powered agent interfaces. This package contains the headless functionality - for UI components, see `@arcteninc/ui`.
 
 ## Installation
 
@@ -14,92 +14,85 @@ pnpm add @arcteninc/core
 bun add @arcteninc/core
 ```
 
-## Requirements
+## Package Split
 
-**Tailwind CSS is only required if you're using the visual components** (like `<ArctenAgent>`). If you're only using the headless hooks (like `useAgent`), Tailwind is not needed.
+This package has been split into two packages:
 
-The UI components use Tailwind utility classes for styling.
+- **@arcteninc/core** (this package): Hooks (`useAgent`), utilities, types, and CLI tools
+- **@arcteninc/ui**: React components (`ArctenAgent`) and UI primitives
 
-### Setting up Tailwind CSS
+This split allows you to use only the core functionality without the UI bundle if you're building a custom interface.
 
-1. Install Tailwind CSS (if not already installed):
+## Usage
 
-```bash
-npm install -D tailwindcss
-npx tailwindcss init
-```
+### Using the `useAgent` Hook
 
-2. Configure Tailwind to scan the library's components by adding the package path to your `content` array in `tailwind.config.js`:
-
-```js
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./src/**/*.{js,ts,jsx,tsx,mdx}",
-    // Add this line to include @arcteninc/core components:
-    "./node_modules/@arcteninc/core/dist/**/*.{js,mjs}"
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
+```tsx
+import { useAgent } from "@arcteninc/core";
+
+function MyCustomAgent() {
+  const {
+    messages,
+    sendMessage,
+    status,
+    error,
+    stop,
+  } = useAgent({
+    apiBaseUrl: "https://api.arcten.com",
+    tokenEndpoint: "/api/arcten/token",
+    user: { id: "user-123" },
+    tools: [/* your tools */],
+  });
+
+  // Build your custom UI using the hook
+  return (
+    <div>
+      {messages.map((msg) => (
+        <div key={msg.id}>{msg.content}</div>
+      ))}
+      <input
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            sendMessage({ text: e.target.value });
+          }
+        }}
+      />
+    </div>
+  );
 }
 ```
 
-3. Include Tailwind directives in your CSS:
+### Using the UI Component
 
-```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-```
-
-## Usage
+If you want the pre-built UI component, install and use `@arcteninc/ui`:
 
-### Complete Example
+```bash
+npm install @arcteninc/ui
+```
 
 ```tsx
-// 1. Import the component
-import { ArctenAgent } from "@arcteninc/core";
-
-// 2. Import the styles (REQUIRED - styles are NOT auto-applied)
-import "@arcteninc/core/styles";
+import { ArctenAgent } from "@arcteninc/ui";
+import "@arcteninc/ui/styles";
 
 function App() {
   return (
     <ArctenAgent
-      title="My AI Assistant"
+      apiBaseUrl="https://api.arcten.com"
       tokenEndpoint="/api/arcten/token"
+      user={{ id: "user-123" }}
     />
   );
 }
 ```
 
-**⚠️ Important:** Importing the component does NOT automatically include styles. You must import the CSS separately (see below).
+## CLI Tools
 
-### Import Styles
+This package includes CLI tools for type extraction:
 
-**Required:** You MUST import the CSS styles separately for the components to display correctly. The styles are pre-compiled and self-contained - they work regardless of whether you're using Tailwind CSS in your project.
-
-#### Option 1: Import in your CSS file (Recommended)
-
-```css
-/* In your globals.css or main CSS file */
-@import "@arcteninc/core/styles";
-```
-
-#### Option 2: Import in your JavaScript/TypeScript
-
-```tsx
-// In your main entry file (e.g., app.tsx, _app.tsx, layout.tsx)
-import "@arcteninc/core/styles";
+```bash
+npx @arcteninc/core arcten-extract-types
 ```
 
-#### Option 3: Import via CDN (if using unpkg or similar)
-
-```html
-<link rel="stylesheet" href="https://unpkg.com/@arcteninc/core@latest/dist/core.css" />
-```
 ## Development
 
 To install dependencies:
@@ -119,9 +112,3 @@ To watch for changes:
 ```bash
 bun run dev
 ```
-
-## Notes
-
-- The CSS is pre-compiled and includes all necessary Tailwind styles
-- You don't need to configure Tailwind CSS in your project to use this package
-- The styles are self-contained and won't conflict with your existing styles