@geenius/ai-magic

Ambient AI helpers, prompt builders, and UI primitives for context-aware product workflows.

Install

pnpm add @geenius/ai-magic

Import Surface

import {
  DEFAULT_WAND_CONFIG,
  buildMagicPrompt,
  configureMagic,
  detectMode,
  generateActions,
} from "@geenius/ai-magic";
import { configureMagic as configureSharedMagic } from "@geenius/ai-magic/shared";
import { useSummarizer } from "@geenius/ai-magic/shared/react";
import { createSummarizer } from "@geenius/ai-magic/shared/solidjs";
import {
  AIMagicProvider,
  CommandPalette,
  ContentWriter,
  SummaryCard,
} from "@geenius/ai-magic/react";
import {
  AIMagicProvider as ReactCssAIMagicProvider,
  SummaryCard as ReactCssSummaryCard,
} from "@geenius/ai-magic/react-css";
import {
  AIMagicProvider as SolidAIMagicProvider,
  CommandPalette as SolidCommandPalette,
} from "@geenius/ai-magic/solidjs";
import {
  AIMagicProvider as SolidCssAIMagicProvider,
  SummaryCard as SolidCssSummaryCard,
} from "@geenius/ai-magic/solidjs-css";
import { magicSchema, magicTables } from "@geenius/ai-magic/convex";

@geenius/ai-magic and @geenius/ai-magic/shared resolve to the same framework-agnostic shared contract.

Basic Usage

import {
  configureMagic,
  detectMode,
  generateActions,
  type FieldMeta,
} from "@geenius/ai-magic";

const schema: FieldMeta[] = [
  { name: "title", type: "string", label: "Title", required: true },
  { name: "summary", type: "textarea", label: "Summary" },
];

const context = {
  mode: detectMode(schema),
  schema,
};

const config = configureMagic({
  autoShowActions: true,
  hotkey: "Ctrl+Shift+M",
});

const actions = generateActions(context);

Provider-Backed Pages

import { AIMagicProvider, AiPlayground } from "@geenius/ai-magic/react";

async function callAI(systemPrompt: string, userPrompt: string) {
  const response = await fetch("/api/ai-magic", {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify({ systemPrompt, userPrompt }),
  });

  return response.json() as Promise<{ content: string; tokens?: number }>;
}

async function loadBackendActivity() {
  const response = await fetch("/api/ai-magic/activity");
  return response.json();
}

export function PlaygroundRoute() {
  return (
    <AIMagicProvider
      callAI={callAI}
      loadBackendActivity={loadBackendActivity}
    >
      <AiPlayground />
    </AIMagicProvider>
  );
}

Package Surface

• @geenius/ai-magic / @geenius/ai-magic/shared: shared types, mode detection, action generation, prompt builders, and safety/cost utilities.
• @geenius/ai-magic/shared/react: React hooks and AI workflow state primitives shared by the styled React variants.
• @geenius/ai-magic/shared/solidjs: SolidJS primitives shared by the styled SolidJS variants.
• @geenius/ai-magic/react: React hooks, components, and the playground page.
• @geenius/ai-magic/react-css: React components, provider helpers, and pages with static CSS output.
• @geenius/ai-magic/solidjs: SolidJS primitives, provider helpers, components, and the playground page.
• @geenius/ai-magic/solidjs-css: SolidJS components, provider helpers, and pages with static CSS output.
• @geenius/ai-magic/convex: Convex schema, queries, mutations, and compatibility table exports.

Storybook

React and SolidJS Storybook apps are included for local review and expose Tailwind and static CSS variants side by side.

• React: apps/storybook-react
• SolidJS: apps/storybook-solidjs
• React build: pnpm --filter ./apps/storybook-react build
• SolidJS build: pnpm --filter ./apps/storybook-solidjs build

License

MIT