React hooks for Flick ChatGPT widgets
npm install flick-reactReact hooks for Flick ChatGPT widgets.
``bash`
npm install flick-react
Get data passed from your MCP tool to your React widget:
`jsx
import React from 'react';
import { useWidgetProps } from 'flick-react';
export default function MyWidget() {
const { message, count } = useWidgetProps();
return (
Count: {count}
$3
Manage stateful data that persists in ChatGPT:
`jsx
import React from 'react';
import { useWidgetState } from 'flick-react';export default function Counter() {
const [state, setState] = useWidgetState({ count: 0 });
return (
);
}
`$3
Access ChatGPT global values like theme, display mode, etc:
`jsx
import React from 'react';
import { useOpenAiGlobal } from 'flick-react';export default function ThemedWidget() {
const theme = useOpenAiGlobal('theme');
const displayMode = useOpenAiGlobal('displayMode');
return (
theme-${theme} mode-${displayMode}}>
Themed Widget
);
}
`TypeScript
This package is written in TypeScript and includes type definitions.
`tsx
import { useWidgetProps } from 'flick-react';interface MyWidgetProps {
message: string;
count: number;
}
export default function MyWidget() {
const { message, count } = useWidgetProps();
// message and count are properly typed!
}
``MIT