Civra

Appearance

AI Chat Modes ​

Master Civra's intelligent chat system to build Web3 applications efficiently.

Overview ​

Civra's AI chat uses Claude Sonnet 4 and Opus 4.1 models, specifically trained for Web3 development. The chat understands blockchain concepts, smart contracts, and Web3 best practices.

Chat Interface ​

Starting a Conversation ​

  1. Click New Project
  2. Describe what you want to build
  3. AI generates complete application
  4. Continue refining through chat

Chat Features ​

Real-Time Streaming

  • See AI "thinking" live
  • Code appears as it's generated
  • Cancel mid-generation if needed

Context Awareness

  • Remembers entire conversation
  • Understands your codebase
  • References previous changes

File Awareness

  • Knows all project files
  • Can modify specific files
  • Maintains code consistency

How the AI Works ​

Generation Process ​

Your Prompt
    ↓
AI Analysis (understanding requirements)
    ↓
Planning (architecture decisions)
    ↓
Code Generation (writing code)
    ↓
File Creation (organizing files)
    ↓
Dependencies (installing packages)
    ↓
Server Start (running preview)
    ↓
Preview Ready ✓

Progress Tracking ​

Watch generation progress in real-time:

Setup - Creating project structure

○○○○○○ Initializing...

Analyze - Understanding requirements

●○○○○○ Analyzing your request...

Plan - Designing architecture

●●○○○○ Planning implementation...

Generate - Writing code

●●●○○○ Generating code...

Install - Installing dependencies

●●●●○○ Installing packages...

Server - Starting dev server

●●●●●○ Starting server...

Ready - Preview available

●●●●●● Preview ready!

Chat Capabilities ​

1. Code Generation ​

Generate complete Web3 applications:

Create an NFT marketplace with:
- ERC-721 contract
- Minting page
- Listing/buying functionality
- Wallet connection
- IPFS integration

AI Generates:

  • Smart contracts (contracts/NFTMarketplace.sol)
  • React components (components/MintNFT.tsx)
  • Web3 integration (lib/web3.ts)
  • Styling (styles/marketplace.css)
  • Configuration files

2. Code Modification ​

Modify existing code:

Change the NFT price from 0.1 ETH to 0.05 ETH
Add a "Buy Now" button to the listing card
Make the header sticky on scroll

3. Debugging ​

Find and fix issues:

The mint button isn't working, can you fix it?
I'm getting a "transaction reverted" error
The wallet connection keeps disconnecting

4. Refactoring ​

Improve code quality:

Optimize the gas usage in the mint function
Extract the wallet connection logic into a hook
Make this component responsive for mobile

5. Explanation ​

Understand your code:

Explain how the staking rewards calculation works
What does this smart contract function do?
Why are we using ERC-721A instead of ERC-721?

6. Feature Addition ​

Add new capabilities:

Add dark mode toggle
Implement pagination for NFT grid
Add email notifications for new bids

Smart Prompting ​

Be Specific ​

❌ Vague:

Add a button

✅ Specific:

Add a "Connect Wallet" button in the top right
of the navbar, with MetaMask icon and dark theme

Provide Context ​

❌ No Context:

Fix the error

✅ With Context:

I'm getting "insufficient funds" error when trying
to mint NFT. The wallet has 0.5 ETH. Can you check
the mint function?

Reference Standards ​

❌ Generic:

Make an NFT contract

✅ With Standards:

Create an ERC-721 NFT contract using OpenZeppelin,
with ERC-2981 royalties at 5%, and Ownable for
access control

Include Examples ​

❌ Abstract:

Make it look better

✅ With Examples:

Style the NFT cards like OpenSea - rounded corners,
hover effects, and a gradient border

Conversation Patterns ​

Iterative Development ​

Build features step by step:

You: Create a basic staking contract
AI: [Generates basic staking contract]

You: Add reward calculation with 10% APY
AI: [Adds reward logic]

