Getting started

Install

pnpm add @extedcoud/smart-components react react-dom

Zero runtime deps beyond react / react-dom — every adapter is plain fetch.

Wire a provider

The library is capability-based. You bring a SmartClient; we use whatever it implements. For production, use the proxy adapter so your API key stays on the server:

app.tsx

import { SmartProvider } from '@extedcoud/smart-components';
import { createProxyClient } from '@extedcoud/smart-components/adapters/proxy';
import '@extedcoud/smart-components/style.css';

const client = createProxyClient({ url: '/api/smart' });

export default function App({ children }) {
  return (
    <SmartProvider client={client} model="gpt-4o-mini">
      {children}
    </SmartProvider>
  );
}

For dev or Storybook, use createMockClient — it ships deterministic responses, no network.

Drop in your first component

reply-box.tsx

import { useState } from 'react';
import { SmartTextbox } from '@extedcoud/smart-components';

export function ReplyBox() {
  const [value, setValue] = useState('');
  return (
    <SmartTextbox
      value={value}
      onChange={setValue}
      placeholder="Type a reply…"
      context="user is writing a customer support reply"
    />
  );
}

That's it. As the user types, ghost suggestions appear inline. ArrowRight accepts; Esc dismisses.

Pick your next step

SmartTextbox — ghost completion for inputs
SmartSuggestion — AI dropdown
SmartRewrite — rewrite primitives
Providers overview — adapter capabilities & custom clients

Getting started

Install

Wire a provider

Drop in your first component

Pick your next step

On this page