|
| 1 | +--- |
| 2 | +title: AI-powered component creation |
| 3 | +description: Use Claude or Cursor to create one-shot components with minimal prompting |
| 4 | +--- |
| 5 | +import { Callout } from 'fumadocs-ui/components/callout'; |
| 6 | +import { DocsPage } from 'fumadocs-ui/page'; |
| 7 | + |
| 8 | + |
| 9 | +The WAVS Foundry Template contains built-in AI rulefiles for creating "one-shot" components with minimal prompting in Cursor or Claude Code. |
| 10 | + |
| 11 | +These rulefiles are an experimental feature and may not work as expected every time. Components created with AI should not be used in production without thorough review and testing. |
| 12 | + |
| 13 | +<Callout title="LLM resources" type="info"> |
| 14 | + For more information on AI tools and AI-accessible documentation, visit the [LLM resources page](/resources/llms). |
| 15 | +</Callout> |
| 16 | + |
| 17 | +## Claude Code |
| 18 | + |
| 19 | +- Follow the [Claude Code installation instructions](https://docs.anthropic.com/en/docs/claude-code/getting-started) to install Claude Code and link your account. |
| 20 | +- The Claude rulefile is `claude.md` and contains instructions for Claude on how to create a component. |
| 21 | +- Learn more about Claude rulefiles: https://docs.anthropic.com/en/docs/claude-code/memory |
| 22 | + |
| 23 | +## Cursor |
| 24 | + |
| 25 | +- Download Cursor: https://www.cursor.com/downloads |
| 26 | +- The Cursor rulefiles are located in the `.cursor/rules` directory. |
| 27 | +- When using Cursor, always attach the `component-rules.mdc` file to the chat with your prompt. |
| 28 | +- Learn more about Cursor rulefiles: https://docs.cursor.com/context/rules |
| 29 | + |
| 30 | +## Using AI to create components |
| 31 | + |
| 32 | +1. Clone the [WAVS Foundry Template](https://github.com/Lay3rLabs/wavs-foundry-template) and follow the system setup requirements in the README. |
| 33 | + |
| 34 | +```sh |
| 35 | +git clone https://github.com/Lay3rLabs/wavs-foundry-template.git |
| 36 | +cd wavs-foundry-template |
| 37 | +git checkout main |
| 38 | +# Follow the system setup requirements in the README. |
| 39 | +``` |
| 40 | + |
| 41 | +2. Open Claude Code or Cursor in the root of the template. |
| 42 | + |
| 43 | +```sh |
| 44 | +claude |
| 45 | +# or |
| 46 | +cursor . |
| 47 | +``` |
| 48 | + |
| 49 | +<Callout title="Sandboxed Claude Code" type="info"> |
| 50 | + |
| 51 | +You can run a sandboxed instance of [Claude Code](https://docs.anthropic.com/en/docs/agents-and-tools/claude-code/overview) in a Docker container that only has access to this project's files by running the following command from the root of the project: |
| 52 | + |
| 53 | +```bash docci-ignore |
| 54 | +npm run claude-code |
| 55 | +# or with no restrictions (--dangerously-skip-permissions) |
| 56 | +npm run claude-code:unrestricted |
| 57 | +``` |
| 58 | + |
| 59 | +</Callout> |
| 60 | + |
| 61 | +3. Enter your prompt in the agent chat. You can use the following examples as a starting point, or you can create your own prompt. |
| 62 | + |
| 63 | +<Callout title="Attaching rulefiles" type="warn"> |
| 64 | +If you are using cursor, always attach `component-rules.mdc` file to the chat with your prompt. |
| 65 | + |
| 66 | +``` |
| 67 | +@component-rules.mdc <your prompt> |
| 68 | +``` |
| 69 | + |
| 70 | +</Callout> |
| 71 | + |
| 72 | +### Prompt examples |
| 73 | + |
| 74 | +These simple examples are provided to get you started. |
| 75 | + |
| 76 | +#### API component |
| 77 | + |
| 78 | +You can make a very simple prompt to create a component that can bring API responses verifiably onchain by including the API endpoint: |
| 79 | + |
| 80 | +``` |
| 81 | +Let's make a component that takes the input of a zip code, queries the openbrewerydb, |
| 82 | +and returns the breweries in the area. |
| 83 | +@https://api.openbrewerydb.org/v1/breweries?by_postal=92101&per_page=3 |
| 84 | +``` |
| 85 | + |
| 86 | +#### Contract balance component |
| 87 | + |
| 88 | +You can also make components that interact with the blockchain: |
| 89 | + |
| 90 | +``` |
| 91 | +I want to build a new component that takes the input of a wallet address, |
| 92 | +queries the usdt contract, and returns the balance of that address. |
| 93 | +``` |
| 94 | + |
| 95 | +#### Verifiable AI component |
| 96 | + |
| 97 | +``` |
| 98 | +Please make a component that takes a prompt as input, sends an api request to OpenAI, |
| 99 | +and returns the response. |
| 100 | +
|
| 101 | + Use this api structure: |
| 102 | + { |
| 103 | + "seed": $SEED, |
| 104 | + "model": "gpt-4o", |
| 105 | + "messages": [ |
| 106 | + {"role": "system", "content": "You are a helpful assistant."}, |
| 107 | + {"role": "user", "content": "<PROMPT>"} |
| 108 | + ] |
| 109 | + } |
| 110 | +
|
| 111 | +My api key is WAVS_ENV_OPENAI_KEY in my .env file. |
| 112 | +``` |
| 113 | + |
| 114 | +You'll need an [OPENAI API account and key](https://platform.openai.com/login) to use this prompt. The agent will include your API key in the component as a [private variable](./components/variables). |
| 115 | + |
| 116 | +Make sure to include your API key in a `.env` file: |
| 117 | + |
| 118 | +```sh |
| 119 | +# copy the .env.example file |
| 120 | +cp .env.example .env |
| 121 | +# place your key in .env (must be prefixed with WAVS_ENV_) |
| 122 | +WAVS_ENV_OPENAI_KEY=your_api_key |
| 123 | +``` |
| 124 | + |
| 125 | +This example utilizes the OpenAI API with a [seed](https://platform.openai.com/docs/advanced-usage#reproducible-outputs) to make the response more deterministic. Please note that OpenAI models are not guaranteed to be 100% deterministic. This example is for demonstration purposes and should not be used in production. |
| 126 | + |
| 127 | +## Component creation process |
| 128 | + |
| 129 | +4. After receiving the prompt, the agent will start creating your component. Review the agent's work and accept changes carefully. Make sure to double check what the agent is doing and be safe about accepting changes. |
| 130 | + |
| 131 | +5. The agent will start by planning its component and will create a `plan.md` file. The agent will then make a new component and files according to this plan. |
| 132 | + |
| 133 | +6. The agent will test its component for errors by running validation tests using `make validate-component COMPONENT=your-component`. |
| 134 | + |
| 135 | +7. The agent may need to make changes after running the Validation tests. After making changes, the agent will build the component using `WASI_BUILD_DIR=components/my-component make wasi-build`. |
| 136 | + |
| 137 | +8. After successfully building your component, it's time to test it. The following command can be used to test your component logic without deploying WAVS. Make sure to replace the placeholders with the correct inputs. |
| 138 | + |
| 139 | +```sh |
| 140 | +# Run this command to build the component: |
| 141 | +WASI_BUILD_DIR=components/openai-response make wasi-build |
| 142 | + |
| 143 | +# Once built, test it with: |
| 144 | +export COMPONENT_FILENAME=openai_response.wasm |
| 145 | +export INPUT_DATA="Only respond with yes or no: Is AI beneficial to the world?" |
| 146 | +make wasi-exec |
| 147 | +``` |
| 148 | + |
| 149 | +The agent may try to run the `make wasi-exec` command themselves. You should prompt the agent to give you the command instead, as it can't run the command without permissions. |
| 150 | + |
| 151 | + |
| 152 | +9. Your component should execute and return a response. If there are any errors, share them with the agent for troubleshooting. |
| 153 | + |
| 154 | +If you have any questions, join the WAVS DEVS Telegram channel: https://t.me/layer_xyz/818 |
| 155 | + |
| 156 | +## Tips for working with AI agents |
| 157 | + |
| 158 | +- While this repo contains rulefiles with enough context for creating simple components, coding agents are unpredictable and may inevitably run into problems. |
| 159 | +- Feel free to update the rulefiles for your specific purposes or if you run into regular errors. |
| 160 | +- Coding agents can sometimes try to over-engineer their fixes for errors. If you feel it is not being productive, it may be beneficial to start fresh. You may need to adjust your prompt. |
| 161 | +- If you are building a complex component, it may be helpful to have the agent build a simple component first and then expand upon it. |
| 162 | +- The agent may try to fix warnings unnecessarily. You can tell the agent to ignore minor warnings and any errors found in `bindings.rs` (it is auto-generated). |
| 163 | + |
| 164 | +### Prompting |
| 165 | + |
| 166 | +This repo is designed to be used with short prompts for simple components. However, often, coding agents will do better with more context. |
| 167 | + |
| 168 | +When creating a prompt, consider the following: |
| 169 | + |
| 170 | +- Agents work best with short, clear instructions. |
| 171 | +- Provide relevant documentation (preferably as an `.md` file or other ai-digestible content). |
| 172 | +- Provide endpoints. |
| 173 | +- You may need to provide API response structure if the agent is not understanding responses. |
| 174 | +- Be specific about what you want the agent to build. |
| 175 | +- Agents work systematically to build components. For best results, agent should make a plan before they start building. |
| 176 | +- Be patient. Coding agents are not perfect. They may make mistakes. |
| 177 | + |
| 178 | +## Troubleshooting |
| 179 | + |
| 180 | +- You can ask the agent to fix errors it may not be able to catch when executing components. Make sure to give the agent full context of the error. |
| 181 | +- LLMs can be unpredictable. Minimal prompts provide a lot of room for creativity/error. If the agent is not able to fix an error after trying, sometimes deleting the component, clearing the history, and starting fresh can help. |
| 182 | +- The agent may try to edit the bindings.rs file to "fix" it. The agent never needs to do this, and you should tell the agent to not do this. |
| 183 | +- The agent is supposed to provide you with the `make wasi-exec` command. Sometimes it will try to run this itself and it will fail. Instead, ask it to give you the command. |
| 184 | +- When copying and pasting the full `make wasi-exec` command, be careful with line breaks. You may need to reformat long lines to avoid breaking the command. |
0 commit comments