You: Include emergency withdraw function
AI: [Adds emergency withdrawal]

You: Add events for all state changes
AI: [Implements events]

Multi-File Changes ​

Request changes across files:

Update both the smart contract and frontend to
support multiple token types for staking

AI Will:

  • Modify contract (StakingPool.sol)
  • Update React hooks (useStaking.ts)
  • Adjust UI components (Staking.tsx)
  • Update types (types.ts)

Error Recovery ​

When something goes wrong:

You: The transaction keeps failing
AI: Let me check the contract...

AI: I found the issue - the approval isn't set.
I'll add an approval step before staking.

[Updates code with approval flow]

Advanced Features ​

Code Review Mode ​

Ask for analysis:

Review my smart contract for security issues

AI Provides:

  • Security vulnerabilities
  • Gas optimization tips
  • Best practice violations
  • Suggested improvements

Architecture Advice ​

Get design guidance:

What's the best way to structure a DAO with
multiple voting mechanisms?

AI Suggests:

  • Contract architecture
  • Data structures
  • Gas considerations
  • Security patterns

Learning Mode ​

Use AI as a teacher:

Explain how Uniswap's AMM algorithm works

AI Explains:

  • Core concepts
  • Mathematical formulas
  • Implementation details
  • Code examples

Chat History ​

Persistence ​

All conversations are saved:

  • Resume anytime
  • Switch between projects
  • Export chat history

Jump to messages:

  • Click any message to view
  • See associated code changes
  • Review generation steps

Search history:

Search: "wallet connection"
→ Shows all wallet-related messages

Best Practices ​

1. Start Broad, Get Specific ​

Step 1: Create a DeFi lending platform
Step 2: Use USDC as collateral
Step 3: Set LTV at 75%
Step 4: Add liquidation at 85%
Step 5: Include flash loan protection

2. One Feature at a Time ​

✅ Good:

Add wallet connection
[Wait for completion]
→ Add token balance display
[Wait for completion]
→ Add transaction history

❌ Overwhelming:

Add wallet connection, token balance, transaction
history, swap interface, and staking all at once

3. Verify Before Continuing ​

After major changes:

  1. Test the feature
  2. Check preview
  3. Confirm it works
  4. Then request next feature

4. Use Templates ​

Reference existing patterns:

Add a user profile page similar to the dashboard
we created earlier

5. Ask for Explanations ​

Understand what AI built:

Explain what you just changed and why

Chat Limits ​

Message Credits ​

Each message costs 1 credit:

  • Check balance before long sessions
  • Combine requests when possible
  • Upgrade plan for more credits

See: Credits System

Context Window ​

AI remembers:

  • ✅ Current conversation (full)
  • ✅ Project files (all)
  • ✅ Previous changes (recent)
  • ❌ Other projects
  • ❌ External documentation (unless referenced)

Response Length ​

AI responses are optimized for:

  • Complete features (not partial)
  • Working code (fully functional)
  • Best practices (production-ready)

Troubleshooting ​

AI Misunderstood? ​

Clarify your request:

I meant change the button color, not the text
No, I want the modal to appear on click, not on load

Code Not Working? ​

Provide error details:

Getting this error: "Cannot read property 'address'
of undefined" in WalletButton.tsx line 45

Want Different Approach? ​

Ask for alternatives:

Can you implement this using a different pattern?
Maybe with React Context instead of prop drilling?

Tips & Tricks ​

💡 Use Visual References ​

Make the NFT grid look like Foundation.app

💡 Request Tests ​

Add tests for the staking contract

💡 Ask for Documentation ​

Add comments explaining the reward calculation

💡 Optimize for Mobile ​

Make this responsive for mobile wallets

💡 Add Error Handling ​

Add proper error handling for failed transactions

💡 Request Security Review ​

Review this contract for reentrancy vulnerabilities

Next Steps ​

Built with Civra - Web3 Development Platform

Copyright © 2025 Civra