\n \n {title}\n \n

\n {children}\n

\n );\n}\n\nfunction ValueCard({ title, desc, Icon }) {\n return (\n \n \n \n \n \n \n {title}\n \n \n \n

{desc}

\n \n \n );\n}\n\nfunction Bullet({ children }) {\n return (\n

\n \n {children}\n

\n );\n}\n\nfunction Diagram() {\n const [highlight, setHighlight] = useState(null);\n\n const positions = useMemo(\n () => ({\n sources: { x: 80, y: 60 },\n ingest: { x: 320, y: 60 },\n kvobj: { x: 560, y: 60 },\n edge: { x: 160, y: 200 },\n cloud: { x: 480, y: 200 },\n humans: { x: 720, y: 200 },\n fabric: { x: 400, y: 140 },\n }),\n [],\n );\n\n return (\n \n \n \n Conceptual Flow\n \n \n \n

\n \n

{n.label}

\n {n.subtitle && (\n

\n {n.subtitle}\n

\n )}\n

\n {n.id === \"fabric\" && subjects}\n {n.id === \"ingest\" && replay}\n {n.id === \"kvobj\" && RAG}\n {n.id === \"edge\" && Nex}\n {n.id === \"cloud\" && LLMs}\n

\n \n \n );\n })}\n \n \n

\n Hover nodes to highlight routing paths. The fabric routes messages to\n services and stores using subjects and wildcards.\n

\n \n \n );\n}\n\nfunction ComparisonTable() {\n return (\n \n \n \n Benefits vs. Alternatives\n \n \n \n

\n \n \n \n \n \n \n \n \n \n {COMPARISON.map((row, i) => (\n \n \n \n \n \n ))}\n \n

Criteria	NATS (JetStream + Nex)	Kafka & Ecosystem
{row[0]}	{row[1]}	{row[2]}

\n \n \n );\n}\n\nfunction CoreArchitecture() {\n return (\n \n \n \n Core Architecture\n \n \n \n

\n {CORE_STEPS.map((s, idx) => (\n \n \n {idx + 1}. {s.title}\n \n \n {s.bullets.map((b, j) => {b})}\n \n \n ))}\n

\n \n \n );\n}\n\nfunction Architecture2Diagram() {\n // Layer definitions (no TypeScript types to keep this JSX-compatible)\n const topLayer = [\n {\n label: \"LLMs\",\n subtitle: \"OpenAI • Anthropic • Mistral • Local\",\n icon: Sparkles,\n },\n {\n label: \"AI Tools / Functions\",\n subtitle: \"LangChain • Microservices • Tools\",\n icon: Network,\n },\n { label: \"Connectors\", subtitle: \"RAG • Vector DBs • ETL\", icon: Layers },\n ];\n\n const middleLayer = [\n {\n label: \"Pub/Sub & Req/Rep\",\n subtitle: \"Intelligent routing\",\n icon: Globe2,\n },\n {\n label: \"KV & Object Store\",\n subtitle: \"Persistent memory\",\n icon: Database,\n },\n {\n label: \"Source & Mirror Streams\",\n subtitle: \"Data locality\",\n icon: Layers,\n },\n {\n label: \"Nex Distributed Compute\",\n subtitle: \"Colocate near data/users\",\n icon: Cpu,\n },\n ];\n\n const bottomLayer = [\n { label: \"Cloud\", subtitle: \"AWS • GCP • Azure\", icon: Globe2 },\n { label: \"Edge\", subtitle: \"Cloudflare • Akamai\", icon: Globe2 },\n {\n label: \"Far/Beyond Edge\",\n subtitle: \"IoT • Robotics • Vehicles\",\n icon: Globe2,\n },\n {\n label: \"On‑Prem / Hybrid\",\n subtitle: \"Brownfield compatible\",\n icon: Globe2,\n },\n ];\n\n // Basic geometry\n const width = 900;\n const height = 460;\n const bandPaddingX = 24;\n const bandPaddingY = 20;\n const boxWidth = 220;\n const boxHeight = 56;\n\n const topY = 80;\n const middleY = 230;\n const bottomY = 370;\n\n const xPositions = (count) => {\n const totalWidth = width - bandPaddingX * 2;\n const gap = (totalWidth - count * boxWidth) / (count - 1);\n return new Array(count).fill(0).map((_, i) =>\n bandPaddingX + i * (boxWidth + gap)\n );\n };\n\n const topX = xPositions(topLayer.length);\n const midX = xPositions(middleLayer.length);\n const botX = xPositions(bottomLayer.length);\n\n // Helper to render a labeled box\n const Box = ({ x, y, label, subtitle, Icon }) => (\n \n \n \n \n

\n {Icon && }\n

{label}

\n {subtitle && (\n

\n {subtitle}\n

\n )}\n \n \n \n );\n\n // Flow steps: simple arrows with numbered markers\n const flows = [\n {\n num: 1,\n from: { x: topX[2] + boxWidth / 2, y: topY + boxHeight },\n to: { x: midX[2] + boxWidth / 2, y: middleY },\n },\n {\n num: 2,\n from: { x: middleY, placeholder: true },\n to: { x: topY, placeholder: true },\n }, // placeholder to keep index alignment\n {\n num: 3,\n from: { x: midX[3] + boxWidth / 2, y: middleY + boxHeight },\n to: { x: botX[1] + boxWidth / 2, y: bottomY },\n },\n {\n num: 4,\n from: { x: midX[0] + boxWidth / 2, y: middleY },\n to: { x: topX[0] + boxWidth / 2, y: topY + boxHeight },\n },\n {\n num: 5,\n from: { x: midX[0] + boxWidth / 2, y: middleY },\n to: { x: topX[1] + boxWidth / 2, y: topY + boxHeight },\n },\n ];\n\n return (\n \n \n \n Architecture 2 — Three‑Tier Layout\n \n \n \n

