\n \n \n Tip:\n \n Run `gradio cc --help` to get a help menu of all available commands. There are some commands that are not covered in this guide. You can also append `--help` to any command name to bring up a help page for that command, e.g. `gradio cc create --help`.\n
\n \n\n## 1. create\n\nBootstrap a new template by running the following in any working directory:\n\n```bash\ngradio cc create MyComponent --template SimpleTextbox\n```\n\nInstead of `MyComponent`, give your component any name.\n\nInstead of `SimpleTextbox`, you can use any Gradio component as a template. `SimpleTextbox` is actually a special component that a stripped-down version of the `Textbox` component that makes it particularly useful when creating your first custom component.\nSome other components that are good if you are starting out: `SimpleDropdown`, `SimpleImage`, or `File`.\n\n \n \n Tip:\n \n Run `gradio cc show` to get a list of available component templates.\n
\n \n\nThe `create` command will:\n\n1. Create a directory with your component's name in lowercase with the following structure:\n```directory\n- backend/ <- The python code for your custom component\n- frontend/ <- The javascript code for your custom component\n- demo/ <- A sample app using your custom component. Modify this to develop your component!\n- pyproject.toml <- Used to build the package and specify package metadata.\n```\n\n2. Install the component in development mode\n\nEach of the directories will have the code you need to get started developing!\n\n## 2. dev\n\nOnce you have created your new component, you can start a development server by `entering the directory` and running\n\n```bash\ngradio cc dev\n```\n\nYou'll see several lines that are printed to the console.\nThe most important one is the one that says:\n\n> Frontend Server (Go here): http://localhost:7861/\n\nThe port number might be different for you.\nClick on that link to launch the demo app in hot reload mode.\nNow, you can start making changes to the backend and frontend you'll see the results reflected live in the sample app!\nWe'll go through a real example in a later guide.\n\n \n \n Tip:\n \n You don't have to run dev mode from your custom component directory. The first argument to `dev` mode is the path to the directory. By default it uses the current directory.\n
\n \n\n## 3. build\n\nOnce you are satisfied with your custom component's implementation, you can `build` it to use it outside of the development server.\n\nFrom your component directory, run:\n\n```bash\ngradio cc build\n```\n\nThis will create a `tar.gz` and `.whl` file in a `dist/` subdirectory.\nIf you or anyone installs that `.whl` file (`pip install\n \n \n Tip:\n \n If you want to start off from someone else's custom component see this [guide](./frequently-asked-questions#do-i-always-need-to-start-my-component-from-scratch).\n
\n \n", "tags": [], "spaces": [], "url": "/guides/custom-components-in-five-minutes/", "contributor": null}}