Agentic Development
Anthropic API Key
Enter your API key to start generating React components with Claude Opus 4.6. Your key is stored locally in your browser.
An AI-powered code generator that uses Claude Opus 4.6 to create React components from natural language descriptions. Generated code runs live in a jiki container with real-time preview and error overlay support.
How it works
- Token-by-token streaming from the Anthropic Messages API directly in the browser
- JSX is automatically extracted from AI responses and injected into the runtime
- Generated React components render instantly in a sandboxed iframe
- Click elements in the preview to reference them in chat
- Conversation history is stored in IndexedDB across sessions
- The error overlay catches runtime errors; ask the AI to fix them
Try it yourself
- Enter your Anthropic API key when prompted
- Describe a React component (e.g., “Create a todo list app with a dark theme”)
- Watch the code generate in real-time and the preview update automatically
- Use the inspect button to click elements and reference them for edits
- Ask for modifications (“Add a filter by status feature”)
- If an error appears, ask “Fix the error” and the AI will correct the code