Ghost Text
A text suggestion system that displays AI-generated content after the cursor.
Installation
npx shadcx@latest add plate/ghost-text
Examples
components/copilot-demo.tsx
'use client';
import React from 'react';
import { Plate } from '@udecode/plate-common/react';
import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { copilotValue } from '@/components/values/copilot-value';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';
import { copilotPlugins } from '../components/editor/plugins/copilot-plugins';
export default function CopilotDemo() {
const editor = useCreateEditor({
plugins: [...copilotPlugins, ...editorPlugins],
value: copilotValue,
});
return (
<Plate editor={editor}>
<EditorContainer variant="demo">
<Editor />
</EditorContainer>
</Plate>
);
}
Plate Plus
- Suggestions powered by AI SDK (OpenAI). Code available in Potion template
- Rich text suggestions including marks and links
- Hover card with additional information
- Beautifully crafted UI