![](\"https://img.youtube.com/vi/1oHSYzt9kL4/0.jpg\")
](https://www.youtube.com/watch?v=1oHSYzt9kL4)\n\n### Self-guided\n\nFirst, install the `frontlink` package:\n\n```\nnpm i frontlink\n```\n\nNext we need to wrap our components in a `FrontlinkProvider`. You can do this as far down as you need, and you may want to wait until you have known user information so you can attach auth to your URL.\n\n```tsx\nimport { FrontlinkProvider } from \"frontlink\"\n\nfunction App() {\n return (\n My room is {value}
\n}\n```\n\nWe can also used shared functions:\n\n```tsx\nimport { useSharedState, useSharedFunction } from \"frontlink\"\n\nexport default function SomeSharedComponent() {\n const { user } = getMyUser()\n\n const [value, setValue] = useSharedState(\"someRoomName\", \"my local value\")\n\n const sharedFunc = useSharedFunction(\"sharedFunc\", async (someArg) => {\n console.log(\"I did something cool (hey... who triggered this?):\", someArg)\n })\n\n return (\n <>\nMy room is {value}
\n