\n \n

\n\n

\n Core Narrative\n

\n Simplicity: small Go binary with Pub/Sub, Req/Rep, KV, Object\n Store, Streams\n
Fluidity: edge↔cloud mobility, mirroring for locality
Neutrality: model/vendor/cloud agnostic

\n Flow\n

1. Data Ingest → Connectors → JetStream (source/mirror)

2. Data Augmentation → KV/Object Store for context

3. Workload Mobility → Nex near data/users (edge/cloud)

4. AI Inference → Routed to best LLM (local/hosted)

5. Result Delivery → Real‑time apps, dashboards, agents

\n \n \n );\n}\n\nfunction Hero() {\n return (\n

\n \n NATS for AI‑Powered Applications\n \n

\n A neutral, simple, and fluid data & compute fabric for model‑agnostic\n AI systems.\n

\n {VALUE_PROPS.map((v, i) => (\n \n ))}\n

\n );\n}\n\nfunction CTA() {\n return (\n \n \n

\n Next steps\n

\n Prototype locally or in Synadia Cloud · Design for neutrality · Test\n fluidity across edge/cloud.\n

\n \n \n Download Diagram\n \n

\n \n \n );\n}\n\nexport default function App() {\n const [q, setQ] = useState(\"\");\n const filtered = useMemo(\n () =>\n CORE_STEPS.filter((s) =>\n (s.title + \" \" + s.bullets.join(\" \")).toLowerCase().includes(\n q.toLowerCase(),\n )\n ),\n [q],\n );\n\n return (\n \n {/* Header */}\n

\n \n N\n

\n Neutral Data & Compute Fabric\n

\n Any model · Any cloud · Any edge\n

\n \n Simplicity\n \n \n Fluidity\n \n \n Neutrality\n \n

\n \n\n \n\n \n \n Overview\n Architecture\n Architecture 2\n Use Case\n Compare\n \n\n \n \n \n \n Vision\n \n \n \n Architect AI systems that adapt to any model, any cloud, any edge\n — while providing low‑latency, persistent, and intelligent data\n distribution. With NATS as the core transport, you get a single\n lightweight fabric for real‑time messaging, persistence,\n distributed compute, and global reach — without vendor lock‑in.\n \n \n \n \n\n \n

\n Use subjects and services to keep data/compute flows loosely\n coupled and model‑agnostic.\n

\n \n

\n \n \n

\n {(q ? filtered : CORE_STEPS).map((s, idx) => (\n \n \n \n {idx + 1}. {s.title}\n \n \n \n {s.bullets.map((b, j) => {b})}\n \n \n ))}\n

\n \n \n \n\n \n \n \n \n AI‑Enhanced Field Service\n \n \n \n {USE_CASE.map((b, i) => {b})}\n \n \n \n \n\n \n \n \n\n \n \n \n \n Notes: Replace placeholders with your own benchmarks or TCO\n analysis. Keep the narrative focused on simplicity, fluidity, and\n neutrality.\n \n \n \n \n\n \n \n );\n}","2025-08-08T13:19:13.487Z","untitled-2280","https://www.val.town/x/connnolly/untitled-2280/code/","connnolly",[351,354,357,360,363],{"_127":352,"_129":353,"_131":22},152," \"Connectors stream data from IoT/APIs/DBs into JetStream.\",",{"_127":355,"_129":356,"_131":22},153," \"Persist to Streams + mirror across regions for locality.\",",{"_127":358,"_129":359,"_131":138},154," \"Use KV/Object Store for embeddings & RAG artifacts.\",",{"_127":361,"_129":362,"_131":22},155," ],",{"_127":364,"_129":365,"_131":22},156," },",{"_104":367,"_106":368,"_108":369,"_110":161,"_112":162,"_114":370,"_116":371,"_118":372,"_120":373,"_122":-5,"_123":-5,"_124":374,"_145":146},"0198864f-7cdf-71df-890a-83b459592d91","https://www.val.town/x/charmaine/blog-aug7/code/utils/get-old-posts.ts","94794120-73d0-11f0-9d95-0224a6c84d84","2025-08-07T20:53:32.958Z","blog-aug7","https://www.val.town/x/charmaine/blog-aug7/code/","charmaine",[375,376,377,378,379],{"_127":169,"_129":170,"_131":22},{"_127":172,"_129":173,"_131":22},{"_127":175,"_129":176,"_131":138},{"_127":178,"_129":179,"_131":22},{"_127":181,"_129":182,"_131":22},{"_104":381,"_106":382,"_108":383,"_110":161,"_112":162,"_114":384,"_116":385,"_118":386,"_120":373,"_122":-5,"_123":-5,"_124":387,"_145":146},"0198861c-26eb-77c2-9201-8d1d76a1df8e","https://www.val.town/x/charmaine/blog-aug-7/code/utils/get-old-posts.ts","bf2ab0dc-73c8-11f0-a898-0224a6c84d84","2025-08-07T19:57:28.609Z","blog-aug-7","https://www.val.town/x/charmaine/blog-aug-7/code/",[388,389,390,391,392],{"_127":169,"_129":170,"_131":22},{"_127":172,"_129":173,"_131":22},{"_127":175,"_129":176,"_131":138},{"_127":178,"_129":179,"_131":22},{"_127":181,"_129":182,"_131":22},"projectResults",[395,406,412,420,425],{"_104":396,"_106":397,"_110":398,"_120":166,"_122":399,"_123":-5,"_400":-5,"_114":401,"_402":403,"_404":405},"7f8a8de0-da70-11ef-8028-e6cdfca9ef9f","https://www.val.town/x/tmcw/surprisingEmbeddings/code/","surprisingEmbeddings","Visualizing embedding distances","forked_branch_id","2025-02-06T17:19:17.875Z","user_id","19892fed-baf3-41fb-a5cc-96c80e95edec","matchCount",2,{"_104":407,"_106":408,"_110":409,"_120":121,"_122":-5,"_123":-5,"_400":-5,"_114":410,"_402":411,"_404":146},"da2fae7c-252c-11f0-8a67-569c3dd06744","https://www.val.town/x/maxm/emojiVectorEmbeddings/code/","emojiVectorEmbeddings","2024-12-08T16:19:45.158Z","418c1e39-eb48-4f2f-8c97-122ece94631c",{"_104":413,"_106":414,"_110":415,"_120":416,"_122":-5,"_123":-5,"_400":417,"_114":418,"_402":419,"_404":405},"5542fed6-26de-11f0-a5b3-569c3dd06744","https://www.val.town/x/janpaul123/blogPostEmbeddingsDimensionalityReduction/code/","blogPostEmbeddingsDimensionalityReduction","janpaul123","56b10bfa-26de-11f0-a5b3-569c3dd06744","2024-06-18T14:32:17.726Z","2ce21bab-39d2-4fd1-881a-02dc5ce8a4af",{"_104":421,"_106":422,"_110":423,"_120":416,"_122":-5,"_123":-5,"_400":-5,"_114":424,"_402":419,"_404":405},"56b0ac3c-26de-11f0-a5b3-569c3dd06744","https://www.val.town/x/janpaul123/compareEmbeddings/code/","compareEmbeddings","2024-06-18T13:37:13.418Z",{"_104":426,"_106":427,"_110":428,"_120":429,"_122":-5,"_123":-5,"_400":-5,"_114":430,"_402":431,"_404":405},"095d0c68-2793-11f0-9d52-569c3dd06744","https://www.val.town/x/yawnxyz/embeddingsSearchExample/code/","embeddingsSearchExample","yawnxyz","2024-06-02T21:09:30.618Z","a8270e74-6479-475a-8025-9b69544ee0e7","userResults",[],"docResults",[436,553],{"_106":437,"_112":438,"_439":440,"_441":442,"_449":450,"_474":475,"_503":504,"_505":438,"_506":507,"_508":509,"_510":511},"https://docs.val.town/guides/embed/","Embedding Vals in other sites. Copy page Copy page. Copy this page as Markdown for LLMs. View as Markdown View this page as plain text. Open in ChatGPT Ask questions about this page. Vals are made to be shared, and not just on Val Town! Public vals can embedded using iframes on other websites. Embedding an existing val. Section titled “Embedding an existing val” You can embed any public or unlisted val on another site by copying the embed URL from the file menu: Embedding in WYSIWYG editors. Section titled “Embedding in WYSIWYG editors” When writing for the web, lots of people use WYSIWYG editors, such as those in Wordpress or Notion. In tools with a simple writing experience, you can paste your embed URL straight in. Here’s how it looks when pasted into Notion: In other editors, you might have to create an “embed” and paste the URL into the form that the tool provides. Embedding in HTML. Section titled “Embedding in HTML” For sites that don’t provide an editing experience as smooth as Notion or Wordpress, you can embed your val using an iframe element. Here’s an example, using a web page created by a val that embeds itself: And here’s the final web page: https://docs-embed.val.run/ Embedding a new val template. Section titled “Embedding a new val template” In some scenarios, especially those where you’re providing a guide or a post that the reader is following along with, it’s useful to provide a template for your readers to remix. You can do that using the https://val.town/embed/new endpoint. To generate a new val: Visit https://val.town/embed/new. Type the code that you want to appear. Copy the new URL of the page you are on. Note: anyone can see the embed and the code, but only logged in users will be able to run it. Here’s an example: The URL contains the fragment of code that populates the embed. For example, for the embed above, the URL you would use is https://www.val.town/embed/new?code=const+myNewEmbeddedVal+%3D+The+time+this+ran+was+%24{new+Date().toLocaleTimeString()}%3B.","word_count",331,"meta",{"_443":444,"_445":446,"_447":448},"image","/_astro/copy.DPF5QkrR_Z9Le6A.webp","image_alt","Copy Embed","title","Embedding Vals in other sites","anchors",[451,457,462,467,470],{"_452":453,"_104":454,"_455":448,"_456":32},"element","h1","_top","text","location",{"_452":458,"_104":459,"_455":460,"_456":461},"h2","embedding-an-existing-val","Embedding an existing val",54,{"_452":463,"_104":464,"_455":465,"_456":466},"h3","embedding-in-wysiwyg-editors","Embedding in WYSIWYG editors",84,{"_452":463,"_104":468,"_455":469,"_456":364},"embedding-in-html","Embedding in HTML",{"_452":458,"_104":471,"_455":472,"_456":473},"embedding-a-new-val-template","Embedding a new val template",208,"weighted_locations",[476,480,483,486,488,491,493,494,496,497,499],{"_477":296,"_478":479,"_456":32},"weight","balanced_score",25095.023,{"_477":146,"_478":481,"_456":482},512.1433,48,{"_477":484,"_478":485,"_456":461},6,18437.16,{"_477":146,"_478":481,"_456":487},60,{"_477":489,"_478":490,"_456":466},5,12803.584,{"_477":146,"_478":481,"_456":492},90,{"_477":489,"_478":490,"_456":364},{"_477":146,"_478":481,"_456":495},161,{"_477":484,"_478":485,"_456":473},{"_477":146,"_478":481,"_456":498},215,{"_477":500,"_478":501,"_456":502},0.041666666666666664,0.88913774,330,"locations",[32,482,461,487,466,492,364,495,473,498,502],"raw_content","raw_url","/guides/embed/","excerpt","Embedding Vals in other sites. Copy page Copy page. Copy this page as Markdown for LLMs. View as Markdown View this page as plain text. Open in ChatGPT Ask questions","sub_results",[512,520,528,536,544],{"_447":448,"_106":513,"_514":515,"_474":516,"_503":519,"_508":509},"https://docs.val.town/guides/embed/#_top","anchor",{"_452":453,"_104":454,"_455":448,"_456":32},[517,518],{"_477":296,"_478":479,"_456":32},{"_477":146,"_478":481,"_456":482},[32,482],{"_447":460,"_106":521,"_514":522,"_474":523,"_503":526,"_508":527},"https://docs.val.town/guides/embed/#embedding-an-existing-val",{"_452":458,"_104":459,"_455":460,"_456":461},[524,525],{"_477":484,"_478":485,"_456":461},{"_477":146,"_478":481,"_456":487},[461,487],"Embedding an existing val. Section titled “Embedding an existing val” You can embed any public or unlisted val on another site by copying the embed URL from the file menu:",{"_447":465,"_106":529,"_514":530,"_474":531,"_503":534,"_508":535},"https://docs.val.town/guides/embed/#embedding-in-wysiwyg-editors",{"_452":463,"_104":464,"_455":465,"_456":466},[532,533],{"_477":489,"_478":490,"_456":466},{"_477":146,"_478":481,"_456":492},[466,492],"Embedding in WYSIWYG editors. Section titled “Embedding in WYSIWYG editors” When writing for the web, lots of people use WYSIWYG editors, such as those in Wordpress or Notion. In tools",{"_447":469,"_106":537,"_514":538,"_474":539,"_503":542,"_508":543},"https://docs.val.town/guides/embed/#embedding-in-html",{"_452":463,"_104":468,"_455":469,"_456":364},[540,541],{"_477":489,"_478":490,"_456":364},{"_477":146,"_478":481,"_456":495},[364,495],"Embedding in HTML. Section titled “Embedding in HTML” For sites that don’t provide an editing experience as smooth as Notion or Wordpress, you can embed your val using an iframe",{"_447":472,"_106":545,"_514":546,"_474":547,"_503":551,"_508":552},"https://docs.val.town/guides/embed/#embedding-a-new-val-template",{"_452":458,"_104":471,"_455":472,"_456":473},[548,549,550],{"_477":484,"_478":485,"_456":473},{"_477":146,"_478":481,"_456":498},{"_477":500,"_478":501,"_456":502},[473,498,502],"Embedding a new val template. Section titled “Embedding a new val template” In some scenarios, especially those where you’re providing a guide or a post that the reader is following",{"_106":554,"_112":555,"_439":556,"_441":557,"_449":560,"_474":599,"_503":602,"_505":603,"_506":604,"_508":605,"_510":606},"https://docs.val.town/integrations/discord/how-to-make-a-discord-bot-hosted-24-7-for-free-in-/","Discord bot. Copy page Copy page. Copy this page as Markdown for LLMs. View as Markdown View this page as plain text. Open in ChatGPT Ask questions about this page. Introduction. Section titled “Introduction” By the end of this tutorial you will have a Discord bot hosted 24/7, for free, forever, on Val Town, that responds to a basic /ping Slash Command. Val Town is a social website to write, and deploy JavaScript from the browser. No prior coding experience required. The vast majority of this tutorial is creating the bot on Discord and pasting your keys into Val Town. The actual coding parts are just clicking Run two times to remix two pieces of code to your Val Town account. Note. 💡 If you get stuck, come join us in the Val Town Discord! Video Tutorial. Section titled “Video Tutorial” If you prefer videos, here’s this same tutorial in a 3-minute YouTube video. https://youtu.be/yYXmInPSSfg. Step 1: Create a Discord app. Section titled “Step 1: Create a Discord app” Go to the Discord Developer Portal and select “New Application” in the top right. Enter a name for your Bot, accept the terms and press Create. Step 2: Add the bot to your server. Section titled “Step 2: Add the bot to your server” To invite your new bot to your server, you need to generate a link to click on. Head to the Oauth2 > URL Generator page. Select the bot scope, then the Send Messages permission. Copy the URL at the bottom of the page and paste it into a new browser tab. Click through the steps until you’re prompted to choose your server and press Continue. Press Authorize. 🎉 Your bot is now a member of your server! Now let’s get it to respond to Slash Commands. Step 3: Login to Val Town. Section titled “Step 3: Login to Val Town” Val Town is a social website to write, run, and host JavaScript. You can create APIs, scheduled functions, email yourself, and persist small pieces of data — all from the browser and instantly deployed. There is a generous free plan, and no credit card required. Login or create an account. Step 4: Save bot secrets. Section titled “Step 4: Save bot secrets” Go to the “General Information” page. Copy your Application ID. Go to val.town/settings/environment-variables. Create a new environment variable called discordAppId and paste in the value. Copy your Public Key, saving it as discordPublicKey. Go to the Bot page. Click Reset Token and accept the warning. Copy and paste it in val.town/settings/environment-variables as discordBotToken. Step 5: Register a new Slash Command. Section titled “Step 5: Register a new Slash Command” The embedded code below should have your name in the top-left corner. If you see anonymous, refresh this page. If you still see anonymous, ensure you’re logged into Val Town. Press Run to add the /ping command to your bot. Register /ping commandRun in Val Town ↗ import { registerDiscordSlashCommand } from \"https://esm.town/v/neverstew/registerDiscordSlashCommand\"; const result = await registerDiscordSlashCommand( Deno.env.get(\"discordAppId\"), Deno.env.get(\"discordBotToken\"), { name: \"ping\", description: \"Say hi to your bot\", }, ); export const registerDiscordCommand = result.json(); Step 6: Listen for Slash Commands. Section titled “Step 6: Listen for Slash Commands” Press Run to listen for Slash Commands and reply. Next to your val’s name, click 🔒 > Unlisted. In the val above, in the bottom-left corner of the val, click Script and change it to HTTP. Click on the URL at the bottom of that val that looks like https://username-handleDiscordInteraction.web.val.run. Visit the General Information page for your bot and paste your copied endpoint into INTERACTIONS ENDPOINT URL and click Save Changes. 💬 Try it out. Section titled “💬 Try it out” Refresh Discord and try out your bot using /ping. Further Directions. Section titled “Further Directions” Now that you have a basic Discord Bot setup, you’ll want to customize it to do exactly what you want. You’ll probably want to: Register a new Slash Command. Connect your bot to APIs like OpenAI’s GPT or Dall-E. Come join us in the Val Town Discord if you get stuck, have questions, or want to show off your cool new bot!",692,{"_443":558,"_445":558,"_447":559},"https://i.postimg.cc/bw5Xj8Rd/ping.gif","Discord bot",[561,562,565,568,571,575,579,583,587,591,595],{"_452":453,"_104":454,"_455":559,"_456":32},{"_452":458,"_104":563,"_455":564,"_456":238},"introduction","Introduction",{"_452":458,"_104":566,"_455":567,"_456":291},"video-tutorial","Video Tutorial",{"_452":458,"_104":569,"_455":570,"_456":361},"step-1-create-a-discord-app","Step 1: Create a Discord app",{"_452":458,"_104":572,"_455":573,"_456":574},"step-2-add-the-bot-to-your-server","Step 2: Add the bot to your server",195,{"_452":458,"_104":576,"_455":577,"_456":578},"step-3-login-to-val-town","Step 3: Login to Val Town",299,{"_452":458,"_104":580,"_455":581,"_456":582},"step-4-save-bot-secrets","Step 4: Save bot secrets",363,{"_452":458,"_104":584,"_455":585,"_456":586},"step-5-register-a-new-slash-command","Step 5: Register a new Slash Command",428,{"_452":458,"_104":588,"_455":589,"_456":590},"step-6-listen-for-slash-commands","Step 6: Listen for Slash Commands",520,{"_452":458,"_104":592,"_455":593,"_456":594},"-try-it-out","💬 Try it out",605,{"_452":458,"_104":596,"_455":597,"_456":598},"further-directions","Further Directions",624,[600],{"_477":146,"_478":481,"_456":601},445,[601],"Discord bot. Copy page Copy page. Copy this page as Markdown for LLMs. View as Markdown View this page as plain text. Open in ChatGPT Ask questions about this page. Introduction. Section titled “Introduction” By the end of this tutorial you will have a Discord bot hosted 24/7, for free, forever, on Val Town, that responds to a basic /ping Slash Command. Val Town is a social website to write, and deploy JavaScript from the browser. No prior coding experience required. The vast majority of this tutorial is creating the bot on Discord and pasting your keys into Val Town. The actual coding parts are just clicking Run two times to remix two pieces of code to your Val Town account. Note. 💡 If you get stuck, come join us in the Val Town Discord! Video Tutorial. Section titled “Video Tutorial” If you prefer videos, here’s this same tutorial in a 3-minute YouTube video. https://youtu.be/yYXmInPSSfg. Step 1: Create a Discord app. Section titled “Step 1: Create a Discord app” Go to the Discord Developer Portal and select “New Application” in the top right. Enter a name for your Bot, accept the terms and press Create. Step 2: Add the bot to your server. Section titled “Step 2: Add the bot to your server” To invite your new bot to your server, you need to generate a link to click on. Head to the Oauth2 > URL Generator page. Select the bot scope, then the Send Messages permission. Copy the URL at the bottom of the page and paste it into a new browser tab. Click through the steps until you’re prompted to choose your server and press Continue. Press Authorize. 🎉 Your bot is now a member of your server! Now let’s get it to respond to Slash Commands. Step 3: Login to Val Town. Section titled “Step 3: Login to Val Town” Val Town is a social website to write, run, and host JavaScript. You can create APIs, scheduled functions, email yourself, and persist small pieces of data — all from the browser and instantly deployed. There is a generous free plan, and no credit card required. Login or create an account. Step 4: Save bot secrets. Section titled “Step 4: Save bot secrets” Go to the “General Information” page. Copy your Application ID. Go to val.town/settings/environment-variables. Create a new environment variable called discordAppId and paste in the value. Copy your Public Key, saving it as discordPublicKey. Go to the Bot page. Click Reset Token and accept the warning. Copy and paste it in val.town/settings/environment-variables as discordBotToken. Step 5: Register a new Slash Command. Section titled “Step 5: Register a new Slash Command” The embedded code below should have your name in the top-left corner. If you see anonymous, refresh this page. If you still see anonymous, ensure you’re logged into Val Town. Press Run to add the /ping command to your bot. Register /ping commandRun in Val Town ↗ import { registerDiscordSlashCommand } from \"https://esm.town/v/neverstew/registerDiscordSlashCommand\"; const result = await registerDiscordSlashCommand( Deno.env.get(\"discordAppId\"), Deno.env.get(\"discordBotToken\"), { name: \"ping\", description: \"Say hi to your bot\", }, ); export const registerDiscordCommand = result.json(); Step 6: Listen for Slash Commands. Section titled “Step 6: Listen for Slash Commands” Press Run to listen for Slash Commands and reply. Next to your val’s name, click 🔒 > Unlisted. In the val above, in the bottom-left corner of the val, click Script and change it to HTTP. Click on the URL at the bottom of that val that looks like https://username-handleDiscordInteraction.web.val.run. Visit the General Information page for your bot and paste your copied endpoint into INTERACTIONS ENDPOINT URL and click Save Changes. 💬 Try it out. Section titled “💬 Try it out” Refresh Discord and try out your bot using /ping. Further Directions. Section titled “Further Directions” Now that you have a basic Discord Bot setup, you’ll want to customize it to do exactly what you want. You’ll probably want to: Register a new Slash Command. Connect your bot to APIs like OpenAI’s GPT or Dall-E. Come join us in the Val Town Discord if you get stuck, have questions, or want to show off your cool new bot!","/integrations/discord/how-to-make-a-discord-bot-hosted-24-7-for-free-in-/","Register a new Slash Command. Section titled “Step 5: Register a new Slash Command” The embedded code below should have your name in the top-left corner. If you see anonymous,",[607],{"_447":585,"_106":608,"_514":609,"_474":610,"_503":612,"_508":613},"https://docs.val.town/integrations/discord/how-to-make-a-discord-bot-hosted-24-7-for-free-in-/#step-5-register-a-new-slash-command",{"_452":458,"_104":584,"_455":585,"_456":586},[611],{"_477":146,"_478":481,"_456":601},[601],"Step 5: Register a new Slash Command. Section titled “Step 5: Register a new Slash Command” The embedded code below should have your name in the top-left corner. If you","totalCount","paginationCount","totalFileResults",127,"totalProjectResults","totalUserResults","totalDocResults","executionTimeMs",1697,"results",{"_101":102,"_393":394,"_432":433,"_434":435,"_616":617,"_618":296,"_619":32,"_620":405,"_94":146,"_625":626,"_627":146,"_628":100,"_621":622},"pageSize",10,"totalPages","resultType","actionData","errors"]

Search

Docs2

Docs
2