This is the Preview
\n );\n }\n\n handleAPI(api) {\n // no need to do anything for now.\n }\n}\n```\n\nThen you need to initialize the UI like this:\n\n```js\nimport { document } from 'global';\nimport renderStorybookUI from '@storybook/ui';\nimport Provider from './provider';\n\nconst roolEl = document.getElementById('root');\nrenderStorybookUI(roolEl, new Provider());\n```\n\nThen you'll get a UI like this:\n\n\n\n> **See the [example](./example) app for a complete example.**\n\n## API\n\n### .setOptions()\n\n```js\nimport { Provider } from '@storybook/ui';\n\nclass ReactProvider extends Provider {\n handleAPI(api) {\n api.setOptions({\n // see available options in\n // https://github.com/storybooks/storybook/tree/master/addons/options#getting-started\n });\n }\n};\n```\n\n## .setStories()\n\nThis API is used to pass the`kind` and `stories` list to storybook-ui.\n\n```js\nimport { Provider } from '@storybook/ui';\n\nclass ReactProvider extends Provider {\n handleAPI(api) {\n api.setStories([\n {\n kind: 'Component 1',\n stories: ['State 1', 'State 2']\n },\n\n {\n kind: 'Component 2',\n stories: ['State a', 'State b']\n }\n ]);\n }\n}\n```\n\n## .onStory()\n\nYou can use to listen to the story change and update the preview.\n\n```js\nimport { Provider } from '@storybook/ui';\n\nclass ReactProvider extends Provider {\n handleAPI(api) {\n api.onStory((kind, story) => {\n this.globalState.emit('change', kind, story);\n });\n }\n}\n```\n\n## Hacking Guide\n\nIf you like to add features to the Storybook UI or fix bugs, this is the guide you need to follow.\n\nFirst of all, you can need to start the [example](./example) app to see your changes.\n\n### The App\n\nThis is a Redux app written based on the [Mantra architecture](https://github.com/kadirahq/mantra/).\nIt's a set of modules. You can see those modules at `src/modules` directory.\n\n### Changing UI\n\nIf you like to change the appearance of the UI, you need to look at the `ui` module. Simply change components at the `components` directory for simple UI tweaks.\n\nYou can also change containers(which are written with [react-komposer](https://github.com/kadirahq/react-komposer/)) to add more data from the redux state.\n\n### Redux\n\nEach module has a it's own set of reducers